All geek questions in one place

Creation

I'm starting on Twitter Bootstrap, and I'm trying to process a form from a modal block, which also loads using Ajax. The problem is that I do not know how to use it. I searched on Google watches, but I could not find a good example.

I have used jquery ui before, and I think it could be almost the same. I would like to know the following:

  • How to upload a file containing a form with Ajax
  • Does it work simply with selectors (for example, $ ('# item');) immediately after loading the form to get the values ​​entered into the form
  • How to link the submit button of a modal form to send the form via Ajax to another file.

Thank you for your help, and I can provide a sample form below:

<div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>Submit a link</h3> </div> <div class="modal-body"> <div id="msgholder1"></div> <div id="msg-loader"></div> <form action="../ajax/controller.php" data-async data-target="#msgholder1" id="add-link-form" method="POST"> <table id="theform"> <tr> <td>URL:</td> <td><input type="text" name="url" size="45" class="text ui-widget-content ui-corner-all" id="url" /></td> </tr> <tr> <td>Quality:</td> <td><select name="quality" id="quality"> <option value="0">Pick One ...</option> <option value="1">CAM</option> <option value="2">TS</option> <option value="3">DVD</option> </select><br /> </td> </tr> <tr> </fieldset> </form> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div>

Any kind of relevant documentation is also useful.

Thanks!

+4
source share
1 answer

After several hours of research and work, I have the following working Ajax Modal script:

 <script type="text/javascript"> $(document).ready(function() { $('#addlink').on('click', function(event) { var href = SITEURL + '/modules/movies/addlink.tpl.php?movie_id=<?php echo $movie->id; ?>'; $.get(href, function(response) { $('.modal').html(response); $('.modal').modal({keyboard:true}); $('button#submit_link').bind('click', function() { $('.modal-body').html('<p>Loading ...</p>'); $.ajax({ type: 'post', url: SITEURL + "/ajax/controller.php", data: 'action=report_link', dataType : 'html', context: $(this), success: function (msg) { $(".modal-body").html(msg); } }); }); }); event.preventDefault(); }); }); </script>
+18
source

Source: https://habr.com/ru/post/1438169/

More articles:


All Articles