serializeJSON ignoring <select>

[gjdevlin]

I'm kind of puzzled - I've created a simple select in MVC as follows:
<%:Html.DropDownList("PersonJobDescription", new SelectListItem[] {
new SelectListItem { Text = null, Value = null },
new SelectListItem { Text = "Administrator", Value = "Administrator" },
new SelectListItem { Text = "Nurse", Value = "Nurse" },
new SelectListItem { Text = "Teacher", Value = "Teacher" },
new SelectListItem { Text = "Secretary", Value = "Secretary" },
new SelectListItem { Text = "Health Aide/UAP", Value = "Health Aide/UAP" },
new SelectListItem { Text = "Other", Value = "Other" }
})%>

The name "PersonJobDescription" is rendered correctly in HTML. However upon using the following:

var formData = $("#myForm").serializeJSON();
var jsonstring = JSON.stringify(formData);

Everything else is scooped up into json nicely but the selector "PersonJobDescription" is ignored even though it has a name property being rendered. I also tinkered with Selected=true which is rendered as Selected="selected" it is still being ignored.
Thoughts?

[marioizquierdo]

You should use the rendered HTML in the example, since serializeJSON only understands about rendered HTML.

But it seems like the first selectListItem in your list has Text and Value null. That will probably render into the first select option to be empty, which will filter it out from the serialized data.

I would try to select something else before running var formData = $("#myForm").serializeJSON();. Try to select something and then paste those lines in the console, you should see the selected option.
Or, just do it with jQuery:

$('#myForm select option:eq(2)').prop('selected', true);
var formData = $("#myForm").serializeJSON();
var jsonstring = JSON.stringify(formData);

[gjdevlin]

Thanks- I tried this on change...

$('#PersonJobDescription option').each(function () {
var $this = $(this); // cache this jQuery object to
avoid overhead

                if ($this.val() == jobDesc) { // if this option's value

is equal to our value
alert("hi");
$this.prop('selected', true); // select this option
return false; // break the loop, no need to look
further
}
});

still no go...

On Tue, Aug 4, 2015 at 2:57 PM, Mario Izquierdo notifications@github.com
wrote:

You should use the rendered HTML in the example, since serializeJSON only
understands about rendered HTML.

But it seems like the first selectListItem in your list has Text and
Value null. That will probably render into the first select option to be
empty, which will filter it out from the serialized data.

I would try to select something else before running var formData =
$("#myForm").serializeJSON();. Try to select something and then paste
those lines in the console, you should see the selected option.
Or, just do it with jQuery:

$(#myForm select option:eq(2)').prop('selected', true);var formData = $("#myForm").serializeJSON();var jsonstring = JSON.stringify(formData);

—
Reply to this email directly or view it on GitHub
#45 (comment)
.

cheers,

Glenn

https://www.facebook.com/glenn.devlin
http://www.amazon.com/dp/B00H4REDK0

[marioizquierdo]

Please show the actual HTML. And the serializeJSON call, it should be clear what's going on from there.

[gjdevlin]

Here's what i did to resolve it:

var formData =
$("#myForm").find('input[name!=__RequestVerificationToken][name!=DateOfReport][name!=SurveyDetailGuid][name!=Seq],
select, textarea').serializeJSON();

Basically, I want it to ignore the request verificationtoken,
dateofreport,surveydetailguid and seq fields.

next, by using "select, textarea' it starting scooping up the selected item
in select. So that works.

Next I used JSON.stringify and we are good to go.

thanks! Very nice plug in and good job, too!

On Wed, Aug 5, 2015 at 3:10 PM, Mario Izquierdo notifications@github.com
wrote:

Please show the actual HTML. And the serializeJSON call, it should be
clear what's going on from there.

—
Reply to this email directly or view it on GitHub
#45 (comment)
.

cheers,

Glenn

https://www.facebook.com/glenn.devlin
http://www.amazon.com/dp/B00H4REDK0

[marioizquierdo]

Glad you solved it.
For reference, yes, you can filter fields using plain jQuery before calling serializeJSON, just like any other jQuery plugin that works with a set of jQuery elements.