Replace HTML based on query string?

Question

I've been looking at this SO Post in an effort to understand processing query strings. It's been great to see all of the responses. What I'm trying to understand, is how to take this one step further where the supplied query string actually replaces an object in the DOM, such as a specific DIV, and replaces it with another DIV (which could be hidden out of the gate), or just replaces content within the DIV.

There are a few resources I've looked at around the web, but nothing that I can get tested up in jsfiddle to work right. Another post here sort of eludes to this.

The goal

Have a simple page show a single DIV within the body. When loading the page, the DIV and content is displayed. When loading the page with a ?q=whatever, the content within that DIV is replaced with other content.

MY SOLUTION

In order to have a DIV dissapea, which was the first issue to resolve, based on a querystring coming through, I implemented this on my page:

if (strrpos($_SERVER['REQUEST_URI'], '/landingpage/index.php?q=1') === strlen($_SERVER['REQUEST_URI']) - strlen('/landingpage/index.php?q=1')) {
    $style = "display: none";
}
else {
    $style = "display: inline";
}

I then place this in my DIV:

<div id="theForm" style="<?php echo $style; ?>">
    //Form code here
</div>

This got me to at least have the DIV clear out if the query string was present.

Next step, was to not really clear it out, but replace it with some content.

I added the following into my original PHP:

$thankYou = "<h1>Thank You for signing up</h1>";

Under the first if, and changed the else to an elseif to capture the non query string code, with potentially some more cases down the road.

So the final PHP code looks like this:

if (strrpos($_SERVER['REQUEST_URI'], '/landingpage/index.php?q=1') === strlen($_SERVER['REQUEST_URI']) - strlen('/landingpage/index.php?q=1')) {
    $style = "display: none";
    $thankYou = "<h1>Thank You for signing up</h1>";
}
elseif (strrpos($_SERVER['REQUEST_URI'], '/landingpage/index.php') === strlen($_SERVER['REQUEST_URI']) - strlen('/landingpage/index.php')) {
    $style = "display: inline";
    $thankYou = "";
}

Then it's just a matter of adding in the PHP echo out of the $thankYou variable right before the DIV that will be shown or hidden, and that did it for me.

In programming it is a good idea to split the task to small subtasks and solve them separately. So split this issue to smaller and ask **one particular question** so that it wouldn't look like "I have a task - do it for me" — zerkms, Jul 11 '12 at 00:02
@zerkms I felt this was really a single question, which is how do I replace content based on the query string, but if you felt it was more of a task, then forgive me, that's not my intent. — stebesplace, Jul 11 '12 at 00:10
@JamesPoulson I see the innerHTML could be a way to add in some data as a means of replacement. The last answer there might shed some light. — stebesplace, Jul 11 '12 at 00:11

Brian Adkins · Accepted Answer · 2012-07-11T00:18:16.357

3

Here's a working example that may help you

http://www.fridgefilters.com/refrigerator-ice-and-water-filter-ukf8001.html?cust-title=welcome+stack+overflow

See JavaScript for details

on main page:

<script>writeCustomHeader('cust-title','customHeader')</script>

in the attached file mss.js:

function returnQueryValue(match) {
    var query = location.search.substr(1);
    var pairs = query.split("&");
    for(i=0;i<pairs.length;i++){
        var name = pairs[i].split("=")[0];
        var val = pairs[i].split("=")[1];
        if(name==match){
            val = unescape(val.replace(/\+/g, " "));
            return val;
        }
    }
}

function writeCustomHeader(match,id) {
    var newHeader=returnQueryValue(match);
    if(!newHeader)return;
    var id = document.getElementById(id);
    var h1 = document.getElementsByTagName('h1')[0];
    if(newHeader.length>0 && id && id!='undefined'){
        id.innerHTML=newHeader
        h1.className=h1.className+" small";
        document.getElementById('customHeader').className="block";
    }
}

edited Jul 11 '12 at 00:18

answered Jul 11 '12 at 00:04

Brian Adkins

657
2
6
13

1

Hmm, hope that isn't disguised advertizing ;) – James P. Jul 11 '12 at 00:06
JavaScript? What javascript? There are tens of scripts on that site; which one does this?(assuming it's not php, which I suspect it is). – Daedalus Jul 11 '12 at 00:08
Some work you've been involved in then I'd assume. If the script is in an outside file you could maybe link to it. – James P. Jul 11 '12 at 00:11
@BrianAdkins I see in one of their JS files, some code that handles the write CustomHeader, which by the looks of things, might be right up my ally if I can connect the dots. Doing some testing now. – stebesplace Jul 11 '12 at 00:16
2

I found the code and added to my answer above (*think* I got the important parts). Note this is "old-school" JS... and could probably be made easier with jQuery – Brian Adkins Jul 11 '12 at 00:18
@BrianAdkins I've implemented the above that I pulled out, and it works out of the box, so to speak. I can at least pass that QS in, and it's rendering. Doing some more testing here. There's some things missing to at least get this working, such as the addition of the span ID for customHeader, which I couldn't get working without modifying the above function. – stebesplace Jul 11 '12 at 00:26
@BrianAdkins the solution you gave works, and certainly could be used by others coming to this page. I ended up going down a slightly different path more on the PHP side which I'm posting up in my original question for people to see. – stebesplace Jul 11 '12 at 01:04
@stebesplace. That's why we're all here... Thanks for making this page more valuable. – Brian Adkins Jul 11 '12 at 01:08