CODEWITHSUNDEEP
jqueryajaxhtmlhideshow
Mario
Mario

Reputation: 79

JQuery and Ajax: show/hide div

I have this example.

When I click, a dynamic content load via Ajax. In the loaded page there is a link, that could close the div. It works, but when the div is closed (with hide()), the click on link don't reopen loaded page.

Why? How can I create a button, that show/hide a div loaded with Ajax?

Calling 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>

Included page :

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

Upvotes: 7

Views: 27244

Answers (4)

Mr.OFF
Mr.OFF

Reputation: 108

I think it doesn't work because HTML DOM already loaded. For dynamic binding you need to use function .bind() or .live() (Documentation for bind()).

For example:

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

Upvotes: 1

Umang Soni
Umang Soni

Reputation: 27

well my answer may help you... giving you the scenario...

you can use if else in response of 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 response in 1 then do this else do this

like....

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

here 4000 are ms(milliseconds) takes to hide or show the DIV] Hope this will help you

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382150

In your "close" button, you call hide().

Change your getAjax function to this :

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

I just added .show() to ensure the div is visible even if it has been made hidden before.

Note that I respected the original construct but this is much too complex : no need to call $(function when you can simply do 

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

If you want to have only one button, you may remove the one of 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();
}

Upvotes: 1

Bogdan
Bogdan

Reputation: 44526

I would using an unobtrusive approach, separating the html from the javascript (jQuery) code, and like @dystroy very well pointed out, just show the div before the ajax request is made to make sure it's 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>

Upvotes: 0

Related Questions