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

Question

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.

Does this help? stackoverflow.com/questions/6390341/how-to-detect-url-change — Prophecies
– Prophecies, Commented Feb 26, 2016 at 15:18
What is the parameter for type that you are passing in your AJAX call? — Abhishek Dhanraj Shahdeo
– Abhishek Dhanraj Shahdeo, Commented Mar 14, 2016 at 11:00
Perhaps this doesn't work at all on the target scenario, but would it be possible to insert a css line with !important annotation $('head').append("<style type='text/css'> #start-button{ float: left !important; margin-right: 10em; !important}</style>");? — Me.Name
– Me.Name, Commented Mar 14, 2016 at 12:14
yeah I've done that sort of this from time to time. Usually, that is a mistake, you can be more specific in your CSS, and failing that, you could remove the offending selector once you locate it with jQuery. However, it can be injected programmatically by the site, and that doesn't have to happen once only — so sometimes it really is important in userscript. — roberto tomás
– roberto tomás, Commented Mar 14, 2016 at 12:47

Community · Accepted Answer · 2017-05-23 12:00:10Z

3

+50

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);

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Mar 8, 2016 at 15:54

sulest

1,0361 gold badge10 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

roberto tomás Over a year ago

this is half right. It works when going from the main listing of practice exercises to the practice. It does not work when going from the end of a practice to continue, then to the next practice.

sulest Over a year ago

Perhaps we are missing something here. Can you fire the following code and look into browser console $('body').on('change', function(){console.warn('App changed')});

roberto tomás Over a year ago

$('body').on('change', function(){console.warn('App changed')}); [<body class="global-en compact-enabled" lang="en" style="overflow: auto;">…</body>] VM1999:51 Tampermonkey script: wrote css change the last line is from my script. This is despite the fact that it does not actually change the CSS!

roberto tomás Over a year ago

actually, even when it does change the CSS, the results look the same: $('body').on('change', function(){console.warn('App changed')}); [<body class="global-en compact-enabled" lang="en">…</body>] e365420…-duolingo.js:3 Duolingo is hiring software engineers: https://www.duolingo.com/jobs /gcm-service-worker.js:1 GET https://www.duolingo.com/gcm-service-worker.js net::ERR_FILE_EXISTS VM6336:55 Tampermonkey script: wrote css change

sulest Over a year ago

the code was only to show you if changed log warning shows on every page change. I see that the in some cases URL changes, but not always. Did you try to run your function inside body change listener like this: $('body').on('change', function(){ style_duolingo() }); If this covers your other 50% of "working right" combine it with history pushstate

|

Atif Tariq · Accepted Answer · 2016-02-26 15:24:22Z

1

Use it like this:

jQ(document).ready(function(){

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

});

answered Feb 26, 2016 at 15:24

Atif Tariq

2,7701 gold badge31 silver badges35 bronze badges

1 Comment

roberto tomás Over a year ago

this seems like it should be the answer, but it in fact does not work.

Oleg · Accepted Answer · 2016-03-14 09:09:45Z

1

Since you're only adjusting styling, you're better off using Stylish Chrome extension that allows you to tamper with css. You would then add

@-moz-document domain("www.duolingo.com") {
    #start-button {
        float: left;
        margin-right: 10em;
    }
}

Note @-moz-document follows userstyles convention and is importable into Chrome. There's actually a few published userstyles for duolingo already :)

answered Mar 14, 2016 at 9:09

Oleg

25.1k8 gold badges65 silver badges94 bronze badges

1 Comment

roberto tomás Over a year ago

I used to use stylish —I liked it a lot, but I've since switched to loading jquery in my pages through userscript by default, because it is much more flexible. The only reason I moved away from stylish was that at the time, you could not easily specify that rules should not match the gui elements stylish shows you in page when stylish the page. I understand (and think I can see in your example) that they did eventually fix that though.

Prophecies · Accepted Answer · 2016-02-26 15:21:20Z

0

There also seems to a plugin that allows the same if the hashchange event on window fails.

answered Feb 26, 2016 at 15:21

Prophecies

7231 gold badge7 silver badges19 bronze badges

Comments

Nietvoordekat · Accepted Answer · 2017-10-28 13:57:59Z

0

You can check for any url change by checking the url and seeing if that matches the previous url, every second. It might look like this:

var oldURL = window.location.url;
var newURL = oldURL;
window.setInterval(function(){
    newURL = window.location.url;
    if(oldURL !== newURL){
        //the URL has changed
        oldURL = newURL; //to prevent the above from continuously firing
    }
}, 1000);// checks every 1000 ms (1s)

edited Oct 28, 2017 at 13:57

Nietvoordekat

1847 bronze badges

answered Feb 26, 2016 at 15:24

Andrew

1,33214 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

For bounty reward

5 Answers 5

7 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

For bounty reward

5 Answers 5

7 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related