Databases
StackOverflow2013
Postsdbo
POJavascript variables are disappearing
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript variables are disappearing
    text
    copied!<p>The page I'm working with is here:</p> <p><a href="http://harrisonfjord.com/survey/index.html" rel="nofollow">http://harrisonfjord.com/survey/index.html</a></p> <p>When you click on an object in each step, the "alt" tag of the image map region on which you clicked is being saved as a variable answer(current question number).</p> <p>The code is here (ignore the comments, I've just put them in so I know what the hell I'm doing!):</p> <pre><code>$(window).load(function(){ //#shape functions $('#shape area').hover( function(e){ $('#'+ this.alt).addClass('hover'); }, function(e){ $('#'+ this.alt).removeClass('hover'); } //.hover allows 2 function - first is mouse on, second is mouse off ); //End #shape .hover function $('#shape area').click( //.click only allows 1 function. function(e){ $('img.selected-region').removeClass('selected-region'); $('#'+ this.alt).addClass('selected-region'); var answer1 = $(this).attr("alt"); alert(answer1); } );//End #Shape .click function //#height functions $('#height area').hover( function(e){ $('#'+ this.alt).addClass('hover'); }, function(e){ $('#'+ this.alt).removeClass('hover'); } ); //End #height .hover function $('#height area').click( function(e){ $('img.selected-region').removeClass('selected-region'); $('#'+ this.alt).addClass('selected-region'); var answer2 = $(this).attr("alt"); alert(answer2 + answer1); } );//End #height .click function //#world functions $('#world area').hover( function(e){ $('#'+ this.alt).addClass('hover'); }, function(e){ $('#'+ this.alt).removeClass('hover'); } ); //End #world .hover function $('#world area').click( function(e){ $('img.selected-region').removeClass('selected-region'); $('#'+ this.alt).addClass('selected-region'); var answer3 = $(this).attr("alt"); alert(answer3); } );//End #world .click function }); //End (window) onLoad function </code></pre> <p>As you can see, I'm creating an alert for each variable just so I can see that it's working when I click. However, after I press "next", the variable seems to erase itself. As you can see, in the second step, I'm alerting (answer1 + answer2), yet nothing comes up. Further, if you check the html code for "step 4", you'll see that instead of images I'm running a simple document.write script:</p> <pre><code>&lt;h3&gt; &lt;script type="text/javascript"&gt; document.write(answer1); &lt;/script&gt; &lt;/h3&gt; </code></pre> <p>yet, again, nothing displays. Why are my variables not persisting through the whole jquery survey? </p> <p>Excuse the massive code below, but it might help resolve the issue - the entire .js code that runs the jquery survey steps, as well as the hover/click functions of each map. </p> <pre><code>(function($){ $(window).load(function(){ //#shape functions $('#shape area').hover( function(e){ $('#'+ this.alt).addClass('hover'); }, function(e){ $('#'+ this.alt).removeClass('hover'); } //.hover allows 2 function - first is mouse on, second is mouse off ); //End #shape .hover function $('#shape area').click( //.click only allows 1 function. function(e){ $('img.selected-region').removeClass('selected-region'); $('#'+ this.alt).addClass('selected-region'); var answer1 = $(this).attr("alt"); alert(answer1); } );//End #Shape .click function //#height functions $('#height area').hover( function(e){ $('#'+ this.alt).addClass('hover'); }, function(e){ $('#'+ this.alt).removeClass('hover'); } ); //End #height .hover function $('#height area').click( function(e){ $('img.selected-region').removeClass('selected-region'); $('#'+ this.alt).addClass('selected-region'); var answer2 = $(this).attr("alt"); alert(answer2 + answer1); } );//End #height .click function //#world functions $('#world area').hover( function(e){ $('#'+ this.alt).addClass('hover'); }, function(e){ $('#'+ this.alt).removeClass('hover'); } ); //End #world .hover function $('#world area').click( function(e){ $('img.selected-region').removeClass('selected-region'); $('#'+ this.alt).addClass('selected-region'); var answer3 = $(this).attr("alt"); alert(answer3); } );//End #world .click function // jQuery.extend merges contents of two or // more objects together into the first object //$.extend(useranswers,{ //answer1 : $("img.selected-region").attr('rel') //}); //$.cookie('survery', //JSON.stringify(useranswers), //{ expires: 7, path: '/', domain: '&lt;your_domain_name&gt;' } //); }); //End (window) onLoad function $.fn.smartWizard = function(options) { var defaults = { selectedStep: 0, // Selected Step, 0 = first step errorSteps:[], // Array Steps with errors enableAll:false, // Enable All Steps, true/false animation:true, // Animation Effect on navigation, true/false validatorFunc:function(){return true;} // Step validation function, Step index will be passed }; var options = $.extend(defaults, options); return this.each(function() { obj = $(this); var wizcurrent = 0; var steps = $("ul &gt; li &gt; a", obj); // Apply Default Style to Steps applyCSS($(steps, obj),"wiz-anc-default"); // Hide All Steps on load hideAllSteps(); $(steps, obj).bind("click", function(e){ e.preventDefault(); var isDone = $(this, obj).attr("isDone"); if(isDone == 1){ var selIdx = steps.index(this); applyCSS($(wizcurrent, obj),"wiz-anc-done"); selectStep(selIdx); } }); // activates steps up to the selected step for(i=0;i&lt;steps.length;i++){ if(i&lt;=options.selectedStep || options.enableAll==true){ activateStep(i); } } // highlight steps with errors $.each(options.errorSteps, function(i, n){ //applyCSS(steps.eq(n),"wiz-anc-error"); setErrorStep(n) }); selectStep(options.selectedStep); //Next Navigation $(".next", obj).bind("click", function(e){ e.preventDefault(); var curStepIdx = $(steps, obj).index(wizcurrent); if(options.validatorFunc(curStepIdx)){ var nextStepIdx = curStepIdx+1; applyCSS($(wizcurrent, obj),"wiz-anc-done"); selectStep(nextStepIdx); } }); //Back Navigation $(".back", obj).bind("click", function(e){ e.preventDefault(); applyCSS($(wizcurrent, obj),"wiz-anc-done"); var prevIdx = $(steps, obj).index(wizcurrent)-1; selectStep(prevIdx); }); function selectStep(idx){ if(idx &lt; steps.length &amp;&amp; idx &gt;= 0){ var selStepAnchor = $(steps, obj).eq(idx); var selStepIdx =selStepAnchor.attr("href"); hideAllSteps(); selStepAnchor.attr("isDone","1"); if(options.animation==true){ $(selStepIdx, obj).fadeIn("fast"); }else{ $(selStepIdx, obj).show(); } applyCSS($(selStepAnchor, obj),"wiz-anc-current"); wizcurrent = selStepAnchor; } } function activateStep(idx){ var selStepAnchor = steps.eq(idx); selStepAnchor.attr("isDone","1"); applyCSS($(selStepAnchor, obj),"wiz-anc-done"); } function setErrorStep(idx){ var selStepAnchor = steps.eq(idx); selStepAnchor.attr("isError","1"); $(selStepAnchor, obj).addClass("wiz-anc-error"); } function unsetErrorStep(idx){ var selStepAnchor = steps.eq(idx); selStepAnchor.attr("isError",""); $(selStepAnchor, obj).removeClass("wiz-anc-error"); } function hideAllSteps(){ $(steps, obj).each(function(){ $($(this, obj).attr("href"), obj).hide(); }); } function applyCSS(elm,css){ $(elm, obj).removeClass("wiz-anc-default"); $(elm, obj).removeClass("wiz-anc-current"); $(elm, obj).removeClass("wiz-anc-done"); $(elm, obj).addClass(css); } }); }; })(jQuery); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload