How do I get my data to display based on URL data?

Question

I'm trying to get some dynamic content to display based on UTMs in my URL. While I can call the function in the browser to get the content to display, it isn't doing so on page load. (Function works, but my timing must be off)

I've tried to change the order in which I call jQuery and my JS file, but either way it doesn't show unless I paste my function into chrome dev tools.

Here's the relevant part of the function:

// regex to find the URL param above
var dynamicContent = getParameterByName('dc');

 $(document).ready(function() {

    if (dynamicContent == 'fintech') {
        $('#fintech').show();
    } 
    else if (dynamicContent == 'martech') {
        $('#martech').show();
    } 
//... excluded remaining options
    else {
        $('#default-content').show();
    }

And the HTML:

<span id="default-content" class="dynamic-content">Tech</span>
<span id="fintech" class="dynamic-content">Fintech</span>
<span id="martech" class="dynamic-content">Martech</span>
<!-- excluded remaining options -->

And here's my header in case there's a different way I should be calling everything:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="assets/dynamic.js" type="text/javascript"></script>
</head>

Again, as copying/pasting my code into dev tools after the page load works, how do I time it so that this function runs on page load?

Thanks.

this seems to be about implementation of `getParameterByName`, which one are you using, Does it require jQuery or any other plugin? — Okan Kocyigit, May 02 '19 at 18:37
`getParameterByName` is the function that searches the URL do the string I want (`dc`) — James, May 02 '19 at 18:39
I understand what `getParameterByName` does but is that a pure javascript function? There are lots of implementation of that function. https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript — Okan Kocyigit, May 02 '19 at 18:43

score 0 · Answer 1 · answered May 02 '19 at 18:35

Maybe try this:

$(window).on('load', function () {
    var dynamicContent = getParameterByName('dc');

    if (dynamicContent == 'fintech') {
        $('#fintech').show();
    }
    else if (dynamicContent == 'martech') {
        $('#martech').show();
    }
    //... excluded remaining options
    else {
        $('#default-content').show();
    }
});

How do I get my data to display based on URL data?

1 Answers1