jquery ajax load for external url attributes

Question

I'm working with jquery load, which has to navigate from index.html page to container.html.

index.html page jquery code looks like this

$(".tblList a").click(function () {
var aUrl = $(this).attr("href");
var page = aUrl.split("?page=");
localStorage.setItem("pageName", page[1]); }); //click end

in container.html page my html and jquery code looks like this:

html:

<div id="containerWrapper" class="row"></div>

js:

 $(function () {

 var pageName = localStorage.getItem("pageName");
 $("#containerWrapper").load(pageName + ".html");

 $("#containerWrapper").find('a[href^="http"]').click(function () {
     alert("http");
     window.open(this.href);
     return false;
     //$('#containerWrapper').load($(this).attr("href"));
 });

 $('a[href^="ftp"]').click(function () {
     alert("ftp");
     $(this).attr("target", "_blank");
 }); });

 $(window).bind('hashchange', function (e) {
     var url = window.location.toString();
     var innerPagesLink = url.split("?page=")[0];
     var innerPagesLinkUrl = url.split("#")[1];
     var result = innerPagesLink + "#" + innerPagesLinkUrl;
     var replaceUrl = url.replace("?page=", "#");
     //alert(innerPagesLink); return false;
     window.location = innerPagesLink;

     newHash = window.location.hash.substr(1);
     $mainContent.load(newHash);
 }); //bind end

what is solved is:

1. i am successfully loading page from index.html hyperlink to container.html div id.

2. in container.html (loaded page) have many hyperlinks some with attributes like:

   a href="someother.html"

   a href="http://someother.com"

   a href="ftp://someother.com"

I am successfully loading "a href *.html" hyperlinks to div#containerWrapper.

I fail to load http and ftp external pages to my div.

I tried to open http or ftp links to other tab which also fails me. attached here are two pages with example fiddles:

(these fiddles are not working in online which works in local mc)

INDEX.HTML FIDDLE

CONTAINER.HTML FIDDLE

pls try to help me out and sorry for my english.

Answer 1

load is an asynchronous function, so it most likely will not have completed by the time the next line of code is run. You can assign the click event handler to the container div instead, like this...

// assign click event handler to container, for http link clicks
$("#containerWrapper").on("click", "a[href^=http]", function () {
     alert("http");
     window.open(this.href);
     return false;
});
// assign click event handler to container, for ftp link clicks
$("#containerWrapper").on("click", "a[href^=ftp]", function () {
    alert("ftp");
    $(this).attr("target", "_blank");
});

That means that when any element in #containerWrapper is clicked, it will be compared against the selectors in the 2 event handlers and execute the relevant code. The links do not have to exist when this type of event handler is assigned.

Just remove the two click event handlers and add that instead.

You could alternatively assign the click event handlers in the load callback function, like this...

var pageName = localStorage.getItem("pageName");
$("#containerWrapper").load(pageName + ".html", function() {
    // assign click event handler to http links
    $(this).find("a[href^=http]").on("click", function () {
         alert("http");
         window.open(this.href);
         return false;
    });
    // assign click event handler to ftp links
    $(this).find("a[href^=ftp]").on("click", function () {
        alert("ftp");
        $(this).attr("target", "_blank");
    });
});

This will work just as well, if not better (with a very, very slight performance increase), but it will break if you add any further links to the container div after that code has run. The first example will handle that without any further changes.