Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to detect a url change through AJAX without reload in jQuery?

Tags:

jquery

ajax

I have a userscript (for Chrome) that I am using to format duolingo's practice pages for me. It just applies a single line of css with

jQ(document).ready(function(){
    jQ('#start-button').css({"float": "left", "margin-right": "10em"});
});

And this works just fine the first time I come to the page. But they use Ajax to avoid page reloads. And the url does change, so if I detect that, I can refresh the css change and not lose the formatting with this site navigation pattern.

Anyone happen to know a good way to detect it?

edit: full user script implementing the popular solution several pointed out at first (which is not working):

// ==UserScript==
// @name         duolingo
// @namespace    http://your.homepage/
// @version      0.1
// @description  reformat /skills to not start timed practice by default
// @author       You
// @include      /^https?\:\/\/www\.duolingo\.com\/(skill|practice)?\/?.*/
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
// @grant        none
// ==/UserScript==

window.jQ=jQuery.noConflict(true);

jQ(document).ready(function(){
    style_duolingo();
});
jQ(window).bind('hashchange', function() {
    style_duolingo();
});
jQ(document).ajaxComplete(function() {
    style_duolingo();
});


function style_duolingo() {
    jQ('#start-button').css({"float": "left", "margin-right": "10em"});
    console.log("Tampermonkey script: wrote css change");
}

edit #2:

For bounty reward

Please provide a working solution that does not load external libraries (I'd like to know what I am missing, not keep it in a black box), and solves the issue using events (no interval-based solution). If events (bizarrely) cannot be used, please provide the correction solution and the reason why events are not being triggered.

like image 790
roberto tomás Avatar asked Feb 26 '16 15:02

roberto tomás


People also ask

How do I know if my URL has been changed?

You can use the popstate method to detect those URL changes and make UI changes as needed. window. addEventListener('popstate', function (event) { // The URL changed... });

How do I change the content of a page without reloading it?

AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

How does .post work in jQuery?

jQuery $.post() Method The $.post() method requests data from the server using an HTTP POST request. Syntax: $.post(URL,data,callback); The required URL parameter specifies the URL you wish to request.

Can we use two URL in AJAX?

You can't call 2 url simultaneously. but you can call one after another. You can't put two URLs in an ajax call.


1 Answers

To change the url Duolingo uses history.pushstate. I recommend you galambalazs answer to similar question

This is his code:

(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
    if (typeof history.onpushstate == "function") {
        history.onpushstate({state: state});
    }

    //Custom code here
    style_duolingo();

    return pushState.apply(history, arguments);
}
})(window.history);
like image 159
sulest Avatar answered Nov 12 '22 13:11

sulest