We Keep Coding

Passing script variable to the next page

I've got spinning wheel script that I'm trying to use to give away small prizes to visitors when they login to a website. The wheel animation all works great and the script puts the 'result' into a variable and displays that in a modal on the page. You can see it in action here...
https://ezclix.club/wheel2/index.asp
The result value shows up as the third line in the modal, inserted t oa span #displayprice.
var response = "";
response += selectedSegment.winResult;
$("#displayprice").html(response);
I just need to get that value to the next page, so I can actually 'award' the prize, but so far nothing I've tried seems to work.
I tried setting a cookie but that doesn't make it through.
setCookie("Prize", response, 1)
I've tried adding a form to the modal, and using jquery to update an input with the result value, but that doesn't want to work either.
$('input[id=passprize]').val(response);
$('input[name=passprize]').val(response);
I've tried adding a whole new form input, but no go there as well.
I don't do much with jquery and my experience is mostly limited to minor edits to existing scripts, but the edits above are all things I've done in the past, so I'm stumped.
Any ideas at all much appreciated!
Here's the full function...
function alertWinResult(selectedSegment) {
jQuery(".spin_pin").rotate(0);
$("#spinWinResult").text(globlefuncgeneral.gameover_text);
$(".power_controls").hide();
var response = "";
response += selectedSegment.winResult;
$("#displayprice").html(response);
// My variousattempts...
setCookie("Prize", response, 1)
$('input[id=passprize]').val(response);
$('input[name=passprize]').val(response);
}

You can use url parameter to pass the prize when redirect to next page url/action?prize={response}

enter code here
//Using cookie
setCookie("Variable", response, value)
//using url redirect
next page url/action?Variable=value

I'm not sure how or why, but the form part of this is now working. The snippet above is populating the field so that's getting passed to the next page.
I left it for a while, came back a few hours and it worked without any further changes. So guessing there's some caching going on maybe?
Either way, sorry to waste people's time on this and thanks for your suggestions.

Why cant I disable ajaxToolkit:AsyncFileUpload

Iv tried many things (JS/Jquery) to disable this AsyncFileUpload but none are working...please advise..
<ajaxToolkit:AsyncFileUpload OnClientUploadError="uploadError"
OnClientUploadComplete="ajaxUploadImage_ClientUploadComplete" runat="server"
ID="ajaxUploadImage" Width="400px" UploaderStyle="Modern"
CompleteBackColor = "White"
UploadingBackColor="#CCFFFF" ThrobberID="imgLoader"
OnUploadedComplete = "ajaxUploadImage_OnUploadComplete"
OnClientUploadStarted="AssemblyFileUpload_Started"
/>
var upload = $$('ajaxUploadImage');
upload.enableSelection('false');
var upload = $$('ajaxUploadImage');
upload.enableSelection('false');
upload.disableSelection();
document.getElementById("ctl00_MainContent_MapUserControl_ajaxUploadImage").disabled = true;
So...iv tried using the ID assigned by me..iv tried using the ID assigned in the browser....what am I doing wrong? user can still click of the text box or the select button and the pictures folder pops up, allowing the user to select an image for upload
should note that iv also tried disabling it from code behind
ajaxUploadImage.Enabled = false;
Have also tried setting disabled="true" inside the control, and checking the control in developer tools it is disabled, but I can still click on the text box or button and the pictures folder opens

The control emits its own markup and is hard to manage.
You can try set Visible=false, because its logic runs every time the page is loaded and the control is visible.

I have been putting my head into the disabling part and it seems we can surely disable the AsyncFileUpload control.
The trick is, ajax toolkit re-assigns the ids to the its controls, so whatever your id is, it will re-assign a new id to it even if you are using <%= control.ClientID %> this approach to get the names of the control.
So, I would suggest you inspect the element in the browser and copy the element ID from there.
My Scenario:
This was my control in the markup:
<asp:AsyncFileUpload CssClass="custom-file-input" ID="fileupload" runat="server" OnUploadedFileError="fileupload_UploadedFileError" OnUploadedComplete="fileupload_UploadedComplete" />
Notice, My control's ID is fileupload. And this is how I was disabling it before:
$('#<%= fileupload.ClientID %>').attr('disabled', true);
Which obviously never worked because $('#<%= fileupload.ClientID %>') this returned me the ID as #fileupload which is not correct because originally, ajaxtoolkit had modified it from #fileupload to #fileupload_ctl02 so, I had to hard code the ID in my javascript to get it working. e.g:
$('#fileupload_ctl02').attr('disabled', true); // I am using an older version of jQuery,
For newer versions of jQuery, you would disable it using the prop() method instead.
JS
document.getElementById('fileupload_ctl02').disabled = true;
Hope it helps someone.

Textbox becomes readonly on postback even when setting the readonly attribute to false manually

So, in my current application in ASP.net, I have a weird bug. Textbox that I have added in the existing page, goes in read only mode after the postback. When the page loads the first time, textbox works fine. But after page load, it stays enabled and in read only mode.
I checked Dev tools in IE, and the text box has readonly attribute set to false, as expected. I can even set the other properties from the js function called during page load, and they work fine. Only the readonly attribute doesn't work.
I am unable to figure out a reason as to why this is happening, so I am unable to solve it either.
<tr> <td nowrap align="right"> <asp:Label ID="lblResTimeDescription" runat="server" EnableViewState="False" CssClass="Common">Response Time Comments</asp:Label> : </td>
Textbox code:
> <asp:TextBox ID="txtResTimeDescription" CssClass="TextBox"
> MaxLength="200" TextMode="MultiLine" runat="server" Width="100%"
> Height="50px" ReadOnly="false"></asp:TextBox>
P.S. Do let me know, which code I can post here.
Edit: JS function called at the very end of the page load.
function fnEnableComments(e) {
var strCompletion = document.getElementById("ddlCompletion").value;
if (strCompletion == "Y") {
document.getElementById("txtResTimeDescription").disabled = false;
document.getElementById("txtResTimeDescription").setAttribute("value", "zyx");
document.getElementById("txtResTimeDescription").setAttribute("ReadOnly",false);
}
else {
document.getElementById("txtResTimeDescription").disabled = true;
document.getElementById("txtResTimeDescription").value = "";
}
}
This function gets called properly, as I can see the value change to zyx.
Edit 2:
Removed all hints of readonly from code and js. Still the same problem. Also, the textbox is getting enabled properly, on change of dropdown, gets the value set properly. I can even click on the text box to set the focus, but I just can't change the value in it.
Edit 3:
Program workflow explanation:
User select a record from the listings page and the page loads with information about that record. User can enter data, and save the same. But user can't set the completion flag to yes, without providing comments. In other cases, the comment is not needed at all. This textbox is used to add comments. Typically user updates all the data, and saves the information. After saving the information, page refreshes, and at which point user changes the completion flag. So, on dropdown change and on page load, I check for the completion flag and enable and disable the comments textbox.
This all works fine as far as logic goes. Only thing is when users saves the data first time, and page reloads, textbox stays readonly even when user changes the completion flag. If user refreshes the page again, then code works fine. Basically, this bug causes user to refresh the page, manually after every save, defeating the purpose of refreshing from the code.

attempts to place this before finalizing what you need the first time in the code behind
txtResTimeDescription.Attributes.Remove("readonly");
with this if you put readonly attribute when you take away this textbox

Finally found a solution. I still don't know why it is happening. But below code did the trick.
document.getElementById("txtResTimeDescription").setAttribute("readOnly", false);
I was using the same code earlier too, sadly with wrong capitalization of the attribute.

Keep cell color changed with checkbox on refresh

I have cells changing background color on checkbox check and I worked out how to keep the checkboxes checked on refresh (though looking back I don't think that works anymore), but I don't know how to keep the color change on refresh. I don't actually know Javascript at all and this is all from other questions but I want it to work. If I've done something completely wrong please correct me and don't assume I did it on purpose because I have absolutely no idea what I'm doing.
$(document).ready(function() {
$(".colourswitcher").click(function() {
if($(this).is(":checked")) {
$(this).closest("td").css("background","#ff3333");
}else {
$(this).closest("td").css("background","#202020");
}
});
});
$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});
$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});

Since you're new to javascript, I'm going to ask the dumb question: Have you included jQuery?
This code that you've pulled makes use of jQuery, a very useful library (not built-in to javascript) that has become so commonplace that people often don't even state its name when asking or answering a question involving it. But anytime you see that $ notation, you're probably dealing with jQuery.
You need to include the library file in your html file so it knows what those special symbols and syntax are:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
If you're testing this stuff in Google Chrome, press F12 and view the developer console. You will see "undefined" errors in red when you are missing things like this.

Here's another answer assuming you have a better working knowledge than my first answer:
The first bit of your code runs when the html document has loaded and attaches an event listener to change the nearest cell background color accordingly when the checkbox is clicked. Note two things here though. 1) that behavior will be attached to all html elements with the class "colourswitcher", not just inputs. 2) that behavior assumes that what was clicked has a property "checked", which only a checkbox does.
The middle bit I presume is supposed to run once, when the page is first loaded, to get the saved state of the checkbox from localStorage. This bit could be moved into the document ready bit.
The third bit of your code attaches an event listener to every input element (not just checkboxes) such that every time one is clicked, a checked true/false state will be saved in localStorage.
localStorage is a convenient way to save information between browser refreshes. You can save anything you want, ie. localStorage.CandyCanes = 7 and that variable will be stored in the user's browser and can be recalled later. Note that your above code will only work as intended if there's a single checkbox, because you're using one slot, or one variable, in localStorage to save: localStorage.input.
That's all I'm going to elaborate on this for now. If this is more than you expected, then it's time to hunker down and learn, or get a professional involved.

Can't seem to change the h:outputText "value", or even the value expression, using JavaScript/jQuery

So here is my problem. I am trying to take the value that comes from the backend and get rid of unwanted text in the value. So basically I get a color back and there is an asterisk or two at the end of the color name. I send that value to a JavaScript function and remove any asterisks that may be present in the string. This has been working fine for me up until now. I found one other location that this was happening and when I try to do the same thing, it doesn't work. The string comes in with the asterisks, I remove them and replace the html with the new string and for a brief moment, it works, then the original string comes back.
So, here is a bit more detail. In the app I am working on, there is a link that when clicked opens a richfaces modal window. Then, there is a table that is populated with various quotes that have come in from the website. At the end of each row is a "View" link to view the details of the quote. When that is clicked, it opens another modal that has a table with each product, color, size, and other information they customer wants quoted on. In the "View" link code there is an onclick, this is where I put my function call.
<a4j:commandLink ajaxSingle="true" action="# editRequestedQuoteController.viewRequestedQuote}"
reRender="mainRequestedQuotePanel,subpanel,btnPanel,messagPanelView"
onclick="#{rich:component('viewRequestedQuotePanel')}.show(); changeColorName()">
<span>View</span>
<f:param name="orderId" value="#{order.id}"/>
</a4j:commandLink>
The changeColorName() function is called and runs the following code:
function changeColorName() {
jQuery(".managedorder-color-name").each(function(){
var existingColor = jQuery(this).text();
var newColor = existingColor.replace(/\*/g, '');
jQuery(this).text(newColor.trim(newColor));
});
}
The code newColor.trim(newColor) is just removing leading/trailing spaces from the string.
Here is the code where the string is being rendered:
<c:forEach var="orderItem" items="#{editRequestedQuoteBean.orderItems}" varStatus="status" >
...
<td rowspan="#{orderItem.logo.logoName != null ? '4' : '2'}">
<h:outputText styleClass="managedorder-color-name" value="#{orderItem.itemColor.swatchcolor}" />
</td>
...
</c:forEach>
When I debug it with FireBug, I can walk through the code and see it execute, so I know it is getting called. However I should point out here that sometimes on the first run through, the code does not seem to execute, but if I click the "veiw" link a second time then it does execute. When I step over the last line, I can see the text is replaced with the string I am sending, but then if I "continue" (F8), the string goes back to the version I started with, the one with the asterisks. Does anyone know why this might be happening? Please, anyone, let me know if this is unclear or if you need more information.
Thanks.

The changes are been overridden by the ajax rendering. The onclick is executed before the ajax request. But when the ajax request completes, then the HTML DOM tree is changed with new elements from the server side. You need to execute the changeColorName() JS function after the ajax rendering. You can use the oncomplete attribute for this.
<a4j:commandLink ... oncomplete="changeColorName()" />