JQuery Archives - Digital Tool Factory blog

How to fix problems with missing form values on jquery serialization

So – I was toiling away on some client side code, and noticed that a dropdown value was not being sent on a post command. After much rending of garments and gnashing of teeth I figured it out. I was setting the value with a .val(“something” command) – then doing the post. It would seem that if you are doing that immediately the value is not quite in the dropdown yet (probably some DOM thing) and rather than send a null value it will omit the dropdown entirely on the serialization, and not send it on the post.

The solution is to

manually add the value as an option in the dropdown
then set that value with the .val() command
then serialize the form
then do the post.

JQuery— No comments
31
Dec 16

Written By Steve French

How to fix an odd problem with autonumeric.js

So, you’re using the standard autonumeric.js jquery plugin on your html 5 site – you set up the initialization properties and nothing happens – what is wrong?

First check to make sure that your textbox is of type “text” and not type “number” – that threw me for about ten minutes today.

How To Fix / JQuery— No comments
08
Apr 15

Written By Steve French

How to fix problems with Jquery Validate and dynamically generated forms

I recently came across the problem of validating dynamically generated forms with the jquery.validate plugin – everything worked well with the original form, but when there were multiple forms available I got peculiar syntax errors. A quick googling told me to simply add the following code

$(“form”).validate();

to the javascript and everything would be fine. I tried that to no avail. Then I read things more closely and realized that I needed to specify which form I wanted to validate, I changed the code to

$(“#editForm”).validate();

And voila! Problem so.

ASP.net / ASP.net MVC / JQuery / Uncategorized— No comments
03
Mar 15

Written By Steve French

When the jquery $.post doesn’t work the way you expect it to…

The Problem

In my was posting a contact form to an outside service, and then redirecting to a page on the same site. I thought, Aha, I will use the handy jquery .post command – it looked something like this.

$.post(“https://www.outsidesite.com/FormSubmit.php”, $(“#myform”).serialize());
window.location.href=’http://www.MySite.com/SomePage/’;

But curiously, half of the time I filled out the form the data did not reach the outside server, and the other half the redirect did not happen.

The Cause

$.post is an asynchronous operation by definition – and cannot be made synchronous.

The Solution

Just use the regular jquery .ajax function, and set async to false

$.ajax({type: ‘POST’, url: “https://www.outsidesite.com/FormSubmit.php”, data: $(“#myform”).serialize(),async:false});
window.location.href=’http://www.MySite.com/SomePage/’;

That’s it, now the browser waits until the submission is complete and everything works as expected.

JQuery— No comments
27
Jun 13

Written By Steve French

Which jQuery cropping plugin should you use?

I recently had the need to do some automated image cropping. I was already using the wonderful ImageResizing.Net plugin, which made all of the server code very easy. It came with some sample code that uses the JCrop plugin (by Deep Liquid).

Jcrop does it’s job very well. However…

In the modern web development environment, plugins are both a blessing and a curse. The blessing portion is that the plugins work very well. JCrop is no exception. It does a great job selecting the proper portions of an image to crop in an easy and intuitive manner. So far so good.

The curse is that every need is somewhat new to the world, and the factory settings ALMOST apply, but not quite. I was pulling a list of uploaded images from the server, and I wanted the images to pop up in a normal jquery ui modal dialog window. It was trivial to display the large photos from a list of thumbnails. So….

Now to integrate the two

I opted to have the JCrop appear after the thumbnail was clicked. It did. So far so good.

Then I ran into problems. After you select one image, no matter what you select next, the first image will always show up in the modal window, which was a considerable problem. If you disable JCrop the problem went away, but no matter what combinations I tried in terms of loading order, ready states and dailog and object creation I could not get jCrop to to work in this situation.

Mind you, this is not jCrop’s problem, but it was not the situation I was trying to use

Enter ImgAreaSelect

After quite a few hours I gave up and let my fingers do the googling for other plugins. I was led to ImgAreaSelect – which was simple and easy to use, and did not have the problems with the dialog boxes that jCrop did. The documentation was good too.

Code Review / How To Fix / JQuery— 1 comment
18
Jun 12

Written By Steve French

How to fix problems with asp.net mvc 3 and jQuery UI AutoComplete

The Problem:

You’re tooling along, using the jQuery library to write some great search feature, and you write some great Linq to Sql code. Being an awesome coder your use the extension method syntax. Your action result (in the appropriate controller) looks like this

public ActionResult QuickSearch(string term)
{
var lst = context.Contacts.Select(xx => new {FullName= xx.FirstName +” ” + xx.LastName }).Where(xx => xx.label.ToUpper().Contains(term.ToUpper())).ToList();
return Json(lst,JsonRequestBehavior.AllowGet);
}

And for no good reason, you get no results when you try to search for a contact. All you get is a blank drop down. Why has jQuery UI failed you? Why must javascript code always be so finicky?

The Cause:

For good reason Jquery UI Autocomplete uses JSon for remote data. It looks for a predefined format, and it wants that name to be called “label”. It is case sensitive.

The Solution:

Just change your ActionResult to look like this

public ActionResult QuickSearch(string term)
{
var lst = context.Contacts.Select(xx => new {label= xx.FirstName +” ” + xx.LastName }).Where(xx => xx.label.ToUpper().Contains(term.ToUpper())).ToList();
return Json(lst,JsonRequestBehavior.AllowGet);
}

and you will be golden. Please note I changed FullName to label. Jquery UI Autocomplete is a very nice and useful tool, but it demands to work on it’s own terms. Beyond that I have never had a problem with this wonderful bit of ajax goodness.

ASP.net MVC / How To Fix / JQuery— No comments
29
Mar 12

Written By Steve French

The Digital Tool Factory Blog