jquery how to load different scripts when i click on different links?

Question

i have a list:

<select name="test" id="test">
<option value="1">about</option>
<option value="2">portfolio</option>
</select>

what i am trying to do is to load a different script inside a div #content depending on what option i choose. The script will load some rss content:

<div id="content">      
<script id="1" type="text/javascript" src="http://rss.bloople.net/?url=http%3A%2F%2Fwww.exploretalent.com%2Frss_cj.php%3Fpid%3D3087968%26file_xml%3Dcastings_new.xml&showtitle=false&type=js&id=1307038796890991"></script>
<script id="2" type="text/javascript" src="http://rss.bloople.net/?url=http%3A%2F%2Fwww.exploretalent.com%2Frss_cj.php%3Fpid%3D3087968%26file_xml%3Dcastings_new.xml&showtitle=false&type=js&id=1307038796890991"></script>
</div>

lets say if i select option 1 then a script with id 1 will load into page, if i select option 2 than the script with id 1 will unload and 2 will load

any ideas? thanks

i think adding id to script is not a good idea. here is not mentioned that id is valid attribute for script — xkeshav
– xkeshav, Commented Jun 2, 2011 at 19:49

amit_g · Accepted Answer · 2011-06-02 20:06:23Z

1

You could use something like this

<select name="test" id="test">
    <option value=""></option>
    <option value="1">about</option>
    <option value="2">portfolio</option>
</select>

<div id="feed-1307038796890991"></div>

and the js

$(function(){
    var urls = [
        "http://rss.bloople.net/?url=http%3A%2F%2Fwww.exploretalent.com%2Frss_cj.php%3Fpid%3D3087968%26file_xml%3Dcastings_new.xml&showtitle=false&type=js&id=1307038796890991",
        "http://rss.bloople.net/?url=http%3A%2F%2Fwww.exploretalent.com%2Frss_cj.php%3Fpid%3D3087968%26file_xml%3Dcastings_new.xml&showtitle=false&type=js&id=1307038796890991"
        ];

    $("#test").change(function(){
        if ($(this).val() != ""){
            $.getScript(urls[$(this).val() - 1]);
        }
    })
})

Demo

edited Jun 2, 2011 at 20:06

answered Jun 2, 2011 at 20:00

amit_g

31.3k8 gold badges67 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brett · Accepted Answer · 2011-06-02 19:44:57Z

0

You could add a jQuery .click() event to the option elements, and have that click event call a jQuery .load() event.

It might look something like:

$('test').children()[0].click(function() {
  $('#resultDiv').load('yourLink.html');
});

answered Jun 2, 2011 at 19:44

Brett

4,0612 gold badges28 silver badges39 bronze badges

1 Comment

Patrioticcow Over a year ago

well, my only problem is that i will have 50 <script id="...">. and i don't want to create 50 html pages

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

u Must see below dynamic javascript loader js library

headjs

OR

labjs

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 2, 2011 at 19:55

xkeshav

54.2k47 gold badges183 silver badges255 bronze badges

Collectives™ on Stack Overflow

jquery how to load different scripts when i click on different links?

3 Answers 3

Comments

1 Comment

headjs

labjs

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related