根据URL调用AJAX状态

Question

I am loading content in an overlay with its own URL and it is running pretty good. But I have the problem that when I enter the URL in the browserbar, it links directly to the page of the url, but I want to stay (on the homepage) and the overlay with the project should fade in.

I've tried it with the window.location.href but it killed my function completely. (I am also pretty newbie when it comes to ajax stuff)

My Code

//AJAX Function to fetch project content

var url = $('.load').data('url');

function openUrlInModal(url, target){
    $.ajax({
        url: url,
        type: "GET",
        dataType: "html",
        contentType: "text/html",
        cache: false,
        success: function(url) {
            $(target).append(url).addClass('modal');
            $('.modal').fadeIn('fast');
            console.log("target:" + target);
            console.log("url:" + url);
        }
    });
}

// Adds content to the modal on click

$('.load').bind('click', function(e) {

    var target = $(this).data("target");

    //History Pushstate
    fetchedProjectUrl = $(this).attr("href");
    history.pushState(null, null, fetchedProjectUrl);

    //Call Ajax Function
    openUrlInModal($(this).attr('href'), target);

    e.preventDefault();
});


//Hitting Back Button

$(window).on("popstate", function(){

    history.pushState(null, null, "");

    $('.modal').fadeOut('fast');
    function empty(){
        $('.modal').empty();
    }
    setTimeout(empty, 300);
});

Thanks for any help in advance :)

Answer 1

I do not understand where the URL for modal come from. If you want to stop the browser to go to the URL which was tipped in the browserbar and then executed - this isn't possible due to security reasons and senseless programming in mind of a browser. In this meaning you must code an own browser, than it's ok - whatever your browser should want to do.

If the URL is a kind of dynamic, you must have a new window reference in your modal, like an iframe, than you can execute a separate location for it.

Otherwise only paste the response-html in your modal innerHTML