Passing script variable to the next page - javascript

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.

Related

How to access the Asp.net Previouspage object when redirecting using javascript

Here's some background info:
Page 1: Contains a text box
Page 2: Contains a label
If I do a Response.Redirect("Page2.aspx") I can easily access the text box on Page1.aspx by using PreviousPage.TextboxRef and assign its value to the label on Page2. No problems here. Everything works as expected.
However, if I do a JS redirect like this:
window.location.href = "Page2.aspx";
The PreviousPage object on Page2 is null. I have tried writing a function that does a "post" instead, but that still results with the same issue.
I also tried checking the Request.UrlReferrer.ToString() value and it is coming back correctly as Page1.aspx.
I'm sure it's something simple, but alas; I'm a noob.
I have searched for a solution with no success, so I'm hoping someone here can help.
Here you can do something like this in javascript where you are setting url.
window.location.href = "Page2.aspx?txt1Value="+document.getElementById('txt1Value').value;
and on other page you can get it using querystring in c#
Label1.Text = Request.QueryString["txt1Value"];

Added an Image"A". Want to Display the image in div"A" , div"B" and div"C". How?

-
I am making an order form with a review page.
when order form is fully filled, then it automatically send each data to
each div on the review page. This is what I want.
I know I can copy a data into another div by using javascript like
<script>
function filling() {
var something = $('#input').val();
document.getElementById("divbox").innerHTML = something;
}
</script>
but when it's not a data that can be displayed with text(for example, an image or a video), then how can I send the data into another div?
Thanks to digging really hard the internet, I found an open source contact form with the image attachment function. what's cool about this is, when I attach an image, it resizes and show to client-side.
(http://webreflection.blogspot.kr/2010/12/100-client-side-image-resizing.html)
So, I am modifying this into an order form, and I want, when a client attach an image, it shows to the client the resized version of it, and it also shows in the div on review page.
How can I do this?
getElementbyClassName or Name did not work because of the "auto resizing script"
-
I'm sorry for my english being to poor. and thank you for your patient to have read this last line. Have a nice day.
Few ways:
<script>
function filling() {
var something = $('#source').html(); // Can be some element, like another DIV
$("#divbox").append(something);
}
</script>
Depending on what you need, can also use clone() (https://api.jquery.com/clone/):
function filling(){
$("#source").clone().append("#divbox");
}

OnClick event triggering javascript function only after clicking twice

I'm fairly new to this web-programming thing, and I'm having some trouble with an onclick event. I don't even know if using "onclick()" is the best thing to do, but it has been working so far for me.
At this moment, I have a page with a div in which I load another page. This content varies depending on hash changed when I select options from a toolbar, using this piece of js
function loadcontent(toload){
$('#browsediv').load("content/addimagecontent.php?"+toload);
}
Every js function is called from the main page, not the content one.
Now, my problem is that, in the loaded content, I have several pages of results, and I have a div with the word Next printed into it, and an onclick event that should make the page change its page attribute:
echo "<div onClick='loadcontent(\"page=".$nextpage."\")'>Next</div>";
I also have the same thing to lead you to the previous page.
Once I go to the page, I see everything as should, but if I click either on "Next" or "Previous", it doesn't do anything the first time.
Any subsequent times I click on any of those, it works perfectly, even if the first thing I click is Next and then I click Previous or viceversa.
I've been looking around but no-one seems to have answered anything that adjusts to my issue, if someone has, please forgive me, as English is not my mother tongue and I sometimes don't know the best way to look for something.
Thanks for reading :)
Instead of adding an onclick, add an id attribute. Then with jquery you can do something like this:
<div id="yourDiv">Next</div>
$("#yourDiv").click(function() {
loadcontent(toload)
})
I'm not quite sure if this is "legal" but you can add the $nextPage variable as an attribute too.
<div id="yourDiv" data-page="<?php echo $nextPage;?>">Next</div>
Then you would use the following
$("#yourDiv").click(function() {
var page = $(this).attr('data-page');
loadcontent(page);
})

save and restore dynamic form value after ajax refresh

Got a page where users make comments on any desired post. Each post has a form with just one textarea field created dynamically from js and I'm wondering if anyone has an idea on how to save and restore the comment being typed by a user (i.e save whatever a user has typed so far before ajax refreshes the div holding all the post and comments and then restore back after the div refresh)
Tried creating something around this but not getting it to work:
<textarea id="comment_field" onKeyUp="return saveAndRestoreTypedStrings(this)"></textarea>
or
<textarea id="comment_field" onchange="saveAndRestoreTypedStrings(' + id + ');"></textarea>
The function:
function saveAndRestoreTypedStrings(id){
document.getElementById("post_comment").onchange = function() {
localStorage['post_comment'] = document.getElementById(id).value;
}
window.onload= function(){
if(localStorage['post_comment'])
document.getElementById(id).value = localStorage['post_comment'];
}
}
To identify the form a user is on, a unique id for that form had to be passed to the saveAndRestoreTypedStrings(id) function.
For clarity, ajax only refreshes the div holding all the posts and comments made on each post. So, that div is refreshed for latest posts and comment every 3 seconds and if a user is typing to make a comment on a post and ajax reloads the div content, the user loses whatever is being typed.
Would be pleased to get ideas around this....
window.onload fires up when the page is completly loaded soo i dont think this would apply for your case.
why dont you try using a callback function after AJAX is complete so you can "restore" the info by calling localStorage ?
Note: sorry, i cant comment yet.

Non-AJAX jQuery POST request

I am trying to use the jQuery POST function but it is handling the request in AJAX style. I mean it's not actually going to the page I am telling it to go.
$("#see_comments").click(function() {
$.post(
"comments.php",
{aid: imgnum},
function (data) {
}
);
});
This function should go to comments.php page with the aid value in hand. It's posting fine but not redirecting to comments.php.
#Doug Neiner Clarification:
I have 15 links (images). I click on a link and it loads my JavaScript. The script knows what imgnum I opened. This imgnum I want in the comments.php. I have to use this JavaScript and no other means can do the trick. The JavaScript is mandatory
Your method successfully POSTs the aid value. But in the comments.php when I try to echo that value, it displays nothing.
I am using Firebug. In the Console, it shows the echo REQUEST I made in Step (2) successfully.
I know what you are trying to do, but its not what you want.
First, unless you are changing data on the server, don't use a POST request. Just have #see_comments be a normal <a href='/comments.php?aid=1'>...
If you have to use POST, then do this to get the page to follow your call:
$("#see_comments").click(function() {
$('<form action="comments.php" method="POST">' +
'<input type="hidden" name="aid" value="' + imgnum + '">' +
'</form>').submit();
});
How this would actually work.
First $.post is only an AJAX method and cannot be used to do a traditional form submit like you are describing. So, to be able to post a value and navigate to the new page, we need to simulate a form post.
So the flow is as follows:
You click on the image, and your JS code gets the imgnum
Next, someone clicks on #see_comments
We create a temporary form with the imgnum value in it as a hidden field
We submit that form, which posts the value and loads the comments.php page
Your comments.php page will have access to the posted variable (i.e. in PHP it would be $_POST['aid'])
$("#see_comments").click(function () {
$('<form action="comments.php" method="POST"/>')
.append($('<input type="hidden" name="aid">').val(imgnum))
.appendTo($(document.body)) //it has to be added somewhere into the <body>
.submit();
});
While the solution by Doug Neiner is not only correct but also the most comprehensively explained one, it has one big problem: it seems to only work at Chrome.
I fidgeted around for a while trying to determine a workaround, and then stumbled upon the second answer by devside. The only difference is the extra code appendTo($(document.body)). Then I tested it in firefox and it worked like a charm. Apparently, Firefox and IE need to have the temporary form attached somewhere in the DOM Body.
I had to do this implementation for a Symfony2 project, since the path generator inside the .twig templates would only work with GET parameters and messing with the query string was breaking havoc with the security of the app. (BTW, if anyone knows a way to get .twig templates to call pages with POST parameters, please let me know in the comments).
i think what you're asking is to get to 'comments.php' and posting aid with value imgnum. The only way to do this is to submit this value with a form.
However, you can make this form hidden, and submit it on an arbitrary click somewhere with jquery.
html necessary (put anywhere on page):
<form id='see_comments_form' action='comments.php' action='POST'>
<input id='see_comments_aid' type='hidden' name='aid' value=''>
</form>
js necessary:
$("#see_comments").click(function(){
$('#see_comments_aid').val(imgnum);
$('#see_comments_form').submit();
);
this will redirect to 'comments.php' and send the proper value imgnum (that i assume you are getting from somewhere else).
Actually, $.post() sends some data to the server. It does not cause any redirection unless you do it in your server side code which handles the POST request. I can suggest two solutions:
To go to comment page, instead of using JQuery post, you can simply use a 'anchor' tag - Show Comments.
Or if you are want to go through JQuery, you can use this code snippet: $(location).attr("href", "comments.php?aid=1");
didnt exactly solve the problem. but did manage to work around it. i had to do a lot modification to the JS to make this work, but the core problem of this question was solved by doing this:
$("#see_comments").attr({href: "comments.php?aid='"+imgnum+"'"});
this appended the aid value to the URL as #Doug Neiner initially suggested me to do.
Thanks a lot Doug for all the effort. I really appreciate. +1 and accept to your answer for the effort.

Categories