Get script on option select with this value

Question

I am using a select box to pull some data that is built into the site. However there are a few modules that run a script , and using the select option , that script is not firing when its selected. Do i have to run the full script within my option function , or can it be called to execute again when its selected.

Here is my script and html. Option Value "MESSAGE12" - needs a script to run when selected.

if(unescape(location.href).indexOf("http://football")!=-1||unescape(location.href).indexOf("http://6")!=-1) { 
    var currentServer=baseURLDynamic;
    xmlBaseURL = baseURLDynamic + '/fflnetdynamic' + year + '/';
} else {
    var currentServer=baseURLStatic;
}
function getHomePageModule(thisSelection) {
    if(thisSelection=="")
    document.getElementById("homePageModule").innerHTML = "Your selected module will appear here!";
    else {
    var url = currentServer + "/" + year + "/home/" + league_id + "?MODULE=" + thisSelection.toUpperCase();
    $.get(url, function(data){
    document.getElementById("homePageModule").innerHTML = $(data).find('#pageContent').html();
    });
    }
}    


<select onchange="getHomePageModule(this.value)">
<option value="default">Select A Module</option>
<option value="MESSAGE12" >Get HPM#12</option>
<option value="LIVESCORING" >Link To Live Scoring</option>
<option value="LIVESCORING_SUMMARY" >Live Scoring Summary</option>
</select>

<div id="homePageModule">Your selected module will appear here!</div>

Here is a link to my demo select box - http://football29.myfantasyleague.com/2015/home/72758?MODULE=MESSAGE11

And a link to the MESSAGE12 content i'm wanting to fire up in the select box http://football29.myfantasyleague.com/2015/home/72758?MODULE=MESSAGE12

Any advice appreciated

Ugh, why the mix between `document.getElementByID` regular javascript and jQuery? You *have jQuery,* **use it.** — Draco18s no longer trusts SE, Jan 28 '16 at 21:23
i had a friend do this , i'm about clueless in javascript , if you can make it better , please share , would be much appreciated — MShack, Jan 28 '16 at 21:29
`$("#homePageModule")` would be the jQuery way of doing `document.getElementById("homePageModule")`. The [API](http://api.jquery.com) is very easy to understand, there are methods for everything and contain all kinds of examples. — Draco18s no longer trusts SE, Jan 28 '16 at 21:31

score 1 · Accepted Answer · edited May 23 '17 at 12:04

Instead of using innerHTML (which doesn't evaluate <scripts>), you could try using jQuery's .append() method.

Change:

document.getElementById("homePageModule").innerHTML = $(data).find('#pageContent').html();

to:

$("#homePageModule").append($(data).find('#pageContent').html());

(This also replaces the call to getElementById with a jQuery selector.)

If that doesn't work, you might need to take a look at the content returned by the call to $(data).find('#pageContent').html() and make sure your scripts are there, and/or move the scripts into a function that can be called after the .append() finishes.

Get script on option select with this value

1 Answers1