5

I'm using a PHP framework Codeigniter that uses segment based urls like http://www.mydomain.com/age/11/name/john/color/red instead of the usual querystrings lijke http://www.mydomain.com/index.php?age=11&name=john&color=red.

How do I grab the value of the age key from the url using Javascript/jQuery?

After grabbing the value 11 I will pass it into a jQuery object when an event is fired.

$( "#searchdistance_slider" ).slider({
        range: "min",
        value: 5,
        min: 0.5,
        max: 10,
        slide: function( event, ui ) {
            $( "#search_distance" ).val(ui.value + " miles");
            window.location.replace("http://www.domain.com/" + age); 
            /* passing the value of age into URL to redirect to */
        }
    });

UPDATE

  • The key/value pairs can change position, and the number of key/value pairs in the URL are not fixed
  • I need to grab the value within Javascript because the user uses a slider to change a particular value, say the age, and the new value 20 from the slider will be use to redirect the user to http://www.mydomain.com/age/20/name/john/color/red
Improve this question

4 Answers 4

Reset to default
3

You could try using the jQuery URL parser plugin.

Use the .segment(n) call to search the URL path for "age", and grab the next one which should contain the age value you're looking for.

Or try the .fsegment(n) method if age is always in the same position.

Or use .segment() with something like:

var parts = $.url(your_url).segment();
var params = [];
for (var i=0; i<parts.length/2; i++) {
   params[parts[2*i]] = parts[2*i+1];
}
var age = parseInt(params['age']);

(I'm sure there's a prettier way to do that though.)

If you only want the age part, you don't have to do all that stuffing into a dictionary. Just exit the loop early when you've found the key you want.

If you want to reconstruct the path with a changed age, try something like:

var parts = $.url(your_url).segment();
var newpath = '';
for (var i=0; i<parts.length/2; i++) {
  if (parts[2*i] == 'age') {
    newpath += '/age/' + (parseInt(parts[2*i+1]) + 42); // put your age modifiy
                                                        // code here
  } else {
    newpath += '/' + parts[2*i] + '/' + parts[2*i+1];
  }
}
alert(newpath);
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

the position of the key/value pair in the url segments changes, so I think its hard to target a particular key/value pair easily using the plugin from what I can see
Not really. .segment() returns an array of all the path fragments. Just hash that if you need key-based lookup (I'll post an example).
great.. do you know of a quick way to reconstruct the entire url after updating params['age']? I'm thinking along the lines of using a similar for loop to the one used to hash the array, but with newurl += newurl + "/" + parts[2*i] + "/" + parts[2*i+1] occurring with each iteration
updated. Note that the new path does not contain the scheme + domain name, you'll need to add that yourself.
1

You could split it with something like this:

var parts = {},
    bits = location.pathname.substr(1).split('/'); // get rid of first / and split on slashes

for (var i = 0; i<bits.length; i += 2) {
    parts[bits[i]] = bits[i+1];
}

You could then access the age value with parts.age.

Improve this answer

1 Comment

Sounds like this will work. I have updated my question. How do I update the value of age with a new value, then pass the url with the new value of age to window.location.replace()?
0

before your code is run, add the following to your php script:

<?php
$getAgre = ( isset($_GET['age']) && strlen($_GET['age'])>0 )? $_GET['age'] : 'null';
echo '<script>var age = '. $getAge .';</script>';
?>

edit: make sure you have some security checking before displaying the content of $_GET['age'] and your JS would be better when your event in .slider() checked whether variable get exists

Improve this answer

Comments

0

You could use window.location.href variable which would give you the whole current url, and then play with the string a bit to get the desired information. Substring, split, even regex.

This would work:

var ageMatch= window.location.href.match(/age\/([\d]*)/);
var age= ageMatch[1];

Just for the record, you can also update the url just as easily:

var newUrl= window.location.href.replace(/age\/([\d]*)/, age);
window.location.href= newUrl;
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.