Loading...

Search jQuery

Search

jQuery Forum

Do something different based on multiple different URL parameters

in Using jQuery • 6 months ago

I have the following script started and need to trigger certain modals to open on page load, based on the URL string. For example, if 'src' is equal to '123', then modalBuyer needs to appear. If 'src' is equal to '234', then modalSeller needs to appear. Here's what I have so far. This was created back when there was only one modal that ever needed to be shown on page load.

if (window.location.href.indexOf('src=') > 0) {
$(window).on('load',function(){
$('#cModal').modal('show');
});
}

I was considering doing something like this, but was curious if there might be a better way:

var src= (new URL(location)).searchParams.get('src')
var SRC_LOOKUP = {
123: "modalBuyer",
234: "modalSeller",
}

1

Replies(9)

jakecigar

Re: Do something different based on multiple different URL parameters

6 months ago

That’s the best way.

JΛ̊KE

Re: Do something different based on multiple different URL parameters

6 months ago

I've got the correct modals opening based on the 'offer' value in the URL. However, I'm puzzled as to why this line is triggering an alert with [object Object].

alert(modalId)

$( document ).ready(function() {
var src= (new URL(location)).searchParams.get('src')
console.log('Offer var = ' + src)
var SRC_LOOKUP = {
b123:{
modal: "#modalBuyer",
idAttr: "modalBuyer",
name: "modalBuyer"
},
f234: {
modal: "#modalSeller",
idAttr: "modalSeller",
name: "modalSeller"
},
}
var modalId = $(SRC_LOOKUP[src].modal);
alert(modalId)
if(src != '')
{
console.log('Offer is detected in URL');
alert("Offer is present in the URL");
$(modalId).modal('show');
}
});

jakecigar

Re: Do something different based on multiple different URL parameters

6 months ago

alert($( "#modalBuyer" )); would only display [object Object]. It’s a jQuery, not something that could be converted to a string.

Don’t use alert. Use console.log.

JΛ̊KE

Re: Do something different based on multiple different URL parameters

6 months ago

IE disappoints again. I just realized the following doesn't work in IE11.

var src = (new URL(location)).searchParams.get('source')
console.log('source var = ' + src)
var SOURCE_LOOKUP = {
b123: "#modalBuyer",
s234: "#modalSeller",
w398" "#modalWholesale"
}
var modalId = $(source_LOOKUP[src]);
if(src != '')
{
$(modalId).modal('show');
if(src == 'b123')
{
$('html, body').animate({
scrollTop: $('#offers').offset().top
}, 'slow');
}
}

jakecigar

Re: Re: Do something different based on multiple different URL parameters

6 months ago

It doesn’t work in very many discontinued/unsupported browsers.

JΛ̊KE

Re: Do something different based on multiple different URL parameters

6 months ago

Sadly it's a very important browser to our company.

jakecigar

Re: Do something different based on multiple different URL parameters

6 months ago

Don’t ask for the better code.

Ask for crap that works in IE. You would save everyone time.

Use a regular expression to get the src from location.search instead of the clean code with new URL.

JΛ̊KE

Re: Do something different based on multiple different URL parameters

6 months ago

When I asked the original question, I wasn't anticipating an issue with IE.

jakecigar

Re: Re: Do something different based on multiple different URL parameters

6 months ago

You will always have problems with IE whenever you ask plain javaScript questions here.

If you ask a jQuery question, and mention that it’s for IE, you might get a usable answer.

jQuery does not parse searchParams. You need to do it yourself with new URL or regular expressions or some other found code.

I know I wrote that exact code many years ago on this forum. You can search for it, or search the internet.

JΛ̊KE