javascript - HTML Links do not work after AJAX POST -
background: working on small web application. ajax post data action(create.php) , create.php execute necessary mysql query. once ajax done, append message div id="container"></div>
informing user of successful execution clear content "container" future use; however, here in lies problem.
problem: after ajax executes, can not click on html links loaded onto page(page.php). have refresh page in order click on links , follow them destination. causing happen , how can fix it?
ajax not need return result. needs execute specified jquery code once request done. on hunch, altered create.php echo $_post array , have ajax return result. once ajax loads result "container" still can not click on links loaded on page.php
answer: dom not being reloaded after ajax calls causing bootstrap dropdown menus not function properly. bootstrap dropdown class had manually reinitialized after each call. has been answered in detail here
create.php
<?php if($_post){ //run mysql query }else{ //do nothing } ?>
form.php
<form id="new-items"> <input type="text" name="item" /> <input type="button" onclick="create_item()" name="submit" value="submit" /> </form>
page.php
<html> <head> <script> $(document).ready(function(){ $("#add_items").click(function(){ event.preventdefault(); $("#content").load("form.php"); }); }); function create_item(){ var form_data = $("#new-items").serialize(); var request = $.ajax({ url: "create.php", type: "post", data: form_data, }); request.done(function(){ $("#content").append('<div>user added successfully</div>'); settimeout(function(){ $("#content").fadeout("slow"); }, 5000); settimeout(function(){ $("#content").empty(); }, 8000); }); request.fail(function(jqxhr, textstatus) { alert( "request failed: " + textstatus ); }); } </script> </head> <body> <nav> <a href="link1.php">link1</a> <a href="link2.php">link2</a> <a href="#" id="add_items">add new items</a> </nav> <div id="content"></div> </body> </html>
after fadeout
#content
element, remains hidden. next time call ajax function, it's loading create.php
invisible element.
try:
settimeout(function(){ $("#content").fadeout("slow", function() { $(this).empty().show(); }); }, 5000);
other issues: <div class="content">
should <div id="content">
; didn't include jquery.js
@ top of script; didn't pass event object e
click
handler.
page.php
should like:
<html> <head> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script> $(document).ready(function(){ $("#add_items").click(function(e){ e.preventdefault(); $("#content").load("form.php"); }); }); function create_item(){ var form_data = $("#new-items").serialize(); var request = $.ajax({ url: "create.php", type: "post", data: form_data, }); request.done(function(){ $("#content").append('<div>user added successfully</div>'); settimeout(function(){ $("#content").fadeout("slow", function() { $(this).empty().show(); }); }, 5000); }); request.fail(function(jqxhr, textstatus) { alert( "request failed: " + textstatus ); }); } </script> </head> <body> <nav><a href="#" id="add_items">add new items</a></nav> <div id="content"></div> </body> </html>
Comments
Post a Comment