AJAX load method and toggle

Question

First of all I'm sorry for my noobness! :-( I am currently trying out AJAX jQuery load() method to load html page content for my navigation links. To do so, I created an empty div tag with an id, and I am replacing it accordingly:

HTML main webpage:

 <!--nav links-->:
<a href="#" id="index">Home</a>
<a href="#" id="news">News</a>
<a href="#" id="events"></a>

<!-- Main Container to be replaced-->
<div id="#pageContent"></div>

JQuery:

 $("#index").click(function() {
    $("#pageContent").load("home.html", function (response, status, xhr) {  // (selector).load(url, data, function(response, status, xhr))
        if (status == "error") {                                            // function is an optional callback method that runs when request is completed.
            var msg = "Sorry but there was an error: ";                     // response = contains result data from request
            $("#error").html(msg + xhr.status + " " + xhr.statusText);      // status = contains status of request (error, success, etc)
        }                                                                   //  xhr = contains XMLHttpp Request object
    });    
});

However, #index content has also a toggle button that if pressed, it will redirect to a specific section of another div - #news that is also called by ajax. It's purpose it to go to a specific news article (e.g. I have a list of 10 articles, when someone presses "read more" button on #index section, it will load article 5 in #news section). I created JS function to do so and it works when I load pages statically:

function showNews(newsToGo) {
            window.location.assign(newsToGo);
        }


        //-News Box 1-//
        document.getElementById('news-redirect1').addEventListener("click", function(){
                showNews("news.html#news-post-1");
        });

Now, I have no idea how to make it work in AJAX. If I leave the JS in, it just loads a "bare" div. Can anyone point me into right direction?

Why are you using `getElementById` and `addEventListener` when you use jQuery? — Barmar, May 22 '15 at 15:50
I can't understand the question. Are you talking about buttons that are in the content that's loaded dynamically? — Barmar, May 22 '15 at 15:52
That was vanilla JavaScript method that I was using previously to toggle to article, which worked fine when I was not using AJAX. Now as I'm using AJAX I don't know how to change it so that it refers to main page with that AJAX-ed div, as opposed to only the div. — lady rohmon, May 22 '15 at 15:53
Yes, The dynamic content has a button that will toggle to a specific element of another dynamic content. — lady rohmon, May 22 '15 at 15:55

score 0 · Accepted Answer · answered May 22 '15 at 15:55

I think you could try something like this. If you have a "global" page JS file that isn't loaded with each individual page, you could have navigation functions on it.

So for example, you could have something like this (provided I'm understanding your question correctly).

function showNews(newsToGo) {
    window.location.assign(newsToGo);

    $('#pageContent')
        .empty()    // you could call empty, or you could clone the current content
                    // so you wouldn't have to reload it via ajax again
        .load(newsToGo, function(response, status, xhr){
            // do your news stuff here, like inits or whatever :)
        });
}

AJAX load method and toggle

1 Answers1