I have been given a requirement to take an existing stand-alone web-form (i.e. uses postbacks) and throw it into a lightbox.
The standalone web-form already has save and cancel buttons that have predefined behaviors. For example, the Save button attempts to save the form, and either displays validation errors, or if the operation was successful, redirects to some other page in the app.
However, in the context of this new "lightbox mode", the Save button should additionally close the lightbox if the operation was successful.
I see two options:
Option 1-->UpdatePanel + ModalDialogExtender:
a. Extract a UserControl out of the standalone web-form that includes everything but save/cancel buttons
b. Introduce Save and Cancel EventHandlers on said UserControl
c. Use this UserControl on both the standalone and lightbox versions of the page, and wire up the events appropriately
Option 2-->Client side lightbox (i.e. jQuery)
a. ....
I'm a big fan of jQuery and tend to favor its use for Ajax functionality b/c of the level of control it gives me. On the other had, I also want the simplest solution that will possibly work. Assuming that option 2 is that option, any guidance on how to proceed would be appreciated.
I am using fancybox (see http://fancybox.net/home) with great success. It has a mode where it can show my aspx page (usually an edit form without menus and so on) in an iframe fancybox.
It can also be closed from javascript in the iframe.
Related
I need to implement some, let's call it "dialog" in some old ASP.NET project that I took over. It's huge project so I'm not allowed to implement new things.
I have a form on which user can attach up to 3 file attachments, enter some 10-15 fields, and when required fields are filled, submit button get's enabled.
What need to be done is press submit, wait for any possible response for server, and then display some sort of dialog, alert, lightbox which would display short summary and list of correctly uploaded files.
What would be the best approach to do this in ASP.NET?
Considering jQuery Lightbox is designed for overlaying images rather than HTML I would recommend using FancyBox or FaceBox instead.
I thought this would be a trivial feature, but I have lost a fair bit of hair trying to figure it out. I have a jquery mobile web page with a select menu. Users click an item in the drop down list, then later click on a link and navigate to another page. Users then click the back button. The desired result is that the selected item remains selected. Right now, the selection is lost, and it defaults to the first element in the list again.
Things I've tried:
1) Use an asp.net dropdownlist with autopostback. This preserves the selected option, but then I get a page flicker because the entire page is posted back.
2) Wrap above asp.net dropdownlist in an updatepanel. This preserves, doesn't flicker, but it wipes out the jquery mobile styling. Also tried some suggested workarounds with firing a jquery create event, but couldn't get anything working.
3) Write cookies on the select change event in javascript, and read them in the asp page_load event. However, page_load is not called when the back button is clicked, so this had no effect.
4) Tried creating a jquery ajax request to a web page method, but the method must be static and therefore I can't get it to modify the page.
Any other ideas? Is it just me or should this indeed be a problem that's been solved a million times?
As an FYI, I am a newbie at web programming, so please spell it out if you have an answer :) (come from a c++/database background).
Thanks!
Turns out even the date scroller could not survive a back button in some cases. For example if the user navigates to another site, and then uses the back button to come back to my jquery mobile site, all my javascript dom manipulations are lost. The solution is non-trivial. I store everything I need to maintain state of a page using html 5 local storage. On the jqm show page event, I detect if all my global variables have been wiped clean, and if so, reload state from local storage. Works perfectly, but it is quite an implementation task. And of course, if local storage is not supported by underlying browser, it all falls to pieces.
want to have search functionality as on this website
http://www.carwale.com/new/search.aspx#budget=6&budget=8&fuel=2
here whenever the user filters search(checks any checkbox), it updates results accordingly,
that can be understood as an ajax filter.
But at the same time, the query string also reflects for the change,
which helps the user to bookmark the filter search for later reference.
changing it through asp.net/javascript may cause the page to reload..
any hint or suggestions on implementing the same would be really helpful..
This can be done with the help of 3 things together
1) as #Aristos said, checkboxes with Auto Postback enabled
2) Ajax control toolkit Modalpopup, which gets fired automatically on every async postback (http://weblogs.asp.net/ruslan/pages/ajax-update-progress-updateprogress-in-ajax-modal-popup-modalpopupextender.aspx or http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html)
3) History Points (http://msdn.microsoft.com/en-us/library/cc488548.aspx)
This can be done completely without the use of jQuery, if you dont want to use it.
-- For the first part, he have a set of check boxes list with autopostback.
In every post back the list is updated base on the selected check box.
All is simple until now, the cool is that is have a nice interactive interface (made with javascript and jQuery).
-- About the second part, how its change the url so can be bookmark with out reload the page. The trick here is that is place the parameters after the anchor # eg:
/new/search.aspx#budget=2
Using the anchor # the page is not reload and stay as it is. So when some one click on the check boxes, via javascript is also update the url, but only what is after the # so the page stay as is with out fully reload.
Now the parameters after the # can not read on code behind but only via javascript.
So when you have bookmark this page and you go direct to eg /new/search.aspx#budget=2 the javascript reads what is after the # and translate it to commands, check the appropriate checkboxes, and ask for refresh the content. All that can be done only via javascript.
I see that is use the jQuery history plugin as helper with this schema.
http://archive.plugins.jquery.com/project/history
The same trick with parameters after # is done from amazon, when you navigate on catalog, from page to page.
-- One more clever trick that is done is that is open a full page wait, so the user can not interact with the page until the page is ready again. If it not do that, and the user make very fast two clicks on the check boxes, then this can cause a full page post back on updatepanel and this can lose the previous settings.
I've always wanted to know what is, in a general way, the opinions about popups in web (I mean, those who are implemented via divs).
I've always liked not to load the user with the entire size of this popup in his navegation (when the popup is not visible). I assume that it's better load the content by demand (when the user clicks in the corresponding button). If you have five popups in one page, I always thought that the increase in 'bytes' can make a difference downloading the page.
Following the 'on demand' option I've always liked iframes because they let me change his URL via Javascript. So, I display a popup (div) which contains an iframe in wich I can change his contents downloading the page in this moment.
In my probably limited view, this method has another advantage. The validation logic (usually Asp.NET validators) are isolated in the popup page, so they don't enter in any kind of conflict with the validators located in the parent page (if applicable).
But it seems that iframes are not so well supported by some browsers and they are not too much appreciated by the community of designers (and it's a object with strong security implications).
So Basically I was wondering what are your experiences displaying these kind of UI. I know Jquery can load dynamically HTML in one div, but probably without isolating client validation scripting.
Opinions? THANKS a lot!
Firstly, you can create validation groups (http://msdn.microsoft.com/en-us/library/ms227424.aspx). That will help you with your validation problems.
You're right, you can use jQuery to dynamically load HTML as appropriate, but I'm not sure how well that works with aspx pages. There are problem a number of gotchas. Consider, you have page1.aspx and popup.aspx. If you load popup.aspx in an iFrame, you're fine, because it's a separate page. If you load it dynamically via JQuery.load() - the output of popup.aspx will load into your page1.aspx (this includes html tags, form tags, viewstate fields etc). That will likely cause some problems. (I haven't tried just guessing).
I have used .load in the past, but I tend to load standard html pages, not aspx pages. Then when the "submit" button is pressed, it calls a webservice with the relevent fields. This adds more javascript coding on my part - coding the "submit" button, coding a webservice to handle the ajax submit, coding the "wait screen" while an action is being done or data being submitted via ajax. I also have write the js to do client side validation and any code to handle server side validation and report that back to the user.
jQuery Validation plugins work well for this - or alternatively, you can instantiate .net validators if you don't want more plugins / frameworks (http://msdn.microsoft.com/en-us/library/yb52a4x0.aspx)
I am writing an ASP.NET 3.5 web app that displays a list of items. I want to be able to display a non-modal popup with details when the user selects an item. I want to be able to display several detail popups simultaneously. (i.e., the user can click an item to see its details, then click another item to get another popup.) Currently I call RegisterStartupScript during postback to write a "window.open(...)" script to the page when it re-renders. The problem, of course, is that this requires a full page postback and refresh.
It occured to me that this might be a perfect use for XMLHttpRequest or AJAX but I don't know how to do it (or whether it's even possible or smart to do this). Can someone show me the way?
I have the AJAX Extensions installed but I'd prefer not to use the AJAX Control Toolkit.
EDIT:
Some clarification: When the user selects an item a custom event is raised. On the server I handle this event and use some server-side logic to construct a URL which I then use with RegisterStartupScript to construct a "window.open(myUrl...)" script. But posting back the whole page to do this seems inefficient and I'd like to know if I can just make a call to a simple server-side function that constructs the url and sends it back without having to roundtrip the entire page.
Creating a popup has very little to do with AJAX, and a lot more to do with JavaScript. See the jQuery dialog library here. You can then use jQuery's AJAX API to do your server dirty work :)
jQuery Dialog UI
--
Bill Konrad
Devtacular - Web Development Tutorials
You can use DHTML Window widget.
It offers many way to display either modal or non modal window.
Also it supports AJAX.
You can use dhtmlwindow for open a new window, or
dhtmlmodal to open a new modal window.
Of course, you can edit it to match your requirement.
Sample:
var insWindow = dhtmlmodal.open("insbox", "iframe","UserMaster.aspx?" + queryStr, "User Master", "width=425px,height=500,center=1,resize=0,scrolling=1", "recal");
Do you really need to open a new window? Opening an absolutely positioned DIV or a new layer on top of the current page in the same window is all the rage these days.
Edit:
I don't think it would limit the number of popups, there is some neat stuff that can be done these days with libraries like jQuery + jQuery UI, you can simply create as many of these DIVs/layers as you need and make them movable, resizable, etc. Only thing that real popups have and these do not is that they do not appear on the tab panel/taskbar.
Yes, you will be limited to the size of the window in which is the main page opened, however, I don't personally see it as a problem since most people surf in a maximized browser window anyways.
Implementation of the oldschool typical popup window is undoubtedly much easier for you, but it also runs into problems with end user popup blockers. Just had that problem # my work, they needed to make a popup during the certificate authentication process for some reason and as soon as Yahoo released a new version their toolbar, it quit working).