Conflicting jquery functions

Question

I have built two functions which work separately (when the other is deleted) but do not work together. The overall aim is that when a person selects the number of results they want to see per page, this then reloads the page, and the value is put in the url and then retrieved using get in php; and then on the new page the selected value in the drop down menu to is the value what triggered the reload.

Jquery

$(document).ready(function(){
    //the first section takes the value from the php script and then selects the option if it's not null - this works fine on it's own

    var data = "<?php echo $rp;?>"; 
    if (data){
        $("#bo2 option[value="+data+"]").attr('selected', 'selected');
    }

    //this too works fine on it's own but not with the above
    $('#bo2').change(function(){

        var opt = $(this).val();
        var url = "sales.php?results=";
        var newurl = url + opt;
        window.location.replace(newurl);
    });
});

Together, the first works fine, in that it re-selects the right value if, say, I put ?results=50 after sales.php but then the jQuery to trigger the reload doesn't work. What am I doing wrong?

Just to clarify. The first page is called "sales.php" and the drop down menu has the currently selected value of "10", with 25 and 50 being other options. When I click on another number the jquery doesn't work. However should I type into the url the ending "?result=50", for example, it does work; and the drop down menu now shows 50; when i click on ten, the url updates, and the drop down shows ten also; the problem then is they seem to conflict only at the start, as it were.

It would seem the problem may concern how jquery deals with php. Take for example the following first example which works, and then the second which doesn't:

1)

$(document).ready(function(){

$('#bo2').change(function(){

var opt = $(this).val();

var url = "sales.php?results=";

var newurl = url + opt;

window.location.replace(newurl);

});

});

2) This change function however will not trigger a reload of the page because of the inclusion of the php defined jquery variable.

$(document).ready(function(){

var data = "<?php echo $rp;?>";


 $('#bo2').change(function(){

var opt = $(this).val();

var url = "sales.php?results=";

var newurl = url + opt;

window.location.replace(newurl);

});

});

score 0 · Answer 1 · edited May 23 '17 at 12:32

This achieves what I want (I don't know if the php posed a problem or not). The function is from here - Get url parameter jquery Or How to Get Query String Values In js.

Also, I'm surprised nobody more experienced than me didn't point out what also seems to have made a difference; the "first" function in the original post needs to in fact be second.

So the below will reload a new page, when a user clicks on an option in a select menu with pre-defined options for how many results they want to see per page; this value will then show in the url, and, importantly, the current select value of the select menu will now be this value also; this is important so that if the user goes back to the original number of views, the change() function works still.

$(document).ready(function(){

var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
    sURLVariables = sPageURL.split('&'),
    sParameterName,
    i;

for (i = 0; i < sURLVariables.length; i++) {
    sParameterName = sURLVariables[i].split('=');

    if (sParameterName[0] === sParam) {
        return sParameterName[1] === undefined ? true : sParameterName[1];
    }
}
};



var data = getUrlParameter('results');

$('#bo2').change(function(){

var opt = $(this).val();

var url = "sales.php?results=";

var newurl = url + opt;

window.location.replace(newurl);
});

if (data)
    {
        $("#bo2 option[value="+data+"]").attr('selected', 'selected');
    }

});

Conflicting jquery functions

1 Answers1