[jQuery] pretty urls break my jquery app: how to adapt it ?

[Alexandre Plennevaux]

Hello !


My app is nearing the end so bear with me as the issue takes time to explain. 
However i'm looking for suggestions, directions, so your answer does not have 
to be that long :)

So: We implemented pretty urls via apache's mod_rewrite. unfortunately that 
breaks my jquery code because in my js script i modify the <A> elements href 
attribute (so the links) to add some UI-related variables allowing me to 
control the interface and trigger some animations according to the user 
navigation.

 Long story short: i'm using the urls to pass variables that i use to control 
the GUI.

so for example, php would output :

<a href="app.php?section=projects&item=touch">link</a>

javascript would modify the link by adding variable/value pairs (this is an 
example):

<a href="app.php?section=projects&item=touch&menu=open&js=1">link</a>

then my javascript code disables the click event, opens or closes the menu 
(depending on the menu variable value), and js indicates that the data is 
loaded via ajax. If js var does not exist, the customer does not have 
javascript enabled so the php script should send a full page code, not just the 
updated bit a la ajax.

problem is, now i'm using pretty urls so it becomes:
<a href="projects/touch/">link</a>

Of course, my js  could append the link with more "fake" folders instead of 
variables :
<a href="projects/touch/open/1">link </a>

But that's very impratical, as it gets too hard to know what value goes for 
which variable because i have many  of those UI -related variables.

so i'm left to decide how to repair my javascript logic so that those UI 
related variables can be controled just like before.

here is my code in case you need it, that worked with "ugly" urls:.

you can test the desired effect here _ try

http://m2.lab-au.com/metalab2.php
http://m2.lab-au.com/metalab2.php?section=projects&sortBy=time&dsAnchor=2007&item=pixflow2&menu=visuals


UI.refresh = function(querystring){
        switch (typeof querystring) {
            case 'string':
                $.log('param is a string');
                var newSection = getValue(querystring, 'section');
                var newSortBy = getValue(querystring, 'sortBy');
                var newDsAnchor = getValue(querystring, 'dsAnchor');
                var newItem = getValue(querystring, 'item');
                var newMenu = getValue(querystring, 'menu');
                var newContent = getValue(querystring, 'content');
                break;
            case 'undefined':
                break;
        }
        // 1. compare current and new values. Store needed changes in a 
queueArray;
        var queueArray = new Array();

        if (newSection != '' && newSection != undefined && UI.section != 
newSection) {
            UI.section = newSection;
            queueArray.push('section');
        }
        if (newSortBy != '' && newSortBy != undefined && UI.sortBy != 
newSortBy) {
            UI.sortBy = newSortBy;
            queueArray.push('sortBy');
        }

        if (newDsAnchor != '' && newDsAnchor != undefined && UI.dsAnchor != 
newDsAnchor) {
            UI.dsAnchor = newDsAnchor;
            queueArray.push('dsAnchor');
        }
        if (newItem != '' && newItem != undefined && UI.item != newItem) {
            UI.item = newItem;
            queueArray.push('item');
        }
        if (newMenu != '' && newMenu != undefined && UI.menu != newMenu) {
            UI.menu = newMenu;
            queueArray.push('menu');
        }
        if (newContent != '' && newContent != undefined && UI.content != 
newContent) {
            UI.content = newContent;
            queueArray.push('content');
        }
        for (i = 0; i < queueArray.length; i++) {
            switch (queueArray[i]) {
                case 'section':
                // move section
                break;
                case 'sortBy':
                // move sortBy
                break;
                // etc....
                 }
             }
   }




    // CENTER THE INTERFACE ON START
    var $URL = String(window.location);
    $URL = ($URL.lastIndexOf("#") > -1) ? $URL.slice(0, $URL.lastIndexOf("#")) 
: $URL;
    var $URL = $URL.split('?');
    $query = $URL[1];
    $URL = $URL[0];
    UI.refresh($query);



    I thank you most sincerely for reading that far and i hope you can help...

Alexandre