[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

IE Issue with jquery.form.js

Posted on 2009-12-17
4
Medium Priority
?
639 Views
Last Modified: 2012-05-08
I have what I think is a pretty basic function going on that fails in IE everytime. The code is below.  The javascript is first, followed by the ajax response.

In IE, the ajaxForm() function doesn't resolve to success, but it does in every other major browser on Windows and Mac.

On IE, the error: function() returns "parseerror" from the textStatus variable.

What can I change to fix this?
$('form#insert_person_modal').ajaxForm({
	dataType: 'json',
	success: function(data, statusText, jqForm){
		handle_error_array(data.error_array, $(jqForm));
		if('insert_id' in data){
			$("div#insert_person_modal_popup").removeShadow().hide();
			$('#teams_rosters_person_id').val(data.insert_id);
		 $('#teams_rosters_person_id_autocompletor').val($('#insert_person_modal_first_name').val() + ' ' + $('#insert_person_modal_last_name').val());
		}
	},
	error: function(XMLHttpRequest, textStatus, errorThrown){
		alert("error thrown " + errorThrown);
		alert("text status " + textStatus);
		alert("Request " + XMLHttpRequest);
	}
});


AJAX request (as JSON):

{"error_array":{"home_association":"The Association you have entered is not a valid option. Please select another Association and try again."}}

Open in new window

0
Comment
Question by:dirknibleck
  • 3
4 Comments
 
LVL 1

Accepted Solution

by:
ValiMihai earned 2000 total points
ID: 26089883
The AJAX response (JSON) may be of correct format, but it is not of the correct content-type.

If your form has the action to "action.php", make sure the first line in action.php is

header("Content-Type: application/json");

If you do not use PHP, but other language, make sure that before sending the JSON output to the browser, you set the Content-Type header to application/json.

Firefox and other smart browsers figure the content type automatically, but internet explorer does not!
0
 
LVL 15

Author Comment

by:dirknibleck
ID: 26109468
I tried this, but still get the parseerror.

Here is the data from the Headers of the response:


Date	Wed, 23 Dec 2009 00:40:48 GMT
Server	Apache/2.2.13 (Unix) mod_ssl/2.2.13 OpenSSL/0.9.7l DAV/2 PHP/5.2.5
X-Powered-By	PHP/5.2.5
Expires	Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control	no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma	no-cache
Content-Length	602
Keep-Alive	timeout=5, max=100
Connection	Keep-Alive
Content-Type	application/json

Open in new window

0
 
LVL 15

Author Comment

by:dirknibleck
ID: 26113024
I've discovered that the problem is not in what the server is returning, but rather in what the server is being sent...

The full jquery code for this page is below.

What is to happen is that an input box in my form called ajax is supposed to be set to 1 when the page loads. This value of 1 is then sent to the server which interprets it as a need to output the json instead of the HTML. If I alert the value of the ajax input after setting it, it returns 1, but if I alert this value in beforeSubmit of the ajaxForm() call, it outputs 0. It is also outputting 0 to the server, but only in IE.

Any thoughts?


//----------------------------------------------------------------------- 
        $(document).ready(function(){ 

                $('input#insert_person_modal_ajax').val(1); 
                        //------------------------------------------------------------------- 
                        // 
                        //------------------------------------------------------------------- 
                        $('form#insert_person_modal').ajaxForm({ 
                                beforeSubmit: function(){ alert($ 
('input#insert_person_modal_ajax').val())}, 
                                dataType: 'json', 
                                success: function(data, statusText, jqForm){ 
                                        handle_error_array(data.error_array, $(jqForm)); 
                                        if('insert_id' in data){ 
                                                $("div#insert_person_modal_popup").removeShadow().hide(); 
                                                $('#teams_rosters_person_id').val(data.insert_id); 
                                                $('#teams_rosters_person_id_autocompletor').val($ 
('#insert_person_modal_first_name').val() + ' ' + $ 
('#insert_person_modal_last_name').val()); 
                                        } 
                                }, 
                                error: function(XMLHttpRequest, textStatus, errorThrown){ 
                                        alert(errorThrown + " " + textStatus + " " + XMLHttpRequest); 
                                } 
                        }); 
                        //------------------------------------------------------------------- 

                        //----------------------------------------------------------------------- 
                        $('a.pop_up_form').live("click", function(event){ 
                                event.preventDefault(); 
                                $(this).parent().removeShadow(); 
                                $(this).parent().hide(); 
                        }); 
                        //----------------------------------------------------------------------- 

                        //------------------------------------------------------------------- 
                        // 

                        //------------------------------------------------------------------- 
                        $("img.add_person_autocomplete_action").click(function(event){ 
                                $("form#insert_person_modal").resetForm(); 
                                $("div#insert_person_modal_popup").css("width", 400).css("top", 
event.pageY - 100).css("left", event.pageX - 100).show().dropShadow 
({left: 0, top: 3, blur: 5}); 
                        }) 

                        //------------------------------------------------------------------- 

                }); 

                //-----------------------------------------------------------------------

Open in new window

0
 
LVL 15

Author Comment

by:dirknibleck
ID: 26114970
I am giving points to ValiMihai because I did not know about the header issue and did not have it in and the script would likely still not be working.

From my last error, I discovered my problem, and it's self-created. What I don't
understand now is why it worked in other browser... :-)

The offender is:

$("img.add_person_autocomplete_action").click(function(event){
          $("form#insert_person_modal").resetForm();
          $("div#insert_person_modal_popup").css("width", 400).css
("top", event.pageY - 100).css("left", event.pageX - 100).show
().dropShadow({left: 0, top: 3, blur: 5});

});

Because I'm resetting the form when I open it, it returns the value of
ajax to 0.
Now I don't understand why FF/Safari/Opera do not retunr the value to
0...
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month19 days, 5 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question