Search code examples
jqueryajaximagejquery-forms-plugin

IE7 giving 403 Error when dynamically loading image

When submitting a form using jQuery and AJAX, I am getting a 403 error on my returned HTML that contains an IMGtag.

Here's the code that I'm using to submit the form:

// Add a new personality to the quiz
    $('form#personality_editor').submit(function(e) {

        e.preventDefault();

            // Submit the form with jQuery Form plugin to handle attachments
            $(this).ajaxSubmit({
                dataType: "json",
                resetForm: true,
                beforeSend: function() {
                    // Show the loading spinner
                    $('img#personality_loader').show();
                },
                success: function(add_personality_response) {

                    // Hide the image loader
                    $('img#personality_loader').hide('fast');

                    if (add_personality_response["success"] == "true") {

                        // Create a new personality in the list of personalities
                        $('div#quiz_personalities').append(add_personality_response["personality_html"]);

                            // Add the personality to list of hidden personalities
                            AddRemovePersonality(add_personality_response["personality_id"], "add");

                            // Set the focus on to personality name
                            $('input#new_personality_name').focus();

                            // Show or hide the no personalities notice
                            ShowHideNoPersonalitiesNotice();

                            alert("Success");
                    }

                },
                error: function() {
                    alert("There was an error adding personality");
                }
            });

    });

Here's the full JSON response that I'm getting back from the code:

    {"success":"true","personality_id":191,"personality_name":"Avril Lavigne","personality_image":"191avril.jpg","personality_html":"<div class=\"personality_wrapper\" data-personality-id=\"191\"><img src=\"images\/personalities\/personality_images\/192avril.jpg\" class=\"personality_image_small\" \/><div class=\"personality_info\"><div class=\"personality_name\" title=\"Kjh\">Kjh<\/div><div class=\"personality_options\"><a href=\"#\" class=\"personality_option personality_edit\">Edit<\/a><a href=\"#\" class=\"personality_option personality_delete\">Delete<\/a><\/div><\/div><\/div>"}

It is the personality_html that I am adding to the DOM using the .append() function of jQuery.

This problem is occurring in Internet Explorer, because it is working in Chrome.

The image is uploading fine to my server at the location images/personalities/personality_images/192avril.jpg.

The response that I'm getting back from the page is:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>403 Forbidden</title>
</head><body>
<h1>Forbidden</h1>
<p>You don't have permission to access /&quot;images//personalities//personality_images//192avril.jpg/&quot;
on this server.</p>
</body></html>

Is it something to do with the escaped data being passed from my page? I am using json_encode() before I echo it in response.

Here's the view from the Developer tools in IE:

Developer tools IE

Solution

  • You are most likely trying to parse JSON to a JavaScript object twice.

    Since for the .ajaxSubmit() call you have already designated that the response data type is JSON, jQuery will automatically parse the response into a JavaScript object for you (it would also do this if the response Content-Type is application/json, regardless of whether you had specified dataType or not).

    This means that inside the success callback, add_personality_response1 will already be a JavaScript object. Yet you are trying to $.parseJSON it a second time:

    var add_personality_response = $.parseJSON(add_personality_response1);

    I 'm not quite sure if removing this line will solve the problem immediately, but it's definitely how you have to start.