Syntax check - refresh div content using JavaScript and query string-CodePudding

I don't know how to write my own JavaScript from scratch, but I think I am close to what I need with these two snippets of code.

When I click anywhere on a certain page, I want the contents of a specific div to change depending on the query string present in the URL.

I have some code which achieves this, but in this format, it only works of the entire page gets refreshed.

Here is the working code which I have tested:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    // Parse the URL parameter
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]"   name   "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\ /g, " "));
    }
    // Give the parameter a variable name
    var dynamicContent = getParameterByName('dc');

     $(document).ready(function() {

        // Check if the URL parameter is apples
        if (dynamicContent == 'apples') {
            $('#apples').show();
        } 
        // Check if the URL parameter is oranges
        else if (dynamicContent == 'oranges') {
            $('#oranges').show();
        } 
        // Check if the URL parameter is bananas
        else if (dynamicContent == 'bananas') {
            $('#bananas').show();
        } 
        // Check if the URL parmeter is empty or not defined, display default content
        else {
            $('#default-content').show();
        }
    });
</script>

The problem is, I am using a filter system which alters the URL with a query string without refreshing the page, so the code above is not triggered.

From my understanding, I think I need to incorporate a mousedown event, e.g.

document.addEventListener("mousedown", function(){
  console.log("You did it!");
});

I'm wondering how I can incorporate the mousedown event to run the code above when a user clicks anywhere on the page. I don't know how to write the correct syntax for this.

I'm also wondering if I can be more specific with the mousedown event, for example can I trigger the code if a specific element is clicked (or checked), such as: input[type=checkbox]

Thanks in advance for any advice or help you can give.

CodePudding user response：

If the mousedown event is enough for you you can simply:

move what you used to do on pageload under a new function. In the code below, I've created the parseDynamicContent() which simply includes all the code
call the function when the page loads
call the same function whenever anything triggers the mousedown event

Here's the revised code.

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]"   name   "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\ /g, " "));
}

function parseDynamicContent() {
    // Give the parameter a variable name
    var dynamicContent = getParameterByName('dc');
    // Check if the URL parameter is apples
    if (dynamicContent == 'apples') {
        $('#apples').show();
    }
    // Check if the URL parameter is oranges
    else if (dynamicContent == 'oranges') {
        $('#oranges').show();
    }
    // Check if the URL parameter is bananas
    else if (dynamicContent == 'bananas') {
        $('#bananas').show();
    }
    // Check if the URL parmeter is empty or not defined, display default content
    else {
        $('#default-content').show();
    }
}


$(document).ready(function () {
    parseDynamicContent()

});
document.addEventListener("mousedown", function () {
    parseDynamicContent()
});

CodePudding user response：

Many thanks for your help and answer. It has gotten me closer to the functionality I am looking for. I think other complexities in the page structure/ filter system are changing the behaviour slightly.

What I am looking to refine:

A single click in a filter checkbox doesn't populate the dynamic content - it currently requires two clicks.
The CSS below no longer hides the content which isn't relevant to the current query string, content should be hidden if the corresponding checkbox isn't ticked (according to the query string)

I will post a link to the test page I am using: Filter Test Page

Here is the JavaScript you supplied (slightly modified with different IDs):

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]"   name   "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\ /g, " "));
}

function parseDynamicContent() {
    // Give the parameter a variable name
    var dynamicContent = getParameterByName('tex_project_category');
    // Check if the URL parameter is breast-positioning
    if (dynamicContent == 'breast-positioning') {
        $('#breast-positioning').show();
    } 
    // Check if the URL parameter is couchtops-overlays
    else if (dynamicContent == 'couchtops-overlays') {
        $('#couchtops-overlays').show();
    } 
    // Check if the URL parameter is fiducial-markers
    else if (dynamicContent == 'fiducial-markers') {
        $('#fiducial-markers').show();
    }
    // Check if the URL parameter is head-neck-positioning
    else if (dynamicContent == 'head-neck-positioning') {
        $('#head-neck-positioning').show();
    }
    // Check if the URL parmeter is empty or not defined, display default content
    else {
        $('#default-content').show();
    }
}

$(document).ready(function () {
    parseDynamicContent()

});
document.addEventListener("mousedown", function () {
    parseDynamicContent()
});
</script>

Here is the HTML I am using on the page:

<!-- Default Dynamic Section -->
<div id="default-content" >This is the default content and should be hidden if one of the search filters is ticked</div>
<!-- Dynamic Section 1 -->
<div id="breast-positioning" >
<h3>Breast Positioning</h3>
This content should only show if the Breast Positioning filter box is checked</div>
<!-- Dynamic Section 2 -->
<div id="couchtops-overlays" ><strong>Couchtops Overlays</strong>
This content should only show if the Couchtops Overlays filter box is checked</div>
<!-- Dynamic Section 3 -->
<div id="fiducial-markers" ><strong>Fiducial Markers</strong>
This content should only show if the Fiducial Markers filter box is checked</div>
<!-- Dynamic Section 4 -->
<div id="head-neck-positioning" ><strong>Head and Neck Positioning</strong>
This content should only show if the Head and Neck Positioning filter box is checked</div>

And finally the CSS:

    .dynamic-content {
    display:none;
}

Many thanks for your help!