I'm building a small website with JQTouch and the first problem I've run into yet is with a form.
I have a form
<form action='action.php' class='jqt' id='ajax_post' method='post' name='pform'>
(where the name attribute is there when I tried to access it with document.pform)and within it is a ul list of a elements as follows:
<a class="submit" href="#" value="somevalue">Text displayed</a>
Underneath, inside the form, I placed a single hidden input field (because I only want to POST one value), where my goal is to populate it by clicking one of the links and then submitting:
<input name='somename' type='hidden' />
On submission, the webserver reports that a POST was performed, and there is a brief slide animation before the page returns to the original form. Trying to hack my way into jqtouch.js to populate the input field doesn't work (where what I'm trying is $form.somename.value = $(this).attr('value'); inside submitParentForm())
The CSS captures well and the list is displayed nicely. In fact, if I remove the submit class and insert my own form submission override with document.somename.value = %(this).attr('value'); document.pform.submit(); inside, for instance, hrefor onClick in one of the links, the POST is performed and the next page is displayed, albeit by reloading and not with a jQTouch animation, which is my goal.
My question: How can I use jQTouch to show a slide animation when I post a form which I want to populate with the value of an a element when a user clicks on it?
Thanks in advance.
I wouldn't submit the form (if I wanted to use a submit button I'd use preventDefault). I'd just use $.post() to post the data and then jQT.goTo to go to the new page with a slide animation. The new page is in jqTouch, of course, only another div in the same document which makes it easy to set any information you'd like on that page using the response in the callback of $.post().
But this might not be a viable solution to what you're trying to do, I don't really understand the question very well.
Related
I wish to navigate through multiple pages in a pop-up block. That is, my main page would be inactive when i navigate through pop-up flow as below
[[Main Page]]
[popup-page1]--Next--> [popup-page2]--Next--> [popup-submit page3] --Submit-->
[[Main Page]]
Each page has different set of attributes that are populated by user input such as radio buttons and text fields etc
for instance, below are some of the attributes that are filled on each page.
[page1]--> your name, DOB, country
[page2]--> your preference, your package, direction
[page3]--> email address and submit
How can i retain these values and submit as a form? Do I need to submit each popup page as a separate form or in one shot by retaining all these value till the end?
Note that my application is in strut2 and usually for page navigation I take the help of model driven arch. (putting the fields in one bean and keep a track of value changes using hidden attributes from one form to another)..How can this be achieved using pop-ups. I have limited knowledge about sj:dialog
EDIT
Use Jquery to simulate pop-up navigation by display none and block property. Then, for submit do an AJAX call, this will perform an async call in the background.
In order to navigate through multiple pages in a pop-up block.
I created multiple divs inside the parent div and on click of each continue button I took help of show and hide using Jquery.
At the end of the flow, submit the request to an URL using an AJAX call (GET request)pass values entered by user as params.
I am using a jQuery plug-in to implement an accordion wizard based on bootstrap. http://sathomas.me/acc-wizard/#prerequisites
One thing that is odd to me is that each Panel is wrapped in a <form> </form> and the JavaScript then looks for each <form> and adds a Next or Back button.
So when you get the the final/last Panel and try to Submit the Form...it only will post the data from the last form.
I am not sure how I can make it take the form fields from each panel and then submit them all on the last form...This seems like a flaw in the design?
So my question is, is this even possible to have multiple forms and then have the last form submit all the data from all the forms combined?
With jQuery you can create a new in memory form var form = $('<form action="..."></form>') and then copy and append HTML from all forms on the page to this form form.append($('form').children().clone()). Then you can post in memory form form.submit().
This solution can only work if you're able to override behavior of submit button on the last form.
Check this fiddle Post all forms from page in one post jsFiddle
My Project is having 3 forms in 3 different pages say form1.cfm,form2.cfm,form3.cfm.
form1.cfm contains first form as follows
<form name="firstform" method="post" action="form2.cfm">
// form-content
</form>
Next
form2.cfm(action page of first form) contains second form as follows
<form name="secondform" method="post" action="form3.cfm">
// form-content
</form>
Back
Next
form3.cfm(action page of second form) contains Third form as follows
<form name="Thirdform" method="post" action="form4.cfm">
// form-content
</form>
Back
Next
So when I use the Back button link in form2.cfm, it goes to the form1.cfm and no issues on it .when I do the same in form3.cfm, it must go to form2.cfm, but it asks for form resubmission, because I know that it is the action page of form1.cfm.
And I want to go for form2.cfm, when I use the back button link from form3.cfm and don't want to see the form resubmission page.
I don't know whether it is fixable or not. but suggestions or solution are welcome.
Thanks in Advance
The problem is that by using POST, you are telling the browser "Hey, this form has effects that might not be appropriate to repeat."
You could change the method to GET, but that probably isn't appropriate either, because that says "This form has no effects, it's just to show stuff."
One solution is to not submit the form at all, but gather the data with JavaScript, send it with an XHR request and then navigate to the next form, again with JavaScript.
Another solution is to not have several separate forms at all. Just put them all in one master form. If that becomes to large, just use JavaScript to hide the parts that are inactive and have the next/back buttons open and close those parts.
Don't use "Back" because you are telling the browser to resubmit the original page 1 to page 2.
I can recommend that you adopt a simple framework like Fusebox (http://www.fusebox.org/) because in my experience your CF app will quickly grow and this will make your life a lot simpler downstream.
If your goal is to have a "wizard" type interface where you step through pages, you could try putting all your code into a single page and render it inside a 'tab' using jQuery (http://jqueryui.com/tabs/)
I am trying to take on a new project creatively. Basically, I have a website where I want to put a custom form and a hidden iframe which will contain its own form. What I want is that when I press the submit button on the page's form, the values of say the text boxes will be passed to the iframe's form's text boxes and then submit the hidden form and display in a visible iframe the results.
I have looked through other questions, but none seem to have the same goal as I.
Is this possible? If so, how? I would highly appreciate any help.
nvncbl
If I've understood you correctly, you want to pass some input parameters without the page reload. If so, then you should dig into ajax in order to call asynchronously different parts of the web page.
Fortunatelly there are many frameworks that can help you. I prefer Knockout.js, but you can use for instance Angular.js or Backbone.js and so on.
I have build a quite complex widget which contains "some kind of
form". It has a form tag, but I'm loading a lot of stuff in there via
Ajax etc. Cannot explain it in detail, and the code is too long to
paste in here.
Now, in a "live('click', function()" I use for one of the form fields,
I'm writing a couple of values into hidden fields of another form.
That works fine, as I can see them in the generated code. But if I
leave the page and then hit the back button, the values are gone.
If I write some values into those fields outside the live click
function though, they are still there when I leave the page and come
back using the back button.
But I need to write the values into the hidden fields out of the live
click function (I'm inserting values from fields of my form into
them).
I don't know what causes this and wasn't able to find a workaround yet
(even though I tried a lot).
Any ideas?
Thanks!
Have a look at the jquery history plugin (http://plugins.jquery.com/project/history)
Usually what happens is that browser remembers what you have entered into a form (even if you don't submit it) so that when you hit back button, it populates all the visible fields for you.
It seems it's not the case with hidden fields. There's a workaround though.
Every time one of your hidden fields is changed, you can add #part to your url (eg. www.mysite.com/users#userId,groupId,...).
When the page is loaded again (via back button for example), it will contain the #part. Parse it as a string to determine how to populate hidden fields and populate them.
Review the history plugin for jQuery to see how to read the #part.http://plugins.jquery.com/files/jquery.history.js_0.txt
Use CSS to hide the input instead of the input type.
<input type="text" id="foo" name="foo" style="display: none;" />
instead of
<input type="hidden" id="foo" name="foo" />
I tripped over the same issue and this seems to resolve it.