-1

I'm new to this and I'm trying to figure out if it's possible to pass specific data values (URL's and strings) from one HTML page to another with ajax. For example say I have "Location 1.html" and I want to send a specific value (name, URL) to "List.html" that can display the values in a li listview. I would like to be able to add data from many location html files (ex. "Location 2.html", "Location 2.html", etc). I found this example but it uses ASP.

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_post

Here is what I tried but I don't even know if it's even right.

<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>

    <style>
        div.disabled {
        background: lightgrey;
        }
    </style>
    <div data-role="page" id="Location1">
    <div data-role="header" data-position="fixed">
         <h1>Location 1</h1> 
    </div>

    <div role="main" class="ui-content">
    <button class="rbutton" data-icon="star">Disable</button>

    </div>

    <div data-role="footer" data-position="fixed">
        <h1>My page footer</h1>
    </div>

    </div>
    <script>
    $('.rbutton').on('click',function() {
    $(this).prop("disabled",true);
    $.post("List.html",
    {
      name: "Donald Duck",
      city: "Duckburg"
    },
    function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
    });
    });
    </script>


 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 </head>

 <div data-role="page" id="Favorites">

 <div data-role="header" data-position="fixed">
     <h1>Favorites</h1> 
 </div>

 <div role="main" class="ui-content">
    <ul id="favorites_list"></ul>
 </div>

 <div data-role="footer" data-position="fixed">
    <h1>My page footer</h1>
 </div>

 </div>
 </html>
speedracer2003
  • 171
  • 1
  • 6
  • 19
  • 1
    You cannot use post for such a case because plain html don't have http headers. so that we cannot access those posted values in the html page. If the method is get the we can access the query string with javascript. – Tintu C Raju Feb 18 '15 at 03:32
  • possible duplicate of [Persist javascript variables across pages?](http://stackoverflow.com/questions/1981673/persist-javascript-variables-across-pages) – Matthew Jaspers Feb 18 '15 at 03:32

1 Answers1

1

You cannot post data between pages like this using Javascript.

You could pass the data in the url: http://example.com/list.html?name=Donald&city=Duckburg

To get these values you can use this function (cribbed from this answer):

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" :      decodeURIComponent(results[1].replace(/\+/g, " "));
}

You could also use session cookies or localStorage to persist values while the user is browsing in the same window. Look here for info about that.

Community
  • 1
  • 1
Matthew Jaspers
  • 1,546
  • 1
  • 10
  • 13