jQuery-Plugin – getUrlParam (version 2)

Some time ago, I have written a small jQuery plugin to easily get GET-Variables. The plugin is used by a lot of people. But it doesn’t satisfy all possibilities, you need.

Today, I have rewritten the plugin. It is now able to:

  • Parse GET parameters of the document
    $(document).getUrlParam(„param1″);
  • Parse image or JavaScript links with the help of the ID
    $(„#javaScriptFile1″).getUrlParam(„ajaxUrl“);

The last method helps you to clearly separate html/php and JavaScript. I need it, because my php script is generating a special value. Now, I want to use this value in JavaScript, but I don’t want to write the value to my html-page (clear unobtrusive JavaScript). So I include the JavaScript file like this:

<script type=“text/javascript“
src=“/myScript.js?ajaxUrl=getAutocompleteList.php“
id=“javaScriptFile1″></script>

With this plugin, it is very easy to get the value of param ajaxUrl.

Have fun! Here is the source.

[Update]
The plugin is now able to handle href attributes, too. It checks now

  • if you want a document parameter
  • or there is a src attribute
  • or there is a href attribute
  • else it returns null

111 Kommentare zu “jQuery-Plugin – getUrlParam (version 2)

  1. Hallo Peter,

    meine Lieblings-Referenz findest du unter Visual jQuery. Um auf den Klick zu reagieren brauchst du:

    
    $('#deinLinkID').click(function() {...});
    

    Und um Daten von einer URL zu holen z.B.

    
    $.get(...);
    

    Zum setzen eines Conainer-Inhalts

    
    $('#deinContainer').html(htmlCode);
    

    Falls du weitere Unterstützung brauchst, kann ich dir die deutsche Community Strohhalm.org – Community for Webworkers empfehlen, da sind auch ein paar jQuery-Benutzer dabei.

    Gruß

    Mathias

  2. Hi Mathias,
    I’m rather new at Javascript and jQuery. I was wondering if you could awnser my question.

    Im Using this script.

    function mycarousel_itemFirstInCallback(carousel, item, idx, state)
    {
    if (state == ‚init‘)
    carousel.scroll(1, false);
    };

    As you can see i’m using jCarousel. The number in this string carousel.scroll(1, false);
    is the id of a slide in the carousel. If I click on a link somewhere then I send this id with the link.
    For example:

    index.php?id=2

    How do I get the id that I send into this carousel.scroll(MY ID, false);
    I’m sorry Im a bit of a noob at javascript. I hope you can help me!

    Greetz Tim

  3. Hi Mathias,

    Thanks for the quick reply!
    I understand the way you explain it, but how do I integrate it into the code…

    This is what I have:

    if (state == ‚init‘)
    carousel.scroll(1, false);

    Does it become this?

    id = $(‚#myLink‘).getUrlParam(„id“);

    if (state == ‚init‘)
    carousel.scroll(‚ + id + ‚, false);

    Thanks man!
    Tim

  4. Hi,

    I tried to compress your plug-in using the same site jquery uses (url –> dean.edwards.name/packer/) and found that your plug-in is missing a couple of semi-colons.

    Thus I’ve modified two lines…

    before:
    var strHref = $(this).attr(„src“)
    after:
    var strHref = $(this).attr(„src“);

    before:
    var strHref = $(this).attr(„href“)
    after:
    var strHref = $(this).attr(„href“);

    Now it works compacted.

  5. Hello,

    1- I find getParam() returning a string or an array of strings depending on the input URL a bit inconvenient, the caller has to expect boths. What about always returning arrays (empty, with a single value or with multiple values) ? or have another version returning only null or a string, taking the first occurence of the given parameter ?

    2- What about decoding the values ? Do we really want to get „foo%20bar“ instead of „foo bar“ ? Can we at least make that an optional parameter ?

    Thanks for this plugin !

  6. a little bit changed to support getting the params of a child frame. for use with iframes .

    //frm is the frame for which you want to examine the params
    getUrlParam: function(strParamName, frm){
    strParamName = escape(unescape(strParamName));

    var returnVal = new Array();
    var qString = null;

    if ($(this).attr(„nodeName“)==“#document“) {
    //document-handler

    var loca;
    if(frm){
    loca = frm.location;
    }else{
    loca = window.location;
    }

    if (loca.search.search(strParamName) > -1 ){

    qString = loca.search.substr(1,window.location.search.length).split(„&“);
    }

  7. Hallo Matthias,

    bin gerade auf dein Plugin gestossen. Vielen Dank für die Veröffentlichung!

    Anbei eine kürzere Implementierung Deiner Funktion. Wenn Du sie gut findest, kannst Du vielleicht Teile übernehmen, bevor es noch eine weiteres Plugin gibt :)

    Die Funktion basiert auf einem Kommentar von Eli zu deiner ersten Version, dessen Code bei mir jedoch nicht funktionierte. Aus Performancegründen wird der querystring übergeben und nicht über Selektoren nach #document, src oder href gesucht.

    BTW, was bewirkt die Anweisung strParamName = escape(unescape(strParamName)); in Deinem Plugin?
    Heben sich escape und unescape nicht auf?

    $.getUrlParam = function(paramname, querystr){

    querystr = (querystr == undefined) ? window.location.search : querystr;
    // regexp escape paramname
    paramname = paramname.replace(/\\|\^|\$|\*|\+|\?|\.|\(|\)|\[|\]/g, „\\$&“);
    // build regexp
    var pattern = new RegExp(„(.*)(“ + paramname + „=)([^&#]*)(.*)“,“i“);
    var result = pattern.exec(querystr)
    if(result == null) {
    // param not found – returns null to distinguish if the param contains no value and therefore returns an empty string
    return null;
    } else {
    return unescape(result[3]);
    }
    } // end function getUrlParam

  8. Hi,
    Thats g8. But I have a script like this „“

    If any one paste this code to his or her website then some server information will be loaded on that website from me. But problem is i want to catch param value ‚com_id‘ from my script. I used the getUrlParam plugin on the same js file ‚widget_job_board.js‘ but an error occurs like this „$(„#script1″) has no properties“ . Would u like to help me Mathias.

  9. This is a useful function, but I note that it doesn’t urldecode parameters, so I need to do an extra step every time I want to process a parameter.

    Adding urldecoding to getUrlParam would be a breaking change, but it would be nice to add a function that has urlencode built in… Otherwise (i) I have to write it, and (ii) newbs are going to write programs that get confused about „+“ and space.

  10. Hi… I’m using your great code for validation routines in a web application. I did a little change to your code for support non english characters (our system are in spanish), using unescape function.

    (lines 60-65)

    for (var i=0;i<qString.length; i++){
    if (escape(unescape(qString[i].split(„=“)[0])) == strParamName){
    returnVal.push(unescape(qString[i].split(„=“)[1]));
    }
    }

    Great work

  11. I’ve made some changes to the getUrlParam script, it still works in the same way but you can now query more than one element at a time:

    jQuery.fn.extend({
    getUrlParam: function(strParamName){
    strParamName = escape(unescape(strParamName));
    var returnVal = new Array();
    this.each(

    function()
    {
    var strHref = $(this).attr(„src“)|| $(this).attr(„href“)|| this.URL||““;
    var qString = „“;

    if ( strHref.search(„#|\\?“) > -1 ){
    var strQueryString = strHref.substr(strHref.search(„#|\\?“)+1);
    qString = strQueryString.split(„&“);
    }

    for (var i=0;i<qString.length; i++){
    if (escape(unescape(qString[i].split(„=“)[0])) == strParamName){
    returnVal.push(qString[i].split(„=“)[1]);
    }
    }
    }
    );

    if (returnVal.length==0) return null;
    else if (returnVal.length==1) return returnVal[0];
    else return returnVal;
    }
    });

  12. Hi Mathias,
    erst einmal: nettes Plugin. Hat mir sehr geholfen. Leider bin ich auf ein Problem gestoßen, wozu mir gerade keine Lösung einfällt. Wie greife ich denn auf sowas hier zu:

    alert($(document).getUrlParam(‚tx_mytestshop_pi1[catId]‘));

    Hintergrund: TYPO3-Extensions erzeugen immer solche Parameterarrays in den URLs. Ich müsste auf den Wert von catId zugreifen…

  13. I love this extension, thanks for posting it,

    I did however run into an issue, when I used it on an „a“ tag, it always bombed because it did not pass over the „src“ attr check.

    I was able to fix this by changing the lines

    } else if ($(this).attr(„src“) != „undefined“) {
    } else if ($(this).attr(„href“) != „undefined“) {

    to

    } else if (typeof $(this).attr(„src“) != „undefined“) {
    } else if (typeof $(this).attr(„href“) != „undefined“) {

    … though, I was only using FF3 for the Mac.

  14. Zuerst einmal: Schönes PlugIn! Mir stellt sich allerdings ein Problem (ich denke ziemlich einfach zu lösen, oder einfach mit diesem PlugIn nicht möglich):

    Ich entwickle eine Seite, die Inhalte mittels AJAX lädt (sprich: FrontEnd besteht aus Navigation und Header und das BackEnd lädt je nach übermittelten GET-Parametern Inhalte dynamisch nach – natürlich angestoßen durch JavaScripts). Da das DOM natürlich schon beim Laden des FrontEnds „ready“ ist, muss ich manche JavaScripts im BackEnd „nachladen“ (nach der Ausgabe, damit sichergestellt ist, dass alles im DOM steht). Hier lade ich auch ein Skript nach, dass dieses PlugIn verwenden soll (und das PlugIn zuvor selbst). Wenn ich nun versuche GET-Parameter auszulesen bekomme ich immer null zurück. Ich denke das liegt daran, dass dieses PlugIn versucht die Parameter vom FrontEnd zu bekommen, nicht jedoch vom BackEnd. Ich bräuchte also eine explizite Möglichkeit auf die GET-Parameter eines bestimmten PHP-Skriptes zuzugreifen (in meinem Fall: „loader.php“).

  15. @teh_han: Verstehe ehrlich gesagt das Problem nicht: du schickt an den Server eine Anfrage mit GET-Parameter und willst die dann mit diesem Plugin auf dem Client auslesen? Dann weißt du doch die Anfrage schon. Müsste ich mal sehen, was du meinst. Oder verwechselst du jetzt serverseitige Programmierung mit clientseitiger?

    Für jQuery kann ich dir http://www.strohhalm.org empfehlen. Da sind ein paar (ich inkl.), die sich mit jQuery auskennen und dir sicherlich – auch mit diesem Plugin – helfen können.

  16. Hi had problems with your scripts for some reasons, this is what for me :

    -replaced : all „$“ by „jQuery“

    -replaced :

    } else if (jQuery(this).attr(„src“)!=“undefined“) {

    by

    } else if (jQuery(this).attr(„src“)) {

    -replaced :

    } else if (jQuery(this).attr(„href“)!=“undefined“) {

    by :

    } else if (jQuery(this).attr(„href“)) {

  17. You are not handling parameters with „=“ well:

    Instead of:

    for (var i=0;i<qString.length; i++){
    if (escape(unescape(qString[i].split(„=“)[0])) == strParamName){
    returnVal.push(qString[i].split(„=“)[1]);
    }

    }

    You should:

    for (var i = 0; i = 0) &&
    (escape(unescape(qString[i].substr(0, index))) == strParamName)) {
    returnVal.push(qString[i].substr(index + 1));
    }
    }

  18. I’ve got some improvements to have those parameters case insensitive, because php does not use case sensitive url params.

    -strParamName = escape(unescape(strParamName));
    +strParamName = escape(unescape(strParamName)).toLowerCase();

    -if (window.location.search.search(strParamName) > -1 ){
    -qString = window.location.search.substr(1,window.location.search.length).split(„&“);
    +if (window.location.search.toLowerCase().search(strParamName) > -1 ){
    +qString = window.location.search.toLowerCase().substr(1,window.location.search.length).split(„&“);

  19. Hi! Great plugin!

    I have hrefs that end with an anchor (i.e. href=“?param1=value&param2=value2#anchorName“)

    Currently, if I ask for param2, i get ‚value2#anchorName‘. To fix this, instead of using

    returnVal.push(qString[i].split(„=“)[1]);

    you could strip the trailing anchor name:

    var paramValue = qString[i].split(„=“)[1];
    returnVal.push(paramValue.substr(0, paramValue.indexOf(„#“)));

    also, chekcing for „undefined“ as a string doesn’t work:
    if ($(this).attr(„src“) != „undefined“)
    if ($(this).attr(„href“) != „undefined“)
    you need to remove the quotes from ‚undefined':
    if ($(this).attr(„src“) != undefined)
    if ($(this).attr(„href“) != undefined)

  20. Hi Mathias,

    Super Seite wirklich spitze und ich hab andscheinend wirklich auch noch das Plugin gefunden was ich brauch/te… 😉 *happy*

    Aber hätte da noch eine Frage… Wie ist es möglich aus der URL nur den letzten verweiß rauszufiltern, nach „/“
    mal beispiel damit Du weißt was ich meine…
    z.b.
    http://www.mathias-bank.de/2007/04/21/— AB HIER>jquery-plugin-geturlparam-version-2/

    ich hab es bis jetzt so gelöst das ich immer die ganze URL abgefragt habe mit document.URL das ist aber irgendwie nicht „richtig“ funktioniert aber bei manchen browsern 😉

    Bin da totaler Anfänger und würde mich über hilfe freuen…

    Mit freundlichem Gruß

    Christoph

  21. Further to the issue if I comment out the following section of code the problem goes away:

    } else if ($(this).attr(„src“)!=“undefined“) {

    var strHref = $(this).attr(„src“)
    if ( strHref.indexOf(„?“) > -1 ){
    var strQueryString = strHref.substr(strHref.indexOf(„?“)+1);
    qString = strQueryString.split(„&“);
    }

    Because I am extracting a href value this means my code works now

  22. Looks like jQuery 1.6 isn’t compatible with your script. I changed

    if ($(this).nodeName == „#document“)

    to :

    if ($(this).get(0).nodeName == „#document“)

    and returned the code to working order on modern browsers. jQuery no longer works around document.attr calls, since content attributes aren’d supported on the document element.

  23. if you have a param like &keyword[]=’foo’&keyword[]=’bar‘ for example in a rails app, your script can’t handle that.

    Changing the search line in #document to:

    if (escape(unescape(window.location.search)).search(strParamName) > -1 ){
    qString = window.location.search.substr(1,window.location.search.length).split(„&“);
    }

    will escape the special characters and find a match for:

    $(document).getUrlParam(„keywords[]“);

    => [‚foo‘, ‚bar‘]

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>