How to get form input inside ModalBox with jQuery - javascript

I am developing my website using jQuery. For the Private Messaging feature, what I had right now is showing a ModalBox (dialog box). So, whenever user wanna check message, they will be displayed with a dialog box with the inbox shown. Now, inside that ModalBox, I have a "Compose" section where users can send message. My question is, when user submits the form, how we could retrieve those inputs without having to actually submit it? Because, I have tried it..., that when I do the submit(), it closed the ModalBox.
Any help would be appreciated.

Since you're using jQuery, see here
In case you're not familiar with AJAX, basically it allows you to send a request to the server (in this case, your submitted data), process the data on the server, and then receive any return back from your request, all without reloading the entire page.
This should alleviate the issue of the modal box closing (the page reloading upon submit, really.)
[edit]
See this article from here at StackOverflow on using the live event handler. This should take care of the issue of not getting the value from newly created DOM elements.
[/edit]

Related

Can I keep fields in a form populated even if I move to a different page and then back?

I am currently looking at creating a form using HTML, CSS and a bit of JavaScript. I was wondering though if anyone had any ideas how I could keep all the fields populated?
I want to be able to fill in a form and click 'Next' which will go to a different page with a different form. But if the user presses the 'Back' button to edit some information on the previous page for example, how would I keep all the fields populates?
Bit stumped on this, so any suggestions would be appreciated :)
You may use localStorage or cookies for that purpose to store content of the page on the client' side.
See https://stackoverflow.com/a/27273657/696034 for an example; in you case, you call save() when receiving location change event, and load() on the page' initialization.

Is it possible to know if the user pushed the back button to get to a page?

Preferably through PHP, I want to know if the user used the back button to get to a page so that I can save the state of the page that they were on when they left. It is a search page that uses AJAX, so there is nothing in the URL that would allow me to refill the inputs on the page to recreate the form that was previously submitted. Is there a way to use session data and knowledge of if the user pushed the browser back button to fill the input fields that the user filled in?
Yes, but I only know of how to do it in JavaScript. But if you're using AJAX, then you should be able to use this.
When you load your AJAX page, do this:
history.pushState(postData, "Search", pageURL);
Where above, the postData will be your form information you need, preferably as JSON.
Then this event will handle back button events
window.onpopstate =function(event) {
console.log(event); // log the event to the console to see what data you'll need
}
I use this on my personal website and it works fine for me.

Refresh parent page when popup's form submits

Ok, I am working on extending a legacy Coldfusion MX 7 application. I'm new to the project and have been charged with implementing a new feature which I have done however during code review it was recommended that I alter the method which I used to close the child page and refresh the parent page to reflect a newly created data point.
The popup has a CFFORM on it with some buttons. When the popup opens I capture a reference to the parent page with javascript in a variable we can call "opener". When the form posts I capture the data, insert it into the database, call refresh on "opener". This causes the new data item to show up in the parent page's grid.
Research indicates that if I was using Coldfusion 8 I could possibly use the CFWINDOW tag to work this magic.
I have no formal training when it comes to web applications in general so perhaps I am doing something taboo with my approach. How would you solve this particular problem?
EDIT:
I was thinking this over some and came to the conclusion that if I could capture the submit event, post the form data, and get feedback on if it was a success I could then trigger the parent page refresh. Is there a form property that I could bind javascript to for this sort of thing? Maybe some jquery AJAX combination of things that would allow me to submit the form, wait for the status, then refresh the parent and close the popup?

ajax Modal pop up

I am using ajax modal pop in my asp.net + C# application. My application must show this modal in two situations.
When every thing is ok and the file is read and the data is imported to the database.
When the server side code checks the values that need to be inserted to the database and if they are not correctly formatted, it shows a warning message and a button, so the user would have the option to still insert the erroneous data of the file to the database.
I am using this modal to stop the user from interacting with the controls while the import is being done and it works fine. But for the second scenario I see the modal and when the message and button appear on the screen the modal is still covering the page so the user cannot click on the button or do anything basically. How can I solve this problem?
I thought maybe making the message and button appear on the modal would be an option, but I don't know how to that either. Any suggestions?
/Mono
Heres a tutorial to help you get started wiht the modal itself.
http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/
This is actually a more difficult task then it first appears. Your probably going to want to use ajax, and contact a webmethod to see if there is any errors. Probably make times calls checking for complete, or errors.
File uploads want to do a post back, getting them to do this async is tricky. You may want to research async uploads(or a flash uploader) and see if there are any free uploaders out there. The regular html file uploader control is not asycn.
What you could do is let the page post back, then have javascript run on the page reload, and if it is complete or errors, show the popup.
-Show the modal overlay, while it uploads.
-postback, then run script after postback and on the client page reload show modal success or failed.
I suggest you to change to 3 modal dialogs
Uploading..
Everything went ok
Please fix the following data below:
You will always start with 1.
And then replace it with number 2 or 3, according with what happened at the upload.
If the file upload usually takes usually more than 30 seconds, you may want to consider using a flash upload to provide some feedback to the user at Uploading screen.

HTML - How do I use a popup in order to input and output a value?

I see this pattern used very often!
Click on a link
popup appears with a form
fill in form and submit
popup closes and main page populates itself with the form's data.
Any idea how this works?
Edit:
by popup I mean an actual window popup, rather than a modal window. A modal window could work nicely though I reckon.
Do you want something like this ?
http://jqueryui.com/demos/dialog/#modal-form
http://jqueryui.com/demos/dialog/modal-form.html
You can validate the form with js / jquery and then do an ajax call and post the data to the server
The only way to do this is with Javascript. Django's own admin includes a (fairly clunky) example: when you save the popup, it returns a response consisting of just a <script> tag containing Javascript which references the box in the parent form. See for example django.contrib.admin.options.ModelAdmin.response_add.
You can use somethign like facebox to create the popup. This requests a page to the server (your form). Once submitted, detect that the facebox was closed (see the API) and make a new ajax request to the server that will return the needed data to populate your page.

Categories

Resources