jQuery .load() function returning nothing

Question

I have the following block of code in Index.aspx. When I click on button the page, it reloads and shows nothing (empty page).

<div class="filter_block">
                <span>Show</span>
                <a href="#"><span class="title">full shedulle</span></a>
                <a id="buttonFindFilmByName" class="active"><span class="title">films name</span></a>
                <script type="text/javascript">
                    $(document).ready(function () {
                        $("#buttonFindFilmByName").click(function() {
                            $('#listInfoBlock').load('cinema/filmlist');
                        });
                    })
                </script>
            </div><!-- .filter_block-->

            <div id="listInfoBlock" class="list_infoBlock">           

            </div><!-- .list_infoBlock-->

Does the firebug/javascript console show anything?

JohnP
– JohnP

2011-12-19 07:16:12 +00:00
Commented Dec 19, 2011 at 7:16 — JohnP
– JohnP, Commented Dec 19, 2011 at 7:16

Stéphane Bebrone · Accepted Answer · 2011-12-19 07:15:44Z

6

Your page is reloading because that's the standard browser 's behavior when the user clicks on a a (link) HTML element.

You can stop this default behavior by using a parameter in the click handle and calling the preventDefault method:

$("#buttonFindFilmByName").click(function(e) {
    e.preventDefault();
    ....

answered Dec 19, 2011 at 7:15

Stéphane Bebrone

2,76317 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kichik · Accepted Answer · 2011-12-19 07:27:04Z

1

Return false from the click handler function to tell the browser not to follow the link. This also allows you to set a real link in href for browsers that don't support JavaScript, or in case the user turned it off.

$(document).ready(function () {
  $("#buttonFindFilmByName").click(function() {
    $('#listInfoBlock').load('cinema/filmlist');
    return false; // <====== FIX
  });
});

answered Dec 19, 2011 at 7:27

kichik

34.9k7 gold badges102 silver badges121 bronze badges

4 Comments

Stéphane Bebrone Over a year ago

Returning false should be avoided.

kichik Over a year ago

Was not aware of that. Thanks for the heads up. Any idea if jQuery provides a compatibility layer for IE6/7 that don't support this?

Stéphane Bebrone Over a year ago

Follow this answer, for IE you should use event.returnValue = false.

kichik Over a year ago

I checked the latest source and it seems to provide it. Not sure when they added it though.

Collectives™ on Stack Overflow

jQuery .load() function returning nothing

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related