I'm still learning jQuery, and I've come up against something I'm not sure how to proceed with.
I have a form, within it is a div which is hidden (using "display: none") at load time. This div is later displayed via the BlockUI plugin as a modal dialog for the editing of certain input elements. I'm trying to get the validation plugin to check that the fields I have denoted as required are actually filled in by the end user.
I have used the validation plugin elsewhere in my app without any problems, but this is the first time I'm using it to validate inputs that are hidden at load time. The validations aren't being executed (i.e. empty text inputs that are marked as required aren't flagged as such, and .valid() returns true).
I stepped through the validation logic with Firebug and discovered that none of the input elements within the dialog div are present within $(this.currentForm). If I keep the dialog div visible and remove the $.blockUI call, then the validation works as expected.
So I think I know what the problem is now -- my inputs aren't in the DOM, because they were originally not visible, so the validation plugin doesn't know they exist. I'm not sure how to fix this. Can anyone offer a suggestion? Thanks!
EDIT: The call to $.blockUI() is removing the dialog div from the DOM. Looks like I'll have to find another way to display the dialog.
EDIT: the code is proprietary so I can't post it.
Validation plug-in link
BlockUI plug-in link
Related
I'm having issues getting a control to pass its value back to my server from the browser. Essentially, what I need is a LiteralControl that can be pushed onto the page, modified by some JavaScript, and then pass its entire contents back.
What I'm doing: I'm working with an SVG image. I need to send whatever pre-initialized value (display elements/content) to the browser. Then the user can interact with the image via JavaScript. Whenever they submit the form, I need to get the new/modified image back.
I made a custom control that outputs the SVG element, and allows you to set custom width, height, and viewbox attributes. It has a style element that you can provide content for, and a script element that you can also provide some content for. I've set up a ScriptDescriptor for all the properties that should be modified on the browser. I built an SvgImage.prototype and an SvgImage.descriptors JavaScript class, and registered my namespace and class in JavaScript. My JavaScript is all making it to the browser, but the control isn't added to the Request.Form elements coming back in.
Is there any way to get the control added to the Request.Form elements without creating a hidden field and dumping the content into it?
As I mention in my comment, I am unaware of any native ASP.NET control that would allow you to do this.
All form information posted back to the server has to be (to my knowledge) contained within an <input> control. (As I'm sure you're aware, ASP.NET can only work with standard form processing as supplied by your average browser.)
So I think you're looking at transfering the SVG information into a hidden control (an invisible <textarea> / <asp:TextBox TextMode="Multiline"/> makes most sense) before the post-back takes place.
Another option could be to use AJAX, although if you only want the the information at the point of post-back, you could run into trouble with the timing of it... so I can't see it being much use (but just mentioning it as an option).
Is there a straightforward way to use server-side validation with ASP.NET's validation controls in a form that's displayed in a modal dialog? I am using jQuery and SimpleModal (in C#, VS2010, .NET 4.0)
I've got a modal form which works fine. I need to use a server-side validation because the logic depends on data specific to the record being accessed
My solution for the project I'm working on now is to use a jQuery ajax call to pass all the form data to the server and get back the validation results before allowing the post to proceed. But this is relatively time consuming to implement, and in some situations I'm dealing with now all the validation code exists already.
The first challenge is that of course the modal dialog will close on a full postback. So you could put an UpdatePanel inside the dialog... without even thinking about this too much, though, I assumed that it wouldn't work out that well. It doesn't. And the form which opens the modal dialog to begin with is already in an UpdatePanel, which further confuses matters.
Anyway, I tried putting the contents of the modal form in an UpdatePanel for the heck of it. It does actually do a partial postback, the dialog remains open, but the contents of the dialog do not get updated with anything I change server side. If I close and re-open the dialog on the same page after testing the validation code, though, its contents are in fact updated to reflect these changes. Obviously the way the dialog is rendered is confusing ASP.NET. Or vice-versa. But this just seems sketchy from the get-go.
Rather than trying to hack my way through this problem I was hoping that others had some suggestions about a better way to approach this. Or just tell me I'm trying to hard too mix apples and oranges and I should keep it all client side (or client side + jQuery ajax) if that is the only sensible thing to do.
The two approaches I've taken:
1) submit the data via ajax, the response includes a success:true or false. If false, there is a message included that details the issue.
2) submit the form normally. If there is a validation problem, but the errors in a hidden div on the page and write JS to check for content in that div when the page loads and display the warning/error as necessary.
I am a little confused and making it alot more complicated than this needs to be! Here is what I have...
A view which displays a drop down of US States. When the user chooses a state it loads a list of data from a database and returns the results (populates the View Model) and the View renders the information.
What I wanted to do was have have the dropdown trigger an Ajax event which performs the data load, but also wanted it to depreciate if the user didn't have Javascript enabled. How would I go about rendering the view with AND without javascript / ajax?
Hope that makes sense. Thanks for your help.
You can't re-populate a drop-down without jscript. You can do a page-reload with a new drop-down though, although the logic to determine which to use is javascript unfortunately. (Not to mention triggering the re-load of the page on click)
No Javascript support though? That seems kind of out of date, most people run javascript-enabled browsers these days. As for paranoia freaks with javascript turned off, a <noscript> block to tell them to get over it may be appropriate.
To do this with ajax, read this article about cascade dropdowns by Stephen Walther.
To do this without ajax, you could put your first dropdown in a form with a button visible only when javascript is disabled (hide this with javascript for that) wich gets to some action (in another window, maybe) wich returns the second dropdown populated according to the element selected on the first (on the first window, if you have 2 - you could know this url using a viewstate variable).
Using Drupal: When I click on button "Save" to save the changes to a page, the top of the back-end is immediately removed, and all the content is shifted up for some reason..
How can I fix this?
This sounds like some JavaScript code going haywire, attaching a handler to the form submit while it shouldn't. You should try to use the form with JavaScript disabled in the browser - if the behavior does not occur then, you need to check which JavaScript code is responsible for it. (Possibly some sloppy code from a contributed module - you can also turn off all contributed modules to see if this changes the behavior - if it does, turn them back on one by one to find the offender.)
I'm using a ModalPopupExtender to show a modal popup window with a bunch of input controls and a couple of validators with EnableClientScript set to true.
The issue I'm facing is, that the client-side validations get executed right after the modal popup is shown (via client-side code, not from server).
Is there a way to prevent this?
I'm currently facing the exact same problem than you.
For the moment, I've did some JavaScript to handle this situation by filling the current input with a "Default" text value. I also modify the style color when the Default value is in the input to gray color instead of black.
Then when the user click in the input, another JavaScript function is called to clear it and change the color back to Black!
So my Javascript validation are based on my input color style. I don't very like the way I'm doing this because the validator should work...
I found some informations about that there :
http://forums.asp.net/t/1066821.aspx
http://forums.asp.net/t/1057570.aspx
But actually when I'm inserting their tagMapping in my web.config, all my control in my Master page or .apsx page cannot be found in my .apsx.vb page...
P.S. If you want me to give you my current Javascript (working perfectly) just tell me :)