changing the value of src in script tag based on drop down select event: value

by: jasonsbytesPosted on 2007-06-26 at 07:05:29ID: 19363754

I don't know that you can change the src of a script tag using javascript...

by: jasonsbytesPosted on 2007-06-26 at 07:07:13ID: 19363772

I think your solution will be to include multiple script tags with all of the required js files included, then you can use whichever one you need.

by: ShimonYKPosted on 2007-06-26 at 07:34:04ID: 19364037

If the script runs in response to a user action, for example clicking a button or link, you could write the script to the page as an asp:literal control (http://www.w3schools.com/aspnet/control_literal.asp). Then you can set the text of the script programatically at run time.

<asp:Literal ID="Literal1" runat="server" Text="<script type='text/javascript' src='/shared/data/top3/Toronto.js'></script>" />

if the script needs to run on page load, you will need to use ClientScript.RegisterStartupScript method to write your script (http://msdn2.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.registerstartupscript(VS.80).aspx)

by: ThogekPosted on 2007-06-26 at 09:27:10ID: 19365390

Technically, you can reset the src property of a script element, although I'm not so sure that it always works (meaning that it actually triggers the load of the new src URL). E.g., you can give your script element an ID, like:

<script id="myScript" type="text/javascript" src="/shared/data/top3/Toronto.js"</script>

and then access it and change its src property just like you would for an image.

var scriptElem = document.getElementById("myScript");
scriptElem.src = 'someOther.js';

However, again, while you can do this, when I've tinkered with it, it hasn't always resulted in the new JS actually loading and being usable by the page.

Another option might be to place a block element, like a div, whose innards you can rewrite, like:

<div id="scriptPanel"></div>

and

var divElem = document.getElementById('scriptPanel');
divElem.innerHTML = '<script type="text/javascript" src="someOther.js"></script>';

I don't think I've actually tested that one much in terms of being able to reference functions defined in the someOther.js, but I have seen document.write statements in a JS file loaded this way work just fine (in fact a lot of Web advertising services deliver their ads in a manner similar to this).

Hope some of that helps...

by: shwaqar82Posted on 2007-06-26 at 11:43:25ID: 19366617

Error: 'scriptElem' is null or not an object
thats waht it gives me a messagewhen i implement ur first option...the 2nd option is not working at all..

Thanks for your help but ...can you help me fix this problem.
Best Regards
Shaukat Waqar

by: ThogekPosted on 2007-06-26 at 21:08:43ID: 19369646

Kinda hard to fix a problem I can't see. :-)
If you can post the code (HTML + JS) that you attempted and the exact errors that resulted, maybe I can help...

by: shwaqar82Posted on 2007-06-27 at 05:56:26ID: 19371738

thats the prob. i even cant see what is the error ...but anyways i can give u the code and im sure that u can figure it out whats the error and how to fix it ..

<%@ Page language="VB" Inherits="SOV.CommonTemplate" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<asp:Literal id="metaTitle" Visible="False" Text="Gateway Cities" runat="server"/>
<meta name="description" content="">
<meta name="keywords" content="">
<asp:PlaceHolder id="metaData" runat="server"/>
<link href="/includes/vas.css" rel="stylesheet" type="text/css">
<script type="text/JavaScript">

</script>
</head>
<body>
<asp:PlaceHolder id="pageHeader" runat="server" />
<div id="content">
<script id="myScript" type="text/javascript" src="/shared/data/top3/Toronto.js"</script>
<form name="city_selector" method="post" action="#">
</form>
</div>
<asp:PlaceHolder id="pageFooter" runat="server" />
</body>
</html>

and below is the code behined:
Imports Microsoft.VisualBasic
Imports System.Web.UI
Imports System.Web.UI.WebControls
Namespace SOV
Public Class Homepage
Inherits SOV.CommonTemplate

Private Sub Page_Load
End Sub
End Class
End Namespace

thanks for your great help

by: ShimonYKPosted on 2007-06-27 at 06:52:11ID: 19372218

Since this is an aspx page, use asp.net to do what it does well, rather than trying to fake it with javascript.

replace this part

<script id="myScript" type="text/javascript" src="/shared/data/top3/Toronto.js"</script>

with

<asp:Literal ID="Literal1" runat="server" Text="<script type='text/javascript' src='/shared/data/top3/Toronto.js'></script>" ></asp:literal>

Add
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
<asp:ListItem>Toronto</asp:ListItem>
<asp:ListItem>Ontario</asp:ListItem>
</asp:DropDownList>

for the dropdownlist event handler put this code

Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged
Select Case DropDownList1.SelectedItem.Text
Case "Toronto"
Literal1.Text = "<script type='text/javascript' src='/shared/data/top3/Toronto.js'></script>"
Case "Ontario"
Literal1.Text = "<script type='text/javascript' src='/shared/data/top3/Ontario.js'></script>"
End Select
End Sub

by: shwaqar82Posted on 2007-06-27 at 06:58:04ID: 19372273

Shimon
thanks for your great help ...my whole effort this time is to save the page go back to the server....if ur snippet works without AutoPostBack i will prefer to do it your way

Any suggestion.......?

by: ShimonYKPosted on 2007-06-27 at 07:00:59ID: 19372301

wont work without autopostback. If you want to actually do anything, you will have to post back to the server. You can however use an ajax update panel so only the dropdownlist and literal make the postback.

by: shwaqar82Posted on 2007-06-27 at 07:12:02ID: 19372392

if dats possible with ajax ..i need your help to implement dat way....im newbie in ajax

by: ShimonYKPosted on 2007-06-27 at 07:27:58ID: 19372545

first, install ajax on the web server:
http://ajax.asp.net/

then on the page, right after the form tag add
<asp:ScriptManager ID="ScriptManager1" runat="server" />

Then wrap this around the DDL and literal
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

</ContentTemplate>
</asp:UpdatePanel>

Ajax sounds complex at first, but once you get it installed, it is actually very simple

by: shwaqar82Posted on 2007-06-27 at 07:32:10ID: 19372578

so in this way only the wrap asp. net control will go back to the server ... is that right........?

by: ShimonYKPosted on 2007-06-27 at 08:00:19ID: 19372865

correct

by: ThogekPosted on 2007-06-27 at 12:21:18ID: 19375344

AJAX may very well get you want you're looking for, depending on what new script you're trying to load. The AJAX call goes back to the server, but it doesn't require the page itself to do so, so it's very similar to what you were experimenting with before. (OTOH, I'm always a little wary of the Golden Hammer syndrome, especially with ASP.NET...)

I'm a little perplexed by your code posting above (06.27.2007 at 05:56AM PDT).
1. You're missing a close-bracket with the line
<script id="myScript" type="text/javascript" src="/shared/data/top3/Toronto.js"</script>
which should be
<script id="myScript" type="text/javascript" src="/shared/data/top3/Toronto.js"></script>

2. Your JavaScript code above is running in-line and before the myScript element appears, which means that when the script runs, the element doesn't exist yet, so it won't find it. You could take the
<script type="text/JavaScript">
<!--
var scriptElem = document.getElementById("myScript");
...
</script>
block and move it down below the myScript element, but... Done this way, you might as well forget the script and just put the new '/shared/data/top3/Quebec.js' URL directly in the <script> tag; there'd be no difference. (Or place that JS block inside of a function that gets called at a specific time, such as some other element's onclick event.)

3. That's the method that I didn't really expect to work anyway, but... Did you try my other suggestion above at all?

This much all makes we want to ask: What exactly are you trying to accomplish here? What brought up the need to dynamically modify the <script> element's src attribute? ('Cause I don't see such a need in your code sample above.)

by: YZlatPosted on 2007-07-06 at 12:15:30ID: 19434260

try this:

<script type="text/javascript" src='" + <%MyPath%> + "'</script>

and then in your code in a selectchanged event for your dropdown set the value of MyPath variable:

MyPath=myDropdown.SelectedValue

Question

changing the value of src in script tag based on drop down select event

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

value

Programming for ASP.NET

JavaScript

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press