Question

So here’s the problem. I have three pages that make web service calls. The first time I land on the page and make the call it works fine, however if I switch to the second page it tries to make a web service call to the wrong service. Here’s some info:

pages:

Page1.aspx - has Page1.js
Page2.aspx - has Page2.js

js files:

Page1.js

var filterCriteria = "";

function GetList() {
    $.ajax({
        type: "POST",
        url: "/webServices/Page1.asmx/Page1List",
        contentType: "application/json; charset=utf-8",
        data: "{'letter':'" + filterCriteria + "'}",
        dataType: "json",
        success: function (result) {
            DisplayList(result.d);
        }
    });
}

function GetSearchResults() {
    $.ajax({
        type: "POST",
        url: "/webServices/Page1.asmx/Page1FilteredList",
        contentType: "application/json; charset=utf-8",
        data: "{'searchCriteria':'" + $("#Search").val() + "'}",
        dataType: "json",
        success: function (result) {
            DisplayList(result.d);
        }
    });
}

function DisplayList(object) {
    var html = '';
    for (var i = 0; i < object.length; i++) {
     //format results and append
    }
    if (object.length == 0) {
        html += "<li class=\"filteredList\" style=\"padding: 10px;\">No Results Found</li>";
    }
    $("#Page1List").html(html);
}

Page2.js

var filterCriteria = "";

function GetList() {
    $.ajax({
        type: "POST",
        url: "/webServices/Page2.asmx/Page2List",
        contentType: "application/json; charset=utf-8",
        data: "{'letter':'" + filterCriteria + "'}",
        dataType: "json",
        success: function (result) {
            DisplayList(result.d);
        }
    });
}

function GetSearchResults() {
    $.ajax({
        type: "POST",
        url: "/webServices/Page2.asmx/Page2FilteredList",
        contentType: "application/json; charset=utf-8",
        data: "{'searchCriteria':'" + $("#Search").val() + "'}",
        dataType: "json",
        success: function (result) {
            DisplayList(result.d);
        }
    });
}

function DisplayList(object) {
    var html = '';
    for (var i = 0; i < object.length; i++) {
     //format results and append    
    }
    if (object.length == 0) {
        html += "<li class=\"filteredList\" style=\"padding: 10px;\">No Results Found</li>";
    }
    $("#Page2List").html(html);
}

So both have the same calls and the same information and the only real difference is that the results are different and they make a web service call to different web services that get different data.

Now each time that I switch between I get a new js file which is

jQuery-1.7.1.min.js/eval/seq/1
jQuery-1.7.1.min.js/eval/seq/2
jQuery-1.7.1.min.js/eval/seq/3
jQuery-1.7.1.min.js/eval/seq/4

depending on how many times I switch back an forth. Is there any way to stop the eval or is there something in my code that is causing the jQuery to store evals of the code I am using and what can I do to resolve it?

Answer 1

So the problem was that I was loading page transitions from jquery mobile. What was happening was that jquery mobile appends new page data to the DOM instead of forcing a page load. This was causing both javascript files to be loaded simultaneously meaning that which ever js file was loaded last was the primary and because both js files were calling functions with the same name it would load them multiple times.

Resolution
remove the $.mobile.load() event and force the click event to append the pathname to the url

$("#GoPage1").on("click", function () { window.location = "/dir/Page1.aspx"; });
$("#GoPage2").on("click", function () { window.location = "/dir/Page2.aspx"; });