JQuery Mobile Query String Issue in non pushState browsers

I am trying to pull the variable cid out of the querystring in JQuery Mobile beta 3.

Example of Normal URL would be /category.php?cid=23

开发者_Python百科Example of JQuery Mobile URL /#/category.php?cid=23

I can pull the variable out of the querystring normally with the function below in most browsers, because of JQuery Mobile Beta 3's url rewriting. However IE does not support the new browser history functions. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Therefore I need a way to pull out the querystring from JQuery Mobile Url seen above and the following function I normally use below does not work properly for that.

function getQuerystring(key) {
   var re=new RegExp('(?:\\?|&)'+key+'=(.*?)(?=&|$)','gi');
   var r=[], m;
   while ((m=re.exec(document.location.search)) != null) r.push(m[1]);
   return r;
}

I am either looking for an alternative regex that could find the hashed variable in browsers that don't support history.pushState or some other solution entirely. I've searched in the documentation for a solution to this problem, but haven't found anything. I would think this would be a problem that would have been thought out and solved already by the JQuery Mobile Team, I am probably just missing something pretty obvious. Thanks in advance for any help.

Working Demo (I think)

• http://jsfiddle.net/phillpafford/VXV3R/

Related Link:

• How can I get query string values in JavaScript?

JS

$('#page2').live('pageshow', function(event, ui) {
    alert('Page 2 - CID: ' + getParameterByName('cid'));
});

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

HTML (adding rel="external" to the link)

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">
                Home Page
            </li>
            <li>
                <!-- 
                    Pass Parm Here before the hash page 
                    and treating link as external 
                -->
                <a href="?cid=1234#page2" rel="external">Page 2</a>
            </li>
        </ul>                
    </div>
</div>
<!-- page 2 -->
<div data-role="page" id="page2">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">
                Page 2
            </li>
            <li>
                <a href="?cid=4321#home">Home Page</a>
            </li>
        </ul>
    </div>
</div>

Okay here is a function that will take care of both situations no matter what browser you are on or even what way you are using JQuery Mobile. This code isn't perfect, I'm just happy it works at the moment. If and when I update the function I'll come back and update it here.

First the code looks to see if there is a hash. If there is it looks for a querystring in it just as if it was a url. If not it simply checks the url for the variable. This code works with checking a particular querystring variable no matter what state your checking it in JQuery Mobile. Weather it's pagecreate pageshow or in just about any other event, weather JQuery Mobile Beta 3 has rewritten the url via pushstate or not.

function getQuerystring(name) {
    var hash = document.location.hash;
    var match = "";
    if (hash != undefined && hash != null && hash != '') {
        match = RegExp('[?&]' + name + '=([^&]*)').exec(hash);
    }
    else {
        match = RegExp('[?&]' + name + '=([^&]*)').exec(document.location.search);
    }
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}