Geek Answers Handbook

JQuery and Ajax: show / hide div

I have this example .

When I click, dynamic content loading through Ajax. There is a link on the loaded page that can close the div. It works, but when the div is closed (using hide ()), the link to the link does not resume the loaded page.

Why? How to create a button that shows / hides a div loaded with Ajax?

Call Page:

<script type="text/javascript"> function getAjax(divdett,pageload) { $(function(){$(divdett).load(pageload);});} </script> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>click</title> </head> <body> <a href="javascript:getAjax('#siteloader','jquery_divajax.htm');">click</a> <div id="siteloader"></div> </body>

Page Included:

 <script type="text/javascript"> function delAjax(divdett) { $(divdett).hide(); } </script> OK! <a id="#chiudi" href="#" onclick="delAjax('#siteloader');">chiudi</a>
+7
source share
4 answers

In your close button, you call hide() .

Modify the getAjax function as follows:

 function getAjax(divdett,pageload) { $(function(){$(divdett).load(pageload).show();});}

I just added .show() to make sure the div is visible even if it was hidden before.

Note that I respected the original design, but it's too complicated: there is no need to call $(function , when you can just do

 function getAjax(divdett,pageload) { $(divdett).load(pageload).show();}

If you want to have only one button, you can delete one from the second file and change the getAjax function to

 function getAjax(divdett,pageload) { var div = $(divdett); if (div.is(':visible')) div.hide(); else div.load(pageload).show(); }
+1
source

I would use an unobtrusive approach that separates html from javascript (jQuery) code and, like @dystroy, pointed out very well, just show the div before the ajax request is made to make sure it is visible:

 <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>click</title> <script type="text/javascript"> $(function() { $('#clickme').on('click', function(event) { $('#siteloader').show().load('jquery_divajax.htm'); event.preventDefault(); }); $('#siteloader').on('click', '#chiudi', function(event) { $('#siteloader').hide(); event.preventDefault(); }); }); </script> </head> <body> <a id="clickme" href="">click</a> <div id="siteloader"></div> </body>
0
source

Ok, my answer can help you ... giving you the script ...

you can use if else in response to ajax request

 $.ajax( { url:"ChkLogin.php", type:"POST", dataType: 'json', data: {usernm: unm, passwrd: pass }, success:function(myoutput) { $(":hidden").val(myoutput.srno); if(myoutput.flag=="1") { window.location="chat.php"; } else { $("#msg").html("Invalid Login"); } } });

is the answer in 1 then do it still do it

as....

 if(myoutput.flag=="1") { $("#div").hide(4000); } else { $("#div").show(4000); }

here 4000 - ms (milliseconds) to hide or show the DIV] Hope this helps you.

0
source

I think this does not work because the HTML DOM is already loaded. For dynamic linking, you need to use the .bind() or .live() function ( Documentation for bind () ).

For example:

 $( "#foo" ).bind( "click", function() { $( this ).hide(); // or show(); });
0
source

More articles:


All Articles