Solved

Masterpage javascripts conflicts with childpages javascripts

Posted on 2013-06-03
4
140 Views
Last Modified: 2013-06-07
Is it a good idea to work with Masterpages?
I realized there are javascript conflicts between masterpages and its childpages.
.
For example, if masterpage and childpage have a javascript function with same name, then a conflict shows up and childpage only recognizes  javascript function of masterpage.

For example, in MasterPage I have to use function name like "mouseOverImage_" and in childpage I have to use function name like "mouseOverImage"

'In MasterPage.aspx:
<head runat="server">
 <script type="text/javascript">

	function mouseOverImage_(ctl) {
	    var CtlName = ctl.name.toUpperCase();

	    switch (true) {
	        case (ctl.name.toUpperCase().indexOf("buttonAdmin".toUpperCase()) > 0):
	            ctl.src = 'images/Master/btn_Admin_over.png';
	            break;
	        default:
	            //Nothing;
	    }
	}
 </script>
</head> 
'In ChildPage.aspx a similar javascript function has to be named differently like: mouseOverImage

Open in new window


How to tell childpage to not consider MasterPage javascript "mouseOverImage_" ?


Other concern is that in child page, names of asp controls get changed. For example, in childpage, buttonAdmin gets renamed as:

ctl00$Main_Content$buttonAdmin

And in childpage this javascript command  won't work

document.getElementById("buttonAdmin").src = "images/orange-round-button-th.png";

Open in new window


because buttonAdmin was renamed as "ctl00$Main_Content$buttonAdmin"
0
Comment
Question by:miyahira
  • 2
4 Comments
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 100 total points
ID: 39218658
You are asking this the wrong way round - don't think of it in terms of Master and Child pages - think of it in terms of the page that is actually rendered.

The Master / Child pages are just a tool to allow you to display content on different pages within a common frame - and not having to replicate the frame.

The rule therefore is don't create functions of the same name.

My question is why do you want to have two functions of the same name?
0
 
LVL 1

Author Comment

by:miyahira
ID: 39219206
Ok. You have a point, it is easy to just not create functions with the same name.

However, as I said, javascript code on child page will not work normally since names of childpage's controls get horrible changed. It would be nice if those control names won't changed. How you deal with that?
0
 
LVL 14

Accepted Solution

by:
dejaanbu earned 400 total points
ID: 39221588
childpage's controls get horrible changed.

That's the way Master and child pages work...For accessing the controls by its name you have to use its ClientId.

that is, u have to use

document.getElementById('<%=buttonAdmin.ClientID%>').src = "images/orange-round-button-th.png";

Open in new window


if you dont want to do that, simply set the "ClientIDMode" Property of that button to "Static".. pbm will be solved..

more details here:
http://www.dotnetfunda.com/articles/article838-aspnet-40-manipulate-clientid-using-clientidmode.aspx  

and here:
http://www.unknownroad.com/rtfm/ASPNET/MasterPages.html

here too:
http://beyondrelational.com/modules/2/blogs/61/posts/11206/all-about-client-id-mode-in-aspnet-4.aspx
0
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 100 total points
ID: 39221648
My advice is when using javascript stay away from any specific environment conventions like .Net.

As deejanbu said above use the control's id - this is the fastest method of accessing an html element from js anyway.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
This video discusses moving either the default database or any database to a new volume.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now