Unexpected page refresh after callback function
Does anyone have any idea why the following callback doesn't execute the code within? I have a window.onload
script (the only one) in my main .html
page which is called, for some reason, immediately after the fadeTo
.
$("#newentryform").fadeTo("fast", .25, function () {
var newentry = prompt("Please enter a new item:", "");
if ((newentry != null) && (newentry != "")) {
var verify = confirm("Press 'OK' to confirm you wish to create a new entry:" + "\n" + newentry);
if (verify == true) {
processnewentry(newentry, dropid);
}
}
});
The above function is called from an onclick
event in the main .HTML
page.
EDIT--code requested in comments
This is the HTML around the button and onclick in question. The call is to the makenewitem function which is the functio开发者_开发问答n above.
<div id="entryinput">
<p>Item<input type="text" id="createitem" readonly /><button id="createitembutton"onClick="showbuttons(this.id)">Select...</button><button id="createnewitembutton" onClick="makenewitem(this.id)">+ New</button><button id="itemReset" onClick="resetbuttons(this.id)">Reset</button>
<input type="text" id="createitemval" style="display:none" readonly/>
<input type="text" id="createitemindex" style="display:none" readonly/>
</p>
</div>
This is the processnewentry function:
function processnewentry (newentryvalue, dropid) {
if (dropid=="createnewitembutton")
{
dropid="createitem";
}
else
{
dropid="olditem";
}
var createnewItm=document.getElementById(dropid);
createnewItm.value=newitemvalue;
var createnewitemval=document.getElementById(dropid+"val");
createnewitemval.value="";
var createnewitemindex=document.getElementById(dropid+"index");
createnewitemindex.value="1";
$("#newitemform").fadeTo("fast", 1);
var currentPage="newitembuttonpressed";
toggleStatus(currentPage); //disable inputs and buttons in form
var hidebutton=document.getElementById(dropid+"button").style.display="none";
var subdropid=dropid.substr(6);
var hidenewbutton=document.getElementById("createnew"+subdropid+"button").style.display="none";
var displaycreateinput=document.getElementById(dropid).style.display="inline";
}
If your onclick is placed on a submit button or an a tag, that might have something to do with it.
You should add return false to your button onclick calls, like this:
<button [...] onClick="showbuttons(this.id); return false;" />
This prevents the default button action (which is submit) to occur.
You could try return false;
at the end of you method.
精彩评论