javascript 正确加载和查看所有内容的问题
好的，我有一个表单，可以通过另一个页面的邮政编码小部件从请求加载。该小部件在提交时立即填充新页面上的两个表单字段。我的问题是，我那里还有一块非常复杂的闪光灯，有一个主要问题。我的 Flash 本质上是一个饼图，它会在表单复选框中的 mouseOver 事件和 onClick 事件上点亮。它的工作方式与应有的方式相同，只是在最初加载页面时，JavaScript 将看不到预先填充的复选框并执行相应的突出显示操作。这只发生在通过小部件填充的字段中，如果用户选中这些框，它就可以正常工作，因为我附加了一个 onClick 事件处理程序。我编写了一个预选函数，该函数将确定该字段是否由小部件预选，然后将其向下传递以正确突出显示它（只要我有警报功能，它就会执行此操作）。现在，如果我在脚本内添加一个警报（在哪里添加警报并不重要，因为我已经在每个函数中尝试过它们），它就会像预期的那样工作，并看到小部件立即填充的字段并突出显示相应的字段字段如预期的那样。为什么警报框是唯一保持此功能的东西。这是最简单的警报，但是删除它会破坏我的代码。有什么想法吗？ 这是我的代码：（我在我正在谈论的警报的两侧放置了三个 *）
YAHOO.namespace("SOME.Place.QuoteRequest");
/**
* @projectDescription SOME.util.QuoteRequest is the namespace for all quote request related functions. This is a supplemental controller for quote request pages.
* @return (object) function executes automatically when parsed and returns references to it's public members
* @author web development
* @version 1.0
*/
SOME.PLACE.QuoteRequest = function () {
/**
* shortcuts to global objects
*/
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;
/**
* Function to add the special error handler to the zip code area of the form. Zip code errors display in this area. Also the continue button is sometimes a submit and sometimes a button depending on whether the rest of the form is visible.
* @param {Object} frm the quote request form object
*/
var addQuoteRequestZipCodeHandler = function(frm){
if(frm.continueBtn){
Event.addListener(frm.submitBtn, "click", function(e){
var errP = Dom.get("error"), errMsg;
if(errP) errP.parentNode.removeChild(errP);
errMsg = SOME.util.Forms.validateFormField(this.zipCode.name, frm)
if(errMsg){
Event.preventDefault(e);
var p = document.createElement("p");
p.id = "error";
var pText = document.createTextNode(errMsg);
p.appendChild(pText);
Dom.insertBefore(p, "quoteZipLabel");
}
},frm, true);
}
};
/**
* Function to manage the interaction between the product checkboxes and the financial security flash wheel
*/
var CheckboxCollection = function()
{
var odom = Dom.get("finwheel");
var ochklist = Dom.getElementsByClassName("checkbox", "input", odom);
var boolArray = [false,false,false,false,false,false];
var ctr = 0;
for(var c = 0 ; c < ochklist.length ; c++)
{
switch(ochklist[c].value.toUpperCase())
{
case "AUTO": case "HOME": case "UMBRELLA": case "FARM": case "BUSINESS": //[Auto , Farm/Ranch/Crop, Home/Reuters, Umbrella, business]
if(ochklist[c].checked && ctr == 0)
{
***alert("auto checked");***
boolArray[ctr] = ochklist[c].checked;
ctr = ctr+1;
}
break;
case "LIFE": // [Life]
if(ctr == 0)
{
boolArray[ctr] = false;
ctr = ctr+1;
}
if(ochklist[c].checked && ctr == 1)
{
boolArray[ctr] = ochklist[c].checked;
ctr = ctr+1;
}
break;
case "DI": case "LTC": case "MEDSUP": // [disability income , Medicare , Long term]
if(ctr == 1)
{
boolArray[ctr] = false;
ctr = ctr+1;
}
if(ochklist[c].checked && ctr == 2)
{
boolArray[ctr] = ochklist[c].checked;
ctr = ctr+1;
}
break;
case "RETIREMENT":
if(ctr == 2)
{
boolArray[ctr] = false;
ctr = ctr+1;
}
if(ochklist[c].checked && ctr == 3)
{
boolArray[ctr] = ochklist[c].checked;
ctr = ctr+1;
}
break;
case "EDUCATION":
if(ctr == 3)
{
boolArray[ctr] = false;
ctr = ctr+1;
}
if(ochklist[c].checked && ctr == 4)
{
boolArray[ctr] = ochklist[c].checked;
ctr = ctr+1;
}
break;
case "FINANCIAL":
if(ctr == 4)
{
boolArray[ctr] = false;
ctr = ctr+1;
}
if(ochklist[c].checked && ctr == 5)
{
boolArray[ctr] = ochklist[c].checked;
ctr = ctr+1;
}
break;
}
}
return boolArray;
};
/**
* Function to add handlers to highlight the flash wheel
* @param {Object} frm the quote request form object
*/
var addQuoteRequestProductHandlers = function(frm){
if(document.URL.indexOf("@financialSecurityPlan") >= 0){
document.getElementById("finSection").style.display = "none";
}
var imgs = Dom.getElementsByClassName("infoImg", "IMG", "quoteRequest");
var oflash = Dom.get("flashfsWheel");
for(var i=0; i<imgs.length; i++){
Event.addListener(imgs[i], 'mouseover', function(e){
var titlenm = this.parentNode.id.substring(0,this.parentNode.id.indexOf("Title"));
if(oflash) oflash.HighlightWheel(titlenm,"true","TITLE");
});
Event.addListener(imgs[i], 'mouseout', function(e){
var titlenm = this.parentNode.id.substring(0,this.parentNode.id.indexOf("Title"));
if(oflash) oflash.HighlightWheel(titlenm,"false","TITLE");
});
}
// Check to make sure pre-selected check box higlights corresponding flash pieces
var preselect = CheckboxCollection();
if(!preselect[5])
{
for(var f = 0 ; f < preselect.length ; f++ )
{
if(f == 0)
oflash.HighlightWheel("property",preselect[f],"CLICK");
else if(f == 1)
oflash.HighlightWheel("income",preselect[f],"CLICK");
else if(f == 2)
oflash.HighlightWheel("health",preselect[f],"CLICK");
else if(f == 3)
oflash.HighlightWheel("retirement",preselect[f],"CLICK");
else if(f == 4)
oflash.HighlightWheel("education",preselect[f],"CLICK");
}
}
var secs = Dom.getElementsByClassName("formSection", "DIV", frm);
Event.addListener(secs[2], "click", function(e) {
var elTarget = Event.getTarget(e);
var oflash = Dom.get("flashfsWheel");
if(elTarget.nodeName.toUpperCase() == "INPUT"){
elTarget.value = elTarget.value.toLowerCase();
//(pass elTarget.checked as the parm to say whether to light up or turn off)
if(elTarget.value == "auto" || elTarget.value == "home" || elTarget.value == "farm" || elTarget.value == "umbrella" || elTarget.value == "business"){
//call flash piece to light up property piece
var bool = CheckboxCollection();
if( oflash && !bool[5] ) oflash.HighlightWheel("property",bool[0],"CLICK");
if(bool[0]) frm.needs[0].value = "property";
else frm.needs[0].value = "";
}
else if (elTarget.value == "life"){
//call flash to light up income piece
var bool = CheckboxCollection();
if(oflash && !bool[5]) oflash.HighlightWheel("income",bool[1],"CLICK");
if(bool[1]) frm.needs[1].value= "income";
else frm.needs[1].value= "";
}
else if(elTarget.value == "di" || elTarget.value == "ltc" || elTarget.value == "medsup"){
//call flash to light up health piece
var bool = CheckboxCollection();
if(oflash && !bool[5]) oflash.HighlightWheel("health",bool[2],"CLICK");
if(bool[2]) frm.needs[2].value= "health";
else frm.needs[2].value= "";
}
else if(elTarget.value == "retirement"){
var bool = CheckboxCollection();
if(oflash && !bool[5] ) oflash.HighlightWheel("retirement",bool[3],"CLICK");
if(bool[3]) frm.needs[3].value= "retirementSavings";
else frm.needs[3].value= "";
}
else if(elTarget.value == "education"){
var bool = CheckboxCollection();
if(oflash && !bool[5] ) oflash.HighlightWheel("education",bool[4],"CLICK");
if(bool[4]) frm.needs[4].value= "education";
else frm.needs[4].value= "";
}
else if(elTarget.value == "financial"){
var bool = CheckboxCollection();
if(oflash) oflash.HighlightWheel("center",bool[5],"CLICK");
if(!bool[5])
{
for(var f = 0 ; f < bool.length ; f++ )
{
if(f == 0)
oflash.HighlightWheel("property",bool[f],"CLICK");
else if(f == 1)
oflash.HighlightWheel("income",bool[f],"CLICK");
else if(f == 2)
oflash.HighlightWheel("health",bool[f],"CLICK");
else if(f == 3)
oflash.HighlightWheel("retirement",bool[f],"CLICK");
else if(f == 4)
oflash.HighlightWheel("education",bool[f],"CLICK");
}
}
//call flash to light up whole thing
}
}
});
};
/**
* External method to call to highlight a product group for use by the financial needs flash wheel
* id is the id of the product group title to highlight - propertyTitle, incomeTitle, healthTitle, retirementTitle, educationTitle, financialTitle
* highlight is a boolean true or false to highlight or turn off highlight
*/
var highlightProductGroup = function(id, highlight){
if(highlight)
Dom.addClass(id, id + "Highlight");
else
Dom.removeClass(id, id+ "Highlight");
};
/**
* function to kick off additional controllers for the quote request form
* @param {Object} frm the quote request form object
*/
var init = function(frm){
//add zip code handler
addQuoteRequestZipCodeHandler(frm);
if(frm.submitBtn){
var quoteRep = Dom.get("quoteRep");
if(quoteRep){
//add flash wheel
var output = '';
if(SOME.domain.indexOf("cottonstates") != -1){
output += '<object height="370" width="390" data="flash/cottonStates/fiveNeedsWheel2.swf" type="application/x-shockwave-flash" id="flashfsWheel"><param value="flash/SOMEStates/fiveNeedsWheel2.swf" name="movie"/><param value="always" name="allowScriptAccess"/><param name="wmode" value="window"/><a class="external" href="http://www.adobe.com/go/getflashplayer"><img alt="Get Flash Player" src="images/button_getFlashPlayer.gif"/></a></object>';
//create the autocomplete object
SOME.widget.AutoComplete.init(quoteRep, "acResults", "/SiteController?url=/@AutoCompleteCS&forward=agentList.jsp", frm );
}else{
output += '<object height="370" width="390" data="flash/financial/fiveNeedsWheel2.swf" type="application/x-shockwave-flash" id="flashfsWheel"><param value="flash/financial/fiveNeedsWheel2.swf" name="movie"/><param value="always" name="allowScriptAccess"/><param name="wmode" value="window"/><a class="external" href="http://www.adobe.com/go/getflashplayer"><img alt="Get Flash Player" src="images/button_getFlashPlayer.gif"/></a></object>';
//create the autocomplete object
SOME.widget.AutoComplete.init(quoteRep, "acResults", "/SiteController?url=/@allRepresentativesAutoComplete&forward=agentList.jsp", frm );
}
if(document.getElementById("fsWheel"))
document.getElementById("fsWheel").innerHTML = output;
Dom.addClass(["infoPos5", "quoteEmailLabel", "quoteEmail"], "noDisplay");
}
//add phone or email handler
SOME.util.Forms.initPhoneEmailFields(frm.phone, frm.customerEmail, true);
//add flash product handlers
addQuoteRequestProductHandlers(frm);
//add submit handler
Event.addListener(frm.submitBtn, "click", function(e){
var errs = SOME.util.Forms.validateForm(frm, {replaceErrorCodes: true, autoInsert : true, insertNode : Dom.getElementsByClassName("formSection")[0], showErrorHeader: true});
if(errs.length > 0){
Event.preventDefault(e);
window.scrollTo(0,0);
}
else{
this.businessSubject.value = this.businessSubject.value + frm.firstName.value + " " + frm.lastName.value;
}
},frm, true);
}
};
/**
* return the public members of this singleton
*/
return {
init:init,
highlightProductGroup:highlightProductGroup
};
}();
Ok, so I have a form that loads from a request through a zip code widget from another page. THe widget populates two of the form fields immediately, on submit, on the new page. My problem is that I have a pretty complicated piece of flash on there as well that has ONE main issue. My flash is essentially a pie chart that lights up on mouseOver events and onClick events in the form check boxes. It works like it should except for the fact that on initially loading the page the javascript will not see the pre-populated check box and perform the corresponding highlighting action. This only happens in fields that are populated through the widgets, if a user checks the boxes it works fine as I have an onClick event handler attached to it. I wrote a preselect function that will determine if the field is preselected or not by a widget and then pass that on down the line to highlight it correctly (which it does as long as I have the alert functioning). Now, if I add an alert inside of the script (it doesn't matter where, as I've tried them in every function) it works like it suppose to and sees the fields that are populated immediately by the widget and highlights the corresponding field as it is suppose to. Why would an alert box be the only thing keeping this working. It is the simplest of alerts, but removing that breaks my code. Any ideas?
Here is my code: (I placed three * on either side of the alert that I am talking about)
YAHOO.namespace("SOME.Place.QuoteRequest");
/**
* @projectDescription SOME.util.QuoteRequest is the namespace for all quote request related functions. This is a supplemental controller for quote request pages.
* @return (object) function executes automatically when parsed and returns references to it's public members
* @author web development
* @version 1.0
*/
SOME.PLACE.QuoteRequest = function () {
/**
* shortcuts to global objects
*/
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;
/**
* Function to add the special error handler to the zip code area of the form. Zip code errors display in this area. Also the continue button is sometimes a submit and sometimes a button depending on whether the rest of the form is visible.
* @param {Object} frm the quote request form object
*/
var addQuoteRequestZipCodeHandler = function(frm){
if(frm.continueBtn){
Event.addListener(frm.submitBtn, "click", function(e){
var errP = Dom.get("error"), errMsg;
if(errP) errP.parentNode.removeChild(errP);
errMsg = SOME.util.Forms.validateFormField(this.zipCode.name, frm)
if(errMsg){
Event.preventDefault(e);
var p = document.createElement("p");
p.id = "error";
var pText = document.createTextNode(errMsg);
p.appendChild(pText);
Dom.insertBefore(p, "quoteZipLabel");
}
},frm, true);
}
};
/**
* Function to manage the interaction between the product checkboxes and the financial security flash wheel
*/
var CheckboxCollection = function()
{
var odom = Dom.get("finwheel");
var ochklist = Dom.getElementsByClassName("checkbox", "input", odom);
var boolArray = [false,false,false,false,false,false];
var ctr = 0;
for(var c = 0 ; c < ochklist.length ; c++)
{
switch(ochklist[c].value.toUpperCase())
{
case "AUTO": case "HOME": case "UMBRELLA": case "FARM": case "BUSINESS": //[Auto , Farm/Ranch/Crop, Home/Reuters, Umbrella, business]
if(ochklist[c].checked && ctr == 0)
{
***alert("auto checked");***
boolArray[ctr] = ochklist[c].checked;
ctr = ctr+1;
}
break;
case "LIFE": // [Life]
if(ctr == 0)
{
boolArray[ctr] = false;
ctr = ctr+1;
}
if(ochklist[c].checked && ctr == 1)
{
boolArray[ctr] = ochklist[c].checked;
ctr = ctr+1;
}
break;
case "DI": case "LTC": case "MEDSUP": // [disability income , Medicare , Long term]
if(ctr == 1)
{
boolArray[ctr] = false;
ctr = ctr+1;
}
if(ochklist[c].checked && ctr == 2)
{
boolArray[ctr] = ochklist[c].checked;
ctr = ctr+1;
}
break;
case "RETIREMENT":
if(ctr == 2)
{
boolArray[ctr] = false;
ctr = ctr+1;
}
if(ochklist[c].checked && ctr == 3)
{
boolArray[ctr] = ochklist[c].checked;
ctr = ctr+1;
}
break;
case "EDUCATION":
if(ctr == 3)
{
boolArray[ctr] = false;
ctr = ctr+1;
}
if(ochklist[c].checked && ctr == 4)
{
boolArray[ctr] = ochklist[c].checked;
ctr = ctr+1;
}
break;
case "FINANCIAL":
if(ctr == 4)
{
boolArray[ctr] = false;
ctr = ctr+1;
}
if(ochklist[c].checked && ctr == 5)
{
boolArray[ctr] = ochklist[c].checked;
ctr = ctr+1;
}
break;
}
}
return boolArray;
};
/**
* Function to add handlers to highlight the flash wheel
* @param {Object} frm the quote request form object
*/
var addQuoteRequestProductHandlers = function(frm){
if(document.URL.indexOf("@financialSecurityPlan") >= 0){
document.getElementById("finSection").style.display = "none";
}
var imgs = Dom.getElementsByClassName("infoImg", "IMG", "quoteRequest");
var oflash = Dom.get("flashfsWheel");
for(var i=0; i<imgs.length; i++){
Event.addListener(imgs[i], 'mouseover', function(e){
var titlenm = this.parentNode.id.substring(0,this.parentNode.id.indexOf("Title"));
if(oflash) oflash.HighlightWheel(titlenm,"true","TITLE");
});
Event.addListener(imgs[i], 'mouseout', function(e){
var titlenm = this.parentNode.id.substring(0,this.parentNode.id.indexOf("Title"));
if(oflash) oflash.HighlightWheel(titlenm,"false","TITLE");
});
}
// Check to make sure pre-selected check box higlights corresponding flash pieces
var preselect = CheckboxCollection();
if(!preselect[5])
{
for(var f = 0 ; f < preselect.length ; f++ )
{
if(f == 0)
oflash.HighlightWheel("property",preselect[f],"CLICK");
else if(f == 1)
oflash.HighlightWheel("income",preselect[f],"CLICK");
else if(f == 2)
oflash.HighlightWheel("health",preselect[f],"CLICK");
else if(f == 3)
oflash.HighlightWheel("retirement",preselect[f],"CLICK");
else if(f == 4)
oflash.HighlightWheel("education",preselect[f],"CLICK");
}
}
var secs = Dom.getElementsByClassName("formSection", "DIV", frm);
Event.addListener(secs[2], "click", function(e) {
var elTarget = Event.getTarget(e);
var oflash = Dom.get("flashfsWheel");
if(elTarget.nodeName.toUpperCase() == "INPUT"){
elTarget.value = elTarget.value.toLowerCase();
//(pass elTarget.checked as the parm to say whether to light up or turn off)
if(elTarget.value == "auto" || elTarget.value == "home" || elTarget.value == "farm" || elTarget.value == "umbrella" || elTarget.value == "business"){
//call flash piece to light up property piece
var bool = CheckboxCollection();
if( oflash && !bool[5] ) oflash.HighlightWheel("property",bool[0],"CLICK");
if(bool[0]) frm.needs[0].value = "property";
else frm.needs[0].value = "";
}
else if (elTarget.value == "life"){
//call flash to light up income piece
var bool = CheckboxCollection();
if(oflash && !bool[5]) oflash.HighlightWheel("income",bool[1],"CLICK");
if(bool[1]) frm.needs[1].value= "income";
else frm.needs[1].value= "";
}
else if(elTarget.value == "di" || elTarget.value == "ltc" || elTarget.value == "medsup"){
//call flash to light up health piece
var bool = CheckboxCollection();
if(oflash && !bool[5]) oflash.HighlightWheel("health",bool[2],"CLICK");
if(bool[2]) frm.needs[2].value= "health";
else frm.needs[2].value= "";
}
else if(elTarget.value == "retirement"){
var bool = CheckboxCollection();
if(oflash && !bool[5] ) oflash.HighlightWheel("retirement",bool[3],"CLICK");
if(bool[3]) frm.needs[3].value= "retirementSavings";
else frm.needs[3].value= "";
}
else if(elTarget.value == "education"){
var bool = CheckboxCollection();
if(oflash && !bool[5] ) oflash.HighlightWheel("education",bool[4],"CLICK");
if(bool[4]) frm.needs[4].value= "education";
else frm.needs[4].value= "";
}
else if(elTarget.value == "financial"){
var bool = CheckboxCollection();
if(oflash) oflash.HighlightWheel("center",bool[5],"CLICK");
if(!bool[5])
{
for(var f = 0 ; f < bool.length ; f++ )
{
if(f == 0)
oflash.HighlightWheel("property",bool[f],"CLICK");
else if(f == 1)
oflash.HighlightWheel("income",bool[f],"CLICK");
else if(f == 2)
oflash.HighlightWheel("health",bool[f],"CLICK");
else if(f == 3)
oflash.HighlightWheel("retirement",bool[f],"CLICK");
else if(f == 4)
oflash.HighlightWheel("education",bool[f],"CLICK");
}
}
//call flash to light up whole thing
}
}
});
};
/**
* External method to call to highlight a product group for use by the financial needs flash wheel
* id is the id of the product group title to highlight - propertyTitle, incomeTitle, healthTitle, retirementTitle, educationTitle, financialTitle
* highlight is a boolean true or false to highlight or turn off highlight
*/
var highlightProductGroup = function(id, highlight){
if(highlight)
Dom.addClass(id, id + "Highlight");
else
Dom.removeClass(id, id+ "Highlight");
};
/**
* function to kick off additional controllers for the quote request form
* @param {Object} frm the quote request form object
*/
var init = function(frm){
//add zip code handler
addQuoteRequestZipCodeHandler(frm);
if(frm.submitBtn){
var quoteRep = Dom.get("quoteRep");
if(quoteRep){
//add flash wheel
var output = '';
if(SOME.domain.indexOf("cottonstates") != -1){
output += '<object height="370" width="390" data="flash/cottonStates/fiveNeedsWheel2.swf" type="application/x-shockwave-flash" id="flashfsWheel"><param value="flash/SOMEStates/fiveNeedsWheel2.swf" name="movie"/><param value="always" name="allowScriptAccess"/><param name="wmode" value="window"/><a class="external" href="http://www.adobe.com/go/getflashplayer"><img alt="Get Flash Player" src="images/button_getFlashPlayer.gif"/></a></object>';
//create the autocomplete object
SOME.widget.AutoComplete.init(quoteRep, "acResults", "/SiteController?url=/@AutoCompleteCS&forward=agentList.jsp", frm );
}else{
output += '<object height="370" width="390" data="flash/financial/fiveNeedsWheel2.swf" type="application/x-shockwave-flash" id="flashfsWheel"><param value="flash/financial/fiveNeedsWheel2.swf" name="movie"/><param value="always" name="allowScriptAccess"/><param name="wmode" value="window"/><a class="external" href="http://www.adobe.com/go/getflashplayer"><img alt="Get Flash Player" src="images/button_getFlashPlayer.gif"/></a></object>';
//create the autocomplete object
SOME.widget.AutoComplete.init(quoteRep, "acResults", "/SiteController?url=/@allRepresentativesAutoComplete&forward=agentList.jsp", frm );
}
if(document.getElementById("fsWheel"))
document.getElementById("fsWheel").innerHTML = output;
Dom.addClass(["infoPos5", "quoteEmailLabel", "quoteEmail"], "noDisplay");
}
//add phone or email handler
SOME.util.Forms.initPhoneEmailFields(frm.phone, frm.customerEmail, true);
//add flash product handlers
addQuoteRequestProductHandlers(frm);
//add submit handler
Event.addListener(frm.submitBtn, "click", function(e){
var errs = SOME.util.Forms.validateForm(frm, {replaceErrorCodes: true, autoInsert : true, insertNode : Dom.getElementsByClassName("formSection")[0], showErrorHeader: true});
if(errs.length > 0){
Event.preventDefault(e);
window.scrollTo(0,0);
}
else{
this.businessSubject.value = this.businessSubject.value + frm.firstName.value + " " + frm.lastName.value;
}
},frm, true);
}
};
/**
* return the public members of this singleton
*/
return {
init:init,
highlightProductGroup:highlightProductGroup
};
}();
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
只是猜测，但是否可能是脚本在加载 Flash 对象之前正在执行并尝试与 Flash 进行通信，并且通过将警报放在那里，您可以中断执行足够长的时间以供 Flash 加载？
如果是这样，您有几个选择：
Just a guess, but could it be that the script is executing and trying to communicate with Flash before the Flash object is loaded, and by putting the alert in there you're breaking the execution long enough for the Flash to load?
If so you have a few options: