2

This is what I'm loading HTML into...

<div id="AJAX_Parent" class="visibleBorderThick">
    <div id="AJAX_Child">
    ...
    </div>
</div>

This is the link that loads the HTML using jquery's load function.

<a id="MyID_1755055367" class="dynamicLink" href="/rules"> Click Me </a>

This is the javascript that makes sure javascript and jquery are running...

    <script type="text/javascript">
            alert("Javascript is running");

            if (window.jQuery) {
                alert("jQuery is loaded") 
            } else {
                alert("jQuery is not loaded")
            }

            if ( $( "#MyID_1755055367" ).length ) {
                alert("Found element"); /* Element is found */
                alert( $( "#MyID_1755055367" ).length ); /* length is 1*/
            } else {
                alert("Cannot Find Element")
            }                

    </script>

This is the javascript that actually does the loading...

    $("#MyID_1755055367").onclick = (function() {
        alert("onclick activated");
        history.pushState({ linkSource: window.location.href }, "page title", "/rules");
        $("#AJAX_Parent").load("/rules #AJAX_Child");
        return false;
    });

^ This does not work. I am not seeing "onclick activated"

Also, I have tried doing it like this...

            document.getElementById("MyID_1704232995").onclick = (function() {
                alert("onclick activated");
                history.pushState({ linkSource: window.location.href }, "page title", "/rules");
                $("#AJAX_Parent").load("/rules #AJAX_Child");
                return false;
            });

Doing it this way gives me "onclick activated", and I see the URL changed and when I look at the page source in Google Chrome, I see that the HTML pertaining to <div id="AJAX_Child"> has been modified.

That's all good, but the page doesn't render correctly (it renders flat - as if AJAX_Child were an empty div). NOTE: FIXED THIS "FLATTENING" BY MOVING ID INTO "". DOLLAR SIGN LOADING STILL DOESN'T WORK.

* Fixed the jquery *

            $(@{ Html("\"" + "#" + uniqueID.body.substring(1)) }).click(function() {
                alert("onclick activated");
                history.pushState({ linkSource: window.location.href }, "page title", @quotedURL);
                $("#AJAX_Parent").load(@{ Html(quotedURL.body.dropRight(1) + " #AJAX_Child\"") });
                return false;
            });

* Now forward click works, but back button not working (back button causes HTML to change inside "page source", but page remains unchanged) *

Michael Lafayette
  • 2,972
  • 3
  • 20
  • 54
  • Your AJAX_Child div does not have the id inside of the quotation marks. Certainly can't be helping your cause – mhodges Jan 28 '16 at 20:43
  • @mhodges - That fixed the "flattening" effect, but the " $("#MyID_1755055367").onclick" still never runs. – Michael Lafayette Jan 28 '16 at 20:49
  • See our answers. You have defined the onclick event incorrectly for jQuery syntax – mhodges Jan 28 '16 at 20:49
  • You can't copy native dom node methods directly to jQuery methods. That's just not how jQuery works. Use either native dom methods or jQuery ones .... don't mix them together or you will just confuse yourself as has already happened – charlietfl Jan 28 '16 at 20:52

2 Answers2

2

The jQuery selector doesn't provide a onclick handler. Use .click() instead. https://api.jquery.com/click/

Second, .load accepts two arguments: a URL and a callback. https://api.jquery.com/load/

Third, please pay attention to your semicolon use, or lack thereof. It's making my cute kitten cry. You don't want that to happen. Ever.

Hatchet
  • 5,320
  • 1
  • 30
  • 42
  • load only requires url argument...other arguments are optional. Just clarifying for OP. – charlietfl Jan 28 '16 at 20:54
  • $"#MyID_1755055367").click(function() ... works. Page renders. Both your way and mhodges way work the same. As a side note, you wouldn't happen to know what to add to make "back" work, would u? Right now it just stays unchanged visibly. – Michael Lafayette Jan 28 '16 at 20:58
  • 1
    That's a whole other topic; Take a look at popstate: https://developer.mozilla.org/en-US/docs/Web/Events/popstate https://stackoverflow.com/questions/8038726/how-to-trigger-change-when-using-the-back-button-with-history-pushstate-and-pops – Hatchet Jan 28 '16 at 21:01
0

Your onclick definition is not formatted properly. It should be as follows: 

$("#MyID_1755055367").on("click", function() {
        alert("onclick activated");
        history.pushState({ linkSource: window.location.href }, "page title", "/rules");
        $("#AJAX_Parent").load("/rules #AJAX_Child");
        return false;
    });
mhodges
  • 10,938
  • 2
  • 28
  • 46