58895

Reset bootstrap modal

So, I am using bootstrap's modal.

I want to make a wizard style modal and came up with the following solution:

div snippets:

<div class="modal-instance hide fade" id="step1"> <div id="stepa"> ... </div> </div> <div id="stepb" style="display: none;"> ... </div>

Upon pressing a button in step-a step-b is loaded.

javascript snippet:

$("#stepa").replaceWith($('#stepb')); document.getElementById('stepb').style.display = 'block';

This works ok.

But when I dismiss the modal. The div stepa has still been replaced by stepb. My solution was to build a replacement back to stepa when the modal is hidden:

$("#myModal").on("hidden", function() { //replace the child });

I tried:

$('#step1').children().remove(); $('#step1').append($('#stepa'));

and

$("#step1").children("div:first").replaceWith($('#stepa'));

But I am having a hardtime selecting step-a as a replacement div, probably due to it not being a separate div. My question is, is this the right approach for a wizard styled modal or should I take another approach?

Answer1:

It's much simpler just to hide the previous and next steps, instead of copying them.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button> <div id="myModal" class="modal hide fade" data-step="1"> <div class="step step1"> <h1>Step 1</h1> <button class="btn next">Next</button> </div> <div class="step step2"> <h1>Step 2</h1> <button class="btn previous">Previous</button> <button class="btn next">Next</button> </div> <div class="step step3"> <h1>Step 3</h1> <button class="btn previous">Previous</button> <button class="btn done" data-dismiss="modal">Done</button> </div> </div> <style type="text/css"> #myModal > .step { display: none; }​ </style> <script type="text/javascript"> $(function() { showStep(parseInt($('#myModal').data('step')) || 1); $('#myModal .next').on('click', function () { showStep(parseInt($('#myModal').data('step')) + 1); }); $('#myModal .previous').on('click', function () { showStep(parseInt($('#myModal').data('step')) - 1); }); $('#myModal').on('hidden', function() { showStep(1); }); function showStep(step) { $('#myModal').data('step', step); $('#myModal > .step').hide(); $('#myModal > .step' + step).show(); } });​ </script>

http://jsfiddle.net/7kg7z/5/

Recommend

  • Jquery : How to move TD to another TR?
  • How to include array content in HTML?
  • Toggle dropdown mini-cart when product added to basket
  • Website flashes between loads
  • How to Divide an array on c#?
  • $_POST for text in DIV elements
  • when does setTimeout start executing in a inline
  • Responsive left sidebar open close
  • Making Google Visualization - Annotation Chart to work in GWT
  • Prevent page break in text block with iText, XMLWorker
  • Jquery Mobile pageLoading() Method how does it work?
  • C++ friend class std::vector
  • SyntaxError: (irb):26: both block arg and actual block given
  • Do query loads all the data in memory
  • Defined variables not working in javascript files when I use getScript
  • Update Google Maps traffic layer without page reloading
  • Debugging VB6 Code From Visual Studio 2010
  • Diff between two dataframes in pandas
  • Parse a date string in a specific locale (not timezone!)
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • MailKit: The IMAP server replied to the 'EXAMINE' command with a 'BAD' response
  • Android fill_parent issue
  • Ajax Loaded meta Tags
  • How to get address from latitude and longitude android google map v2 [duplicate]
  • HTML download movie download link
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • Updating server-side rendering client-side
  • Change an a tag attribute in JavaScript based on screen width
  • jquery mobile loadPage not working
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Compare two NSDates in iPhone
  • File upload with ng-file-upload throwing error
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Free memory of cv::Mat loaded using FileStorage API
  • How to set the response of a form post action to a iframe source?
  • Java static initializers and reflection
  • Setting background image for body element in xhtml (for different monitors and resolutions)