javascript or jquery to change innerHTML of a div?

Question

This function allow me to load a webform/popup above my page test.aspx

  $(document).ready(function () {
  $('#<%= webform.ClientID %>').load('pop_up_one.html');})

I now would like to change the innerhtml of this popup with another popup and have the possibility to come back to the first popup. Basicly I just want to change the innerhtml of the DIV of the first pop_up

How is possible to do that? thought adding something like:

   $('#div_of_popup_one').click.load('pop_up_two.html');

but this does not work.

The only way I found to make it work has been to integrate this code into pop_up_1-html:

    function loadextPage(event) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById('name_of_div_to_change').innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", event.target.href, true);
        xmlhttp.send();
    }

and call this from:

Go to second pop up

This method works but i would like to do it with something like

        $('#div_of_popup_one').click.load('pop_up_two.html')

from the page i am calling the pop_up_one

Answer 1

To do this, first you need to, bind click event and then invoke click . Use the following code.

   $('#div_of_popup_one').on("click", function() {
       $(this).load('pop_up_two.html');
   });

   $('#div_of_popup_one').click();