ajax Modal pop up - javascript

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.

Related

Detecting tab close event using java-script or j query and making a user authed google api call

I am implementing a profile update where user can view and edit his profile info and add more images to profile. But if someone has uploaded some images (which I m storing in google blobstore) and then closes windows or reloads it then I want to delete the images uploaded to blobstore.
I have already written function which is deleting fresh images uploaded whenever is click on specific button. But when I call the same function on
window.onbeforeunload = function(){
};
Its not working. Please help what I am doing wrong.
I wouldn't rely on the client to perform cleanup: no matter how complex your cleanup logic is you'll never be able to cover all cases. For example the browser or the computer may crash, your client-side cleanup code wouldn't run.
Instead I'd focus on the (single) positive action (like an "Apply Changes" button click) to use the uploaded image and would perform the cleanup for all other cases (whatever their reason may be) with a single cron job deleting images not applied after a certain grace interval following their upload.
Apart from the simplicity this approach would also allow your app (if you want, if course) to be even friendlier with your users, for example one could still apply an uploaded image even if they visited some other page or their browser crashed after they uploaded the image.

Interim message when downloading a file

On my website I have an option to display some data and also to download it in csv format. Some of the data is quite large (20,000 - 900,000 rows in SQL). When I display it on the site I use paging so that it quickly displays only x amount of rows at a time, however, the download link of course should and is downloading the entire report which can take several seconds to a couple of minutes depending on file size. I'm wondering if there is a way to create an interim pop-up or message in-line that says something like "Gathering Information..." where I could additionally put an animated gif so the user knows something is happening. Creating this shouldn't be an issue but I'm not sure if there is a way to trigger that to disappear once the download pop-up appears. The solutions I've seen on this site all suggest using a timer, but thats not an option in this case as the times will vary a lot.
I'm using classic ASP so would like to use either that or JavaScipt. I could additionally use flash if makes a difference.
I would probably wire up the "Gathering info..." message to be hidden upon receipt of a Comet style message from the server that could be sent out as soon as the file is ready to download on its end.
The gist of it is to use a cookie that you set using pure javascript or jquery cookies for ease of use. Then you send the cookie's name to your server, which sends an update for said cookie with the file once delivered.
Meanwhile you have some JS code that checks periodically for the cookie to see if its updated, and can then update the layout accordingly.
I ended up doing this a different way. On my site I have page we'll call "default.asp" on that page is a link to another asp wel'll call "download.asp". download.asp is where the code is to do the SQL query and create the report, which means this is where the wait comes in. After the report is prepared the popup to save, open, etc is displayed. What I ended up doing is creating a div that by default is hidden. When the download button is clicked the div is unhidden, then just before the popup is displayed I once again hide the div. Hopefully this can be of help to someone else as well.

asynchronous __doPostBack

Requirement
In User control ( In single update panel) - user will change some data and click on button or link button other than save button
We prompt Dialog box to user for (Yes/No/Cancel)
On cancel we did nothing and remain on same page
On No - we redirect/process further without saving data.
On Save we have to save changes and redirect/process further.
Here the problem is with Save
We have different panels on page (same on user control)
On Selection of Yes, Here we call "_doPostBack" for save button click event (Works fine), and in same javascript function below save postback calls other "_doPostBack" to hide current panel (Panel-1) and show another one (Panel-2) and server side process.
But Its always shows (Panel-1)
However in FF, Panel-2 just prompt and hide again.
EDIT: Hide panels are at server side, as there are multiple buttons which shows/hide panels.
Expected result is : After save data, show Panel-2 and hide Panel-1
can anyone has idea how to overcome this prob ?
Without some actual code it is a bit difficult to see what is going on, but from what I understand it is a problem with timing.
When you click 'Yes', you perform the postback function and immediately after you hide the panel.
Your 'doPostback' is actually a-synchronous. Meaning the response comes a bit later (not immediately). Thus when the response comes back it updates your page and that is where you flow is breaking up.
FF is probably fast enough to actual show you what is really happening. Your hide function works ok, but is overwritten by the ajax response.
I suggest you hide the panel asynchronously, with the response that comes from the server.
Here are some links on that:
- RegisterClientScriptBlock within AJAX method call
RegisterStartupScript doesn't work with ScriptManager,Updatepanel. Why is that?
I hope this helps you get on the right track.
Good luck

jQuery Print - Show Preview before print

I would like to print a portion of the page, that is a div.
Also I need css files referred, so it will get printed as we see in the page.
I tried to use jQPrint then printThis . But my IE7
browser was getting crashed when i click a button on second time. Not
sure what is the problem. My page has lot of elements (100+ input
fields and 3 Grids)
Finally, I followed this http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm and implemented. Now no crash!
Now how can I show a print preview dialog before sending printer?
Something like this https://github.com/etimbo/jquery-print-preview-plugin, I tried this too but its not working :(
I did this same task in a prior job, and completed y the following example. We set it up to where what ever part of the design we were sending to a printer, we would replicate the HTML, and create a dynamic page with that content, and then trigger the browser print dialog. If you want to do what you are asking, without a lot of "magic", this is a good way to handle it.

How to get form input inside ModalBox with jQuery

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]

Categories

Resources