We Keep Coding

asp:hidden not able to access in code behind

I have very little experience with jQuery and asp.net (VB).
What I am trying to achieve is this:
1. My page has few textboxes, and a panel containing three labels, a GridView and a HiddenField.
2. When page loads hide panel
3. On the page, user clicks inside textbox and then presses F2 key
4. jQuery senses the F2 key and extracts textbox class and value
5. Also HiddenField/HiddenBoxID value is set to textbox class
6. Trigger a button's click event
7. Now in code behind extract hiddenID value and do further procesing
8. Make panel visible
My jQuery looks something like this:
// Extract TextBox ID and Text Value
var currentClass = $(this).attr('Class');
var currentVal = $('.' + currentClass + '').val();
$('#HiddenBoxID').val(currentClass);
$("#helpButton").trigger('click');
My helpbutton code looks like this:
Dim HuntBoxID As String
HuntBoxID = HiddenBoxID.Value
Here is the problem, when the panel is set to visible=true then I am able to get HiddenBoxID value from jquery to code behind, but when I make the panel visible=false then I am not able to send value from jQuery to code behind. I don't know why? I am using chrome browser and in debug console (F12) I can see the value being set in currentClass and currentVal.
Can someone pls tell me how to achieve the above mentioned.
Also can someone tell me what I am doing wrong, Some code examples will be very helpful.

When you set a control's Visible property to false, none of that control's HTML markup will be sent to the client. As far as the client is concerned, that control does not exist. You can verify by viewing the HTML source on the client.
Instead of manipulating the Visible property, use CSS styles. Here it is in C#, but the VB.NET syntax should be similar:
HiddenBoxID.Style.Add("display", "none");
When you manipulate it with CSS styles, the markup will still be sent to the client, and therefore you can later show the element using client side code. For example, with jQuery:
$('#HiddenBoxID').show();

It's been awhile since I've done something like you are mentioning, specifically using client side javascript/jQuery... but my guess is that you are unable to get the client side ID because asp.net isn't even sending the control to the client since it is visible=false.
I could totally be wrong about this... but when you say you are immediately hiding the panel on page load...I assume you are doing that sever side in code behind, right? Maybe try setting it to hidden in jQuery. In other words, ensure the control is getting sent to the client and then use jQuery to hide it immediately.
Another thing to look at is hit F12 and see if your hidden html is visible in the source on the client. If it isn't then asp.net isn't even sending the control to your client, hence why you can't get the client ID.

How to make pages progress stepwise on a popup?

Can someone please explain how can I go about creating the following page and what techniques should I adopt:
The user should be able to click on a button which should result in a popup.
The popup should have a static page with instructions and button to click which takes the user to the next step in the same popup.
At the next step the functionality should run to take input from the user and save it to the server.
The user should see a confirmation finally and on clicking finish, the popup should hide.
From what I understand, I should try the following:
use javascript onclick and fadeIn function to create the popup.
continue changing the same div using onclick and AJAX to create stepwise kind of a format and carry out the functionality.
use XMLHTTPRequest to upload data acquired and finally use fadeOut to hide the popup.
The reason why I am thinking in these lines is because I have had very little exposure to web designing and hence would love to get some expert views on if this is the right approach and if not then what should be a better way to do it. Is there is some existing literature/method which talks about it?
Any help would be much appreciated.

For first step
Use javascript onclick function. But before this keep your static content ready and than use jQuery UI to appear it as good Dialog Box. For example see this
For second step
The user will never know that you have changed the dialog. Just you can load new dialog with new content in it. When you click button on first page, make that first dialog box is closed.
For third step
Instead of static content make the response set to dialog, here you may use Ajax/post call.
Las step
Its not compulsion to use XMLHTTPRequest. You can even submit form in jQuery post/ajax. Than you can reload the page with confirmation message send in response from server or you may use jQuery to make the confirmation message appear.

Acknowledgement on form submit

I want to show a acknowledgement (more precisely a popup) when form is successfully submitted.Previously I was using Ajax to validate form and display pop up but now I want to achieve same without Ajax.
Is there any event in javascript/Jquery which is invoked after successful form submission? or Is there any other alternative available?
Thanks!
EDIT 1 :
I am using Spring 3.0.
Here is the detailed scenario
1. User fill the form and click on submit
2. Request will be sent to controller (Server side)
3. Validation will be done at server side
4. If errors are present I am using Spring validation to show it and goto Step 1
5. else successfully submit the form and show a popup.
6. After user clicks on popup redirect to other page.
EDIT 2:
I am completely agree with the opinion that Ajax is the right/best way to do it and I already implemented it using Ajax. But client want to use non-ajax approach and I cannot go beyond his words.

This question piqued my curiosity, as I was trying to do something similar using the iframe solution suggested by Leon. Eventually I succeeded, however, I would like to suggest that rather than using a direct onload property, you make use of the jQuery .load() event on the iframe.
Edit: So here's how I set up the form (using HTML5, so quotes aren't necessary):
<div id=message></div> /* Example-specific, see below */
<form method=post action=backend.php target=iframe>
// Form data here
</form>
<iframe name=iframe></iframe>
I added the following CSS code to hide the iframe:
iframe {
border:0px;
height:0px;
visibility:hidden;
width:0px;
}
Don't use display:none, as some browsers will refuse to submit to an element that's not displayed.
Then in my $(document).ready() JavaScript...
$('iframe').load(function(){
// Your load event here.
});
You could also change that about, so that it specifically only triggers after a specific event (if you're using dynamic forms, for example). In such a case, you may want to use .unbind('load') before .load() to prevent previously-added .load() functions from calling.
Now when the form is submitted, it loads into the hidden iframe. When the iframe loads the page (backend.php, in my example), it triggers the .load() function. In my specific case, I set up a <div id=message> to display a message:
$('iframe').load(function(){
$('#message').html('The form successfully submitted.');
});

Without Ajax? No Problem - let's go back to how the Web really used to work in the past ;-)
Since I am getting you don't want to refresh the current page, how about this approach:
have a hidden iframe on the same page, with a name & id
point the target property of your form to the name given in the previous step
submitting the form will now be "hidden"
you can have an onload property on the iframe set to a javascript method of your liking to get called once the form finished submitting
that javascript code could also retrieve the contents of the iframe and check for your server-side response (maybe even including an error msg)
notify the user about the result
This is all fairly easy to setup, let us know how it works for ya..

I am not sure which language you are coding in.
One option - use javascript.
On the submit button onclick event (client side event), perform the page validation and display alert pop up, if the page is valid.
<script type="text/javascript">
function OnSubmitClientClick() {
Page_ClientValidate();
if (Page_IsValid) {
alert('Form has been successfully submitted.');
return true;
}
}
</script>

Why do you want to drop AJAX approach? Without AJAX, server side validation implies page reload. On page reload you would lose client side (JS) state.
One alternative is to use hidden frame/iframe/a new window to perform server side validation on form submit(possibly use the pop up you are referring to in your question). Which in my opinion is not the right approach(A BIG NO). You may rather stick to AJAX or go with non AJAX way of form submit.

Modal Windows using jQuery

I'm working on a web app where in I need to add some values inputted by the user.
When the user clicks on the Add button he sees a form and these values then show up on the page. Now to implement this I can do two things
Use a modal window
Make a form inside the page itself(in a div) and toggle its visibility by the Add button.
If I go with the former solution is it necessary to use Ajax or I can add elements on the main page directly itself? Are there any jQuery plugins to accomplish the same?

As Diodeus mentioned, you don't need Ajax.
In answer to your other question about the plugins, have a look at jQuery UI Dialog for the dialog. Generating the form is pretty trivial. There's no need for a plugin there

You don't need to use Ajax to accomplish this. The difference in the two methods is simply whether you use an inline block of code that is hidden and displayed later, or whether you use an absolutely-positioned block of code doing exactly the same thing.
In most cases there is a single form that envelops the entire page. The rest is a matter of a CSS and positioning.

Dynamically Refreshed Pages produced by Python

I've been researching this on and off for a number of months now, but I am incapable of finding clear direction.
My goal is to have a page which has a form on it and a graph on it. The form can be filled out and then sent to the CGI Python script (yeah, I'll move to WSGI or fast_cgi later, I'm starting simple!) I'd like the form to be able to send multiple times, so the user can update the graph, but I don't want the page to reload every time it doe that. I have a form and a graph now, but they're on separate pages and work as a conventional script.
I'd like to avoid ALL frameworks except JQuery (as I love it, don't like dealing with the quirks of different browsers, etc).
A nudge in the right direction(s) is all I'm asking for here, or be as specific as you care to.
(I've found similar guides to doing this in PHP, I believe, but for some reason, they didn't serve my purpose.)
EDIT: The graph is generated using Flot (a JQuery plugin) using points generated from the form input and processed in the Python script. The Python script prints the Javascript which produces the graph in the end. It could all be done in Javascript, but I want the heavier stuff to be handled server-side, hence the Python.
Thanks!

I'm assuming that you have two pages at the moment - a page which shows the form, and a page which receives the POST request and displays the graph.
Will a little jQuery you can do exactly what you want.
First add to your form page an empty div with id="results". Next in your graph plotting page put the output you want to show to the user in a div with the same id.
Now attach an onclick handler to the submit button (or to the individual parts of the form if you want it to be more dynamic). This should serialize the form, submit it to the plotting page snatch the contents of the id="results" div and stuff them into the id="results" div on the the form page.
This will appear to the user as the graph appearing on the page whenever they click submit.
Here is a sketch of the jQuery code you will need
$(function(){
// Submit form
// Get the returned html, and get the contents of #results and
// put it into this page into #results
var submit = function() {
$.ajax({
type: "POST",
data: $("form").serialize(),
success: function(data, textStatus) {
$("#results").replaceWith($("#results", $(data)));
}
});
};
$("form input[type=submit]").click(submit);
// I think you'll need this as well to make sure the form doesn't submit via the browser
$("form").submit(function () { return false; });
});
Edit
Just to clarify on the above, if you want the form to redraw the graph whenever the user clicks any of the controls not just when the user clicks submit, add a few more things like this
$("form input[type=text]").keypress(submit);
$("form input[type=checkbox], form select").change(submit)

If you'll be loading HTML and Javascript that needs to be executed, and your only reason for not wanting to load a new page is to preserve the surrounding elements, you could probably just stick the form in an IFRAME. When the form is POSTed, only the contents of the IFRAME are replaced with the new contents. No AJAX required either. You might find that the answers here give you sufficient direction, or Google for things like "form post to iframe".

I'd like the form to be able to send multiple times, so the user can update the graph, but I don't want the page to reload every time it doe that.
The general pattern goes like that:
Generate an XMLHttpRequest (in form's onsubmit or it's 'submit' button onclick handler) that goes to your Python script. Optionally disable the submit button.
Server side - generate the graph (assuming raw HTML+JS, as hinted by your comment to another answer)
Client side, XmlHttp response handler. Replace the necessary part of your page with the HTML obtained via the response. Get responseText from the request (it contains whatever your Python script produced) and set innerHtml of a control that displays your graph.
The key points are:
using XMLHttpRequest (so that the browser doesn't automatically replace your page with the response).
manipulating the page yourself in the response handler. innerHtml is just one of the options here.
Edit: Here is a simple example of creating and using an XMLHttpRequest. JQuery makes it much simpler, the value of this example is getting to know how it works 'under the hood'.

Update img.src attribute in onsubmit() handler.
img.src url points to your Python script that should generate an image in response.
onsubmit() for your form could be registered and written using JQuery.