How to communicate two html pages using jquery .load()

Question

I have a HTML page (Index.html) that has a left menu and when an user clicks on a menu item a content is loaded in a "center div" of Index.html.

I use the .load() function of jQuery like this:

$('#centerContent').load('DoSomething.html', function() {

});

In the DoSomething.html the user can performs some action and, after the user tap on a "done button", I want to send some information to index.html page.

How the DoSomething.html page (loaded from Index.html) can pass information to the the page that loaded it (Index.html)?

Thank you!

If it's a static html page, what "information" does it need to pass? — Brad M, Jul 22 '13 at 18:33
Can you provide a more specific use case? Once `DoSomething.html` is loaded, it becomes *part* of `index.html` so should be able to interact seamlessly. — Zach Lysobey, Jul 22 '13 at 18:34
@Zach L ok, but the page DoSomething.html should be a reusable page and I would like to pass an owner. — MaTTP, Jul 22 '13 at 18:38
Still not sure what you're asking? "pass an owner"? in what way do you want it to be "reusuable"? Why don't you give one *specific* example of the problem you are trying to solve? — Zach Lysobey, Jul 22 '13 at 18:42
@Zach L I develop a web app that attachs to a "document" some informations. The DoSomething.html page is used when the user wants to create a new "document" and when the user wants to modify an old "document" created. When the user terminates to editing the informations and "done button" is clicked I want to call a different routine in the page that loaded DoSomething.html — MaTTP, Jul 22 '13 at 18:50

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

Please forgive me if my answer is too basic. It's difficult to judge how much is too much and I'd rather give you a lot too much info than a bit too little.

When jQuery uses the .load() method to load another file from the server, the new code is placed into the DOM and becomes part of the current page. Therefore, you do not need to transfer information from one HTML document to the other -- they have been integrated into a single DOM.

However, to detect event triggers happening to the injected HTML (such as detecting a button click), you must use the .on() method.

Next, it looks like you want to do something with the data once the user has finished editing the fields. You can either wrap the #centerContent DIV inside <form> tags, like this:

<form action="somephpfile.php" method="POST">
    Document Title:<br />
    <input type="text" name="theVarNameThatGetsSubmitted" /><br />
    Document Text:<br />
    <input type="text" name="formDocText"><br />
    <br />
    <input type="submit" value="Click When Done" />
</form>

When user clicks the "Click When Done" button, whatever the user typed will be POSTed to a PHP file called "somephpfile.php", and the user's view will also transfer over to that document.

In the "somephpfile.php" file, you can get the user's data by retrieving it from the POST variable:

<?php

    $titre = $_POST['theVarNameThatGetsSubmitted'];
    $text = $_POST['formDocText'];

    //Now do what you want, and show the user what you want

However, a better way to submit your data is by AJAX. It might sound difficult at first, but AJAX is actually very easy. Here are some advantages of AJAX over using the old FORMS method:

AJAX doesn't send the user anywhere. User stays on the same page.
AJAX doesn't refresh the screen. Everything happens invisibly, in the background.
AJAX is easier.

Here are some basic examples that show how AJAX works. The first one alone should be enough:

Here is your example, refactored to use AJAX (fully working):

HTML - INDEX.HTML:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <style>
            #centerContent{min-height:200px; width:70%; margin:50px auto 0px auto; background-color:lightgrey;}
        </style>

        <script type="text/javascript">
            $(document).ready(function() {


                $('#left_menu').click(function() {
                    //var stuff = '<h2>Your Document</h2>Title: <input type="text" id="doctitle" /><br />Document Text: <input type="text" id="doctext" /><br /><br /><input type="button" id="done" value="Done Editing" />';
                    //$('#centerContent').html(stuff);
                    $('#centerContent').load('second_html_doc.html');
                });

                $(document).on('click', '#done', function() {
                    var ti = $('#doctitle').val();
                    var tx = $('#doctext').val();
                    alert('Now we can save this data into another file: ['+ti+'] ['+tx+']');

                    $.ajax({
                        type: 'POST',
                        url: 'your_php_file.php',
                        data: 'theTitle=' +ti+ '&theDocText=' +tx,
                        success: function(whatigot) {
                            //alert('Server-side response: ' + whatigot);
                            $('#centerContent').html(whatigot);
                        } //END success fn
                    }); //END $.ajax

                });
            }); //END $(document).ready()

        </script>
    </head>
<body>

    <a id="left_menu" href="#">Left Menu Item</a>
    <div id="centerContent">Hello</div>


</body>
</html>

HTML #2, save it as: second_html_doc.html

<h2>Your Document</h2>
Title: <input type="text" id="doctitle" /><br />
Document Text: <input type="text" id="doctext" /><br />
<br />
<input type="button" id="done" value="Done Changing Stuff" />

PHP Processing File. Save it as: your_php_file.php

<?php

    $t = $_POST['ti'];
    $x = $_POST['tx'];

    $r = '<h1>Info Received by PHP</h1>';

    $r .= 'Document Title: ' . $t . '<br /><br />';
    $r .= 'Document Text : ' . $x . '<br /><br />';

    echo $r;

How to communicate two html pages using jquery .load()

1 Answers1