We Keep Coding

asp.net javascript div hide show not working

I am new to asp.net/javascript and have been practising with the following code for sometime now.
Basically I am testing how div containers appear using javascript with the following code (extract)
Everytime I run the page I get the following error:
BC30456: 'Show' is not a member of 'ASP.default4_aspx'.
And the following line gets highlighted:
<asp:Button ID="btnSchedule" runat="server" Text="Schedule" onclick="Show();" TabIndex="1000" style="width:120px;margin-top:-5px;border: thin solid #ffffff;" />
I can see the onclick="SHOW() ;" seems to be the problem, but I don't know what's wrong.
Any guidance is welcome.
<form id="form1" runat="server">
<div>
<asp:Button ID="btnSchedule" runat="server" Text="Schedule" onclick="Show();" TabIndex="1000" style="width:120px;margin-top:-5px;border: thin solid #ffffff;" />
<div style="background-color:yellow;width=200px;height:200px"></div>
<div style="background-color:red;width=200px;height:200px"></div>
<div style="background-color:blue;width=200px;height:200px"></div>
<div style="background-color:beige;width=200px;height:200px"></div>
<div style="background-color:skyblue;width=200px;height:200px"></div>
<div id="div_Schedule" class="MiddlePopUp" style="display:none;left:400px;top:400px;z-index:10;">
<asp:Button ID="btnScheduleHide" runat="server" Text="hide" onclick="Hide();" CssClass="STD_button" />
<br/>
<br/>
<img src="/quick.jpg" style="height: 764px; width: 1168px" />
</div>
</div>
</form>
<script type="text/javascript">
document.getElementById('div_Schedule').style.display = "none";
function Show() {
document.getElementById('div_Schedule').style.display = "block";
}
function Hide() {
document.getElementById('div_Schedule').style.display = "none";
}
</script>

You should use the OnClientClick instead of OnClick. The first one handles the client click on the client - it doesn't trigger a postback. While the second triggers a postback and the click will be handled in the server.
That being said, you could try this:
<asp:Button ID="btnSchedule"
runat="server"
Text="Schedule"
OnClientClick="Show();"
TabIndex="1000"
style="width:120px;margin-top:-5px;border: thin solid #ffffff;"/>
The same holds for the OnClick of btnScheduleHide button.
As a side note, I don't see the reason for these button to be server side buttons. They could be html buttons. You don't have to define them as a server side controls and then the View engine of ASP.NET render the corresponding html code for them, since you quite possibly don't need to trigger a postback to the server and make some actions there and return a response from the server.
The following, I am almost sure that would meet your needs:
<input type="button" id="btnSchedule" value="Schedule" onclick="Show();"/>
Furthermore, if you stick with the first approach you have to change also the way you select your button in your client side code:
This will not work:
document.getElementById('btnSchedule')
Why?
Because the rendering engine of ASP.NET will create an ID not exactly like btnSchedule. You could easily spot this, if you use the developer tools.
So how you could select it correctly?
document.getElementById("<%= btnSchedule.ClientID%>");

Don't put the javascript onclick in the asp.net button.
Use the ClientID property to attach the onlcick event.
This should do the job.
document.getElementById('div_Schedule').style.display = "none";
function Show() {
document.getElementById('div_Schedule').style.display = "block";
}
function Hide() {
document.getElementById('div_Schedule').style.display = "none";
}
var showButton = document.getElementById("<%= btnSchedule.ClientID%>");
var hideButton = document.getElementById("<%= btnScheduleHide.ClientID%>");
showButton.addEventListener("click", Show);
hideButton.addEventListener("click", Hide);

change src of image from a php page through js

I have an image generated from another php page
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imagid">
a captcha image is created each time.On each refresh a different image is generated.
But what I want is to put a button there which changes the image without refreshing the whole page.
<input type="button" value="refresh" onclick="refresh();">
and the my js code is
function refresh(){
document.getElementById("imagid").src="sample.php";
}
It doesn't work,how to change the image src by js

In your JS code you're trying to change the "src" attribute of the button, you need to apply the id to the image, not the button.
What you need to do is have the following :
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imagid">
<input type="button" value="refresh" id="imagid" onclick="refresh();">
<script>
function refresh() {
document.getElementById("imagid").src = "sample2.php";
}
</script>

try this
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imageid">
<input type="button" value="refresh" id="buttonid" onclick="refresh();">
<script>
$('#buttonid').click(function()
{
$('#imageid').attr('src','sample2.php');
}
</script>

The problem could be that image has been cached by browser because of its MIME type.
there are various ways to tackle it,
1)use different page name altogether,sample1.php,sample2.php.....
But you cannot create infinite number of page.
2)Use salting in URL, ie sample.php?rand=1,sample.php?rand?=2....
This rand parameter will keep updating all the time and on each request to server you will generate new image.
There are other advanced ways also ,but this are the one to get started.

Your error is here.You have not assigned id to your image tag and in your js code you are trying by button id.
<img style="margin:9px 0 0 16px;" src="sample.php" width="87" height="59" id="imageid">
function refresh(){
document.getElementById("imagid").src="sample.php";
}
Note :
Make sure you the IDs for button and image tag.No two elements should have same Ids.
Hope this helps...

Using JavaScript to change add to cart button background for Magento Go

I am fairly new to jquery and javascript, but certain that I can use it to get the result I desire. I would like to have the background-image of the add to cart button change on click. From my research,on this site and others,I have come to the code pasted below;for which the html is only the snippet for the button, which I copied from the Magento Go store source. I feel I am close but I think that I am not "identifying?"(for lack of the proper term) the class of the button correctly. If I had access to the php templates I think I would have an easier time customizing but this is the route that was chosen. I appreciate any insight given.
<script>
google.load("jquery", "1.9.1");
google.setOnLoadCallback(function() {
$('btn-cart').onClick function() {
$(this).css('background-image', 'url(image2)');
});
});
</script>
<style>
.btn-cart{
background-image: url('image1');
width: 100px;
height: 100px;
}
</style>
<html>
<body>
<button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation('http://charmit.gostorego.com/checkout/cart/add/uenc/aHR0cDovL2NoYXJtaXQuZ29zdG9yZWdvLmNvbS9jaGFybXMuaHRtbA,,/product/366/')">
<span><span>Add to Cart</span></span></button>
</body>
</html>

Button doesn't do post back in IE 9

I'm using the asp file upload control.i didn't wanted to show the user the ugly asp.net control so used some style="width: 0px; height: 0px; overflow: hidden;" to make it hidden.
Here is my html code
<a id="a">Browse</a>
<div style="width: 0px; height: 0px; overflow: hidden;">
<asp:FileUpload ID="file" runat="server" />
</div>
<asp:Button ID="btn" runat="server" OnClick="btn_Click" />
And i my jQuery ready function i wrote
$(function(){
$('#a').click(function(){
$('#file').click();
});
});
But this code doesn't do a postback in ie. I'm testing in ie 9.Although it works perfectly fine in Chrome and Firefox.
Can any tell me what is wrong with my code.Or else a work around for this.

Have you looked at IE Developer tools to see if there are any javascript errors in IE? It is possible that it is not able to find the control with ID 'file' since it is a server control and the ID is generated dynamically when the page is rendered.
Use this to select a server control.
$("#<%= file.ClientID %>").click()
Or you can use jquery selector.
$("[id$='file']")

Multiple ModalPopupExtenders on one page, each with javascript

Hello all gurus in the area of ASP.NET AJAX and JavaScript!
Here's the deal: I have a user control (ascx) that currently contains a help Button and a ModalPopupExtender showing a Panel. The idea is that the user clicks the button and the help info is presented in a modal popup on top of the page, with another button to close it.
The help info can very well be larger than the window, so I have to resize the modal popup on show. When the control is coded as below, the Panel is resized initially, however; if the parent page has a validation error and is resent to the client, the javascript on top never executes.
Here's the control markup:
<script type="text/javascript">
// Adjust for popup y = 130 and a small gap.
var myAdjustedHeight = getPageHeight() - 150;
if (document.getElementById('<% =pnlPopUp.ClientID %>')) {
document.getElementById('<% =pnlPopUp.ClientID %>').style.height = myAdjustedHeight;
document.getElementById('<% =pnlScroll.ClientID %>').style.height = myAdjustedHeight - 20;
}
</script>
<asp:button id="btnHelp" runat="server" text="Help" />
<asp:updatepanel id="upPopUp" runat="server">
<contenttemplate>
<asp:panel id="pnlPopUp" runat="server" width="600">
<div class="header" style="float: left;">
Help
</div>
<asp:button id="btnClose" runat="server" text="Close" style="float: right; padding-bottom: 3px;" />
<asp:panel id="pnlScroll" runat="server" scrollbars="Vertical" style="clear: both;">
<asp:gridview id="grv" runat="server" autogeneratecolumns="true" showheader="false" gridlines="None" cellspacing="2" cellpadding="2">
</asp:gridview>
</asp:panel>
</asp:panel>
</contenttemplate>
</asp:updatepanel>
<ajaxtoolkit:modalpopupextender id="popUpExtender"
runat="server" backgroundcssclass="modalBackground" okcontrolid="btnClose"
targetcontrolid="btnHelp" popupcontrolid="pnlPopUp" x="100" y="130" />
(The GridView is filled with data in the Page_Load using a predefined DataSet in a basic fashion.)
I have tried to add this:
function pageLoad() {
document.getElementById('<% =popUpExtender.ClientID %>').add_shown(adjustHeight);
}
(where adjustHeight() is a function containing the code from the top) but when it fires I get null back for the ModalPopupExtender - and indeed it never seems to be included into the markup sent down the wire.
BTW, I need to add at least two instances of this help button to present help info for several elements on the page. Hence, I can't use the BehaviorID property of the ModalPopupExtender, since it is piped straight out to the page and I get an id collision.
So, how do I fix this? Am I to move the ModalPopupExtender to the Page or can I solve this within the ascx control?
If anyone has an idea on how to fix this, I would appreciate it.

Use this in your pageLoad:
$find('<% =popUpExtender.ClientID %>');
add_shown wouldn't exist for the HTML element, which document.getElementById returns.