getElementById() when element is in MasterPage
-
Hello, I have a 'select' element in the footer of my masterpage. I'm trying to write javascript to assign a handler to the 'onchange' event of the 'select' control. The javascript is as follows:
var selectDisplay = document.getElementById('selectDisplay'); selectDisplay.onchange = function() { alert("You did it!"); }The id of the 'select' element is 'selectDisplay'. I have found references to issues regarding using getElementById when the element you want is in the masterpage, but have been unable to find a solution. Any ideas? Thanks!Ian
-
Hello, I have a 'select' element in the footer of my masterpage. I'm trying to write javascript to assign a handler to the 'onchange' event of the 'select' control. The javascript is as follows:
var selectDisplay = document.getElementById('selectDisplay'); selectDisplay.onchange = function() { alert("You did it!"); }The id of the 'select' element is 'selectDisplay'. I have found references to issues regarding using getElementById when the element you want is in the masterpage, but have been unable to find a solution. Any ideas? Thanks!Ian
Mundo Cani wrote:
selectDisplay.onchange
:confused: Try setting it up something like this: Untitled function OptionSelect(){ var sel = document.getElementById("selectDisplay"); for(i = 0; i < sel.length; i++){ if(sel[i].selected){ i ? alert('Option ' + sel.value + ' selected') : alert('Select an Option'); break; } // if(sel[i].selected) } // for(i = 0; i < sel.length; i++) } // OptionSelect() onchange="OptionSelect();"> Select an Option Option 1 Option 2 Option 3 Option 4
Simply Elegant Designs JimmyRopes Designs
Think inside the box! ProActive Secure Systems
I'm on-line therefore I am. JimmyRopes -
Mundo Cani wrote:
selectDisplay.onchange
:confused: Try setting it up something like this: Untitled function OptionSelect(){ var sel = document.getElementById("selectDisplay"); for(i = 0; i < sel.length; i++){ if(sel[i].selected){ i ? alert('Option ' + sel.value + ' selected') : alert('Select an Option'); break; } // if(sel[i].selected) } // for(i = 0; i < sel.length; i++) } // OptionSelect() onchange="OptionSelect();"> Select an Option Option 1 Option 2 Option 3 Option 4
Simply Elegant Designs JimmyRopes Designs
Think inside the box! ProActive Secure Systems
I'm on-line therefore I am. JimmyRopesJimmyRopes wrote:
var sel = document.getElementById("selectDisplay");
Thanks for your reply. Unfortunately, the problem is getElementById does not return an element. I pass it the id of the element I'm looking for (there is no mispelling... I copy/pasted the id) but it is not returned. :doh:
Ian
-
Hello, I have a 'select' element in the footer of my masterpage. I'm trying to write javascript to assign a handler to the 'onchange' event of the 'select' control. The javascript is as follows:
var selectDisplay = document.getElementById('selectDisplay'); selectDisplay.onchange = function() { alert("You did it!"); }The id of the 'select' element is 'selectDisplay'. I have found references to issues regarding using getElementById when the element you want is in the masterpage, but have been unable to find a solution. Any ideas? Thanks!Ian
When a control is in a container (like a content control of a master page), the id is prepended with the id of the container. Use the ClientID property of the control to get the id that you can use in client script, or view the source of the generated page to find out the generated id.
--- single minded; short sighted; long gone;
-
Hello, I have a 'select' element in the footer of my masterpage. I'm trying to write javascript to assign a handler to the 'onchange' event of the 'select' control. The javascript is as follows:
var selectDisplay = document.getElementById('selectDisplay'); selectDisplay.onchange = function() { alert("You did it!"); }The id of the 'select' element is 'selectDisplay'. I have found references to issues regarding using getElementById when the element you want is in the masterpage, but have been unable to find a solution. Any ideas? Thanks!Ian
Ian When control is in master page then the client side rendering of the webpage automatically genrate Id's for the server side control you need to traverse all the elements in the content regardless of using "document.getElementById('selectDisplay');" coz it will definetly not work Thanks Sarfaraz Nazir Solution Developer Accentys Inc
-
JimmyRopes wrote:
var sel = document.getElementById("selectDisplay");
Thanks for your reply. Unfortunately, the problem is getElementById does not return an element. I pass it the id of the element I'm looking for (there is no mispelling... I copy/pasted the id) but it is not returned. :doh:
Ian
Mundo Cani wrote:
Unfortunately, the problem is getElementById does not return an element.
That is very strange. :confused: As an exercise I just swiped the code in my rely from the <html> to the </html> and put it into a new document in notepad. I saved the document as test.htm and then clicked on the saved document. A browser window came up and the control worked as intended. I didn't add or take anything away but just used the code posted. Try it and see if you get the same results. :-D There is no problem with getElementById. I use it all the time on my web pages.
Simply Elegant Designs JimmyRopes Designs
Think inside the box! ProActive Secure Systems
I'm on-line therefore I am. JimmyRopes -
JimmyRopes wrote:
var sel = document.getElementById("selectDisplay");
Thanks for your reply. Unfortunately, the problem is getElementById does not return an element. I pass it the id of the element I'm looking for (there is no mispelling... I copy/pasted the id) but it is not returned. :doh:
Ian
Mundo Cani wrote:
there is no mispelling... I copy/pasted the id
That doesn't help, as you are copying the id that is used for the server control. The getElementById method is using the id of the html element that the control renders, and if you examine the rendered html code (view source in the browser) you will see that they are not the same.
--- single minded; short sighted; long gone;
-
Mundo Cani wrote:
there is no mispelling... I copy/pasted the id
That doesn't help, as you are copying the id that is used for the server control. The getElementById method is using the id of the html element that the control renders, and if you examine the rendered html code (view source in the browser) you will see that they are not the same.
--- single minded; short sighted; long gone;
Thanks!
Ian
-
Ian When control is in master page then the client side rendering of the webpage automatically genrate Id's for the server side control you need to traverse all the elements in the content regardless of using "document.getElementById('selectDisplay');" coz it will definetly not work Thanks Sarfaraz Nazir Solution Developer Accentys Inc
Thanks for your help!
Ian
-
Mundo Cani wrote:
Unfortunately, the problem is getElementById does not return an element.
That is very strange. :confused: As an exercise I just swiped the code in my rely from the <html> to the </html> and put it into a new document in notepad. I saved the document as test.htm and then clicked on the saved document. A browser window came up and the control worked as intended. I didn't add or take anything away but just used the code posted. Try it and see if you get the same results. :-D There is no problem with getElementById. I use it all the time on my web pages.
Simply Elegant Designs JimmyRopes Designs
Think inside the box! ProActive Secure Systems
I'm on-line therefore I am. JimmyRopesI got it working. I was confused with the difference between client-side and server-side controls. Thanks!
Ian