"onclick" of a button in a popup works only once

Question

I have an html/php webpage (the file is called searchresults.php) that imports jquery mobile. When you enter the page, the url is usually something like

www.domain.com/searchresults.php?&sort="off"&max="5"

In this example sorting is off and only 5 items are displayed. On that page is a button that opens a popup where I want the user to be able to change these settings. I use the built-in jquery mobile popup. On that popup you can toggle "sort" on/off and you can enter a new maximum. On the popup is an "ok" button to confirm your new settings. It looks like this:

<a href="" id="okbutton" data-role="button" onclick="sortAgain();">OK</a>

The sortAgain(); function in javascript looks like this:

function sortAgain();
{
    //some code to get the necessary variables//
    ...

    //change the href of the button so you reload the page
    document.getElementById("okbutton").href = "searchresults.php" + "?keyword=" + var1 + "&sort=" + var2 + "&max=" + var3
 }

So, basically, right before the "ok" button navigates to another page, I set its href of the page where it should navigate too.

This scheme works, and the searchresults.php file is fetched again from the server and re-interpreted (with the new variables in the url).

However, if i try to change the settings again after changing it once, the popup just does nothing! In other words, the href of the ok button on the popup stays empty and the javascript function sortAgain() is not called. I don't understand why it calls the onclick method perfectly fine the first time, but then refuses to call it again?

I assume it has something to do with the fact that the popup html code is an integral part of searchresult.php file, and that hrefing to the same page gives problems? The popup is pure html, no php is involved in the popup code. and again, it works fine the first time.

Is this loaded via ajax? You mentioned a standard navigate, but why bother changing a `href` on a full-page navigate (unless you're using AJAX)? — Brad Christie, Apr 18 '13 at 15:20
I don't think I'm using ajax? The php file fetches stuff from a database, depending on the sort and max parameters. The popup gets some user input and than goes to searchresult.php?&sort... again but with the new parameters. When the php file is reloaded, because the variables are different, the search results will be updated. — user1884155, Apr 18 '13 at 15:26

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

You should check out how to attach events via JavaScript. See here: javascript attaching events

edited May 23 '17 at 10:25

Community

1
1

answered Apr 18 '13 at 15:20

pmayer

341
2
13

Is this just general feedback on good programming practice or is using onclick() inside the html tags known to be bugged? – user1884155 Apr 18 '13 at 15:28
This would depend on which browser you're testing... Any mobile thing or desktop Chrome/Firefox/etc.? – pmayer Apr 18 '13 at 15:31

Scott Puleo · Answer 2 · 2013-04-18T15:54:33.950

0

You need to use the "pageinit" event when setting up click handlers in JQM: http://api.jquerymobile.com/category/events/

Here is an example of how to bind click handlers when the page is first loaded.

$( document ).on( "pageinit", "#that-page", function() {
    $('#okbutton').on( "click", "#that-page", function( e ) { 
        $(this).attr("href", "searchreslts.php");
    });
});

edited Apr 18 '13 at 15:54

answered Apr 18 '13 at 15:23

Scott Puleo

3,684
24
23

Is this just general feedback on good programming practice or is using onclick() inside the html tags known to be bugged? – user1884155 Apr 18 '13 at 15:27
Yes in general it is considered best practice to use [unobtrusive javascript](http://en.wikipedia.org/wiki/Unobtrusive_JavaScript) http://stackoverflow.com/questions/4478795/what-is-unobtrusive-javascript-in-layman-terms – Scott Puleo Apr 18 '13 at 15:35

"onclick" of a button in a popup works only once

2 Answers2