Cannot call function from click event

Question

I have a car parts classified section, I want to display only 10 ads per page and pagination links at bottom. Every example of PHP pagination I see puts the php code into the same page where the data is displayed....I do not want to do this. I want everything to go through jquery and AJAX and use the XMLHttpRequest to push the data on page.

In my PHP script I put together the pagination links and each anchor has an attribute of "href='#'" and'linkValue' who's value is dynamically set to it's corresponding page number. The PHP generates this HTML:

<a class="paginateLink" linkvalue="2" href="#""></a>

For instance when clicking on link with 'linkValue=2' that value is passed to a jquery function and concatenated to the end of the query string:

'getParts.php?pageNum=2'.

The PHP script gets the value of pageNum from the query string and uses it to determine which page is returned, in this example it would return records 11-20. The parts classified page is initially loaded by a function call to 'showParts()' in the head:

$(document).ready(showParts() );

which in turn calls the PHP script 'getParts.php'.

The problem is this: I cannot seem to call the 'showParts()' function from the click event from the pagination links. I can call a simple alert quite easily, I can even call a function which has the alert in it,but when trying to call the showParts function I just get the '#' at the end of the url addy and go to top of the page.

The jquery function:

$(document).ready(function(){
    $(".paginateLink").click(function(){
        showParts();
    });
});

At this point I'm not even trying to put the query string together, just want to get it so the function fires in the first place, even if it just sends back the same results.

EDIT: Not sure what I'm doing wrong here, this seems like it should work. For instance the following code works:

$(document).ready(function(){
    $(".paginateLink").click(function(){
        alert($(this).attr('linkValue'));
    });
});

So I CAN call a function and pass the necessary variable, I just can't call the showParts function, at least not a second time. Again the function is called when the page loads initially to populate the page with car parts.

function showParts(str) {
    if (str=="") {
        document.getElementById("partsDisplay").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {  // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("partsDisplay").innerHTML=xmlhttp.responseText;
            $(document).foundation('accordion', 'reflow');
            $(document).foundation();
        }
    }
    xmlhttp.open("GET","PHP/getParts2.php",true);
    xmlhttp.send();
}

maybe more help if you include the showParts function too

xeo
– xeo

2014-11-12 20:40:45 +00:00
Commented Nov 12, 2014 at 20:40 — xeo
– xeo, Commented Nov 12, 2014 at 20:40

skobaljic · Accepted Answer · 2014-11-12 23:07:31Z

1

It looks like you change the pagination elements in dom, so click event is removed. So, you better use:

$(document).ready(function(){
    $("body").on("click", ".paginateLink", function(){
        showParts();
    });
});

This means, no matter if you remove the pagination, than insert it again, whenever you click the body and target is a navigation link it will trigger the event. If you use older jQuery, than live is equivalent method.

Another error spotted, you use:

if (str=="") {
   document.getElementById("partsDisplay").innerHTML="";
   return;
}

which is wrong, because later on you call the function without argument. It should be:

if (typeof str === "undefined" || !str) {
   document.getElementById("partsDisplay").innerHTML="";
   return;
}

But, since you use jQuery, wouldn't all be easier with:

$(document).ready(function(){
    $("body").on("click", ".paginateLink", function(e){
        e.preventDefault();
        $('#partsDisplay').load('PHP/getParts2.php?pageNum=' + $(this).attr('linkvalue'), function() {
            $(document).foundation('accordion', 'reflow');
        });
    });
});

edited Nov 12, 2014 at 23:07

answered Nov 12, 2014 at 21:43

skobaljic

9,6841 gold badge29 silver badges52 bronze badges

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

5 Comments

Duck of Death Over a year ago

That's a delegated event right? Didn't work. Again if I just replace the function call with an alert, it works and the alert pops up, works same my way and this way. Seems to be related to the code in showParts but what I don't know.

skobaljic Over a year ago

How do you know the function is not called at all?

Duck of Death Over a year ago

Because the page would reload....wouldn't it? It just goes to the top of the page because of the href='#'(u can see it in the url).I thought of that too, and removed the if(str=="") code just to see what would happen and nothing happened. Also tried the code you suggested....still nothing.

skobaljic Over a year ago

you cannot say it would reload, start the function with console.log('Function called');, than test it

Duck of Death Over a year ago

Sigh....it appears I was refreshing a cached page. Chrome caching issue. I'm getting something now. Sorry. Thanx Sko.

Collectives™ on Stack Overflow

Cannot call function from click event

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related