1

I'm using ajax to render a MVC partial view.

This code works in all browsers except IE:

    // Load the Product Selection Area of the survey
    $.ajax({
        type: 'POST',
        url: '/Evaluation/_SurveyQuestions/',
        data: {
            productTypeId: productTypeId,
            productIdsList: productIdsList,
            languageId: languageId,
            isLastPage: isLastPage
        }
    }).done(function(html) {
        $('#surveyQuestionsArea').empty().html(html);
    }).error(function() {
        toastr.error("Error Loading Questions");
    });

The Div #surveyQuestionsArea gets filled with the all of the HTML but the javascript on the page won't execute in IE. It works on all other browsers.

I get an Error:

SCRIPT1003: Expected ':'
jquery-2.2.4.min.js (2,2640)

The only questions marks in my HTML are at the end of sentences in text. I've removed them and the problem remains.

UPDATED: The following script is at the bottom on my partial view and nether break point get executed:

<script type="text/javascript">
    debugger;

    $(document).ready(function() {
        debugger;
    });
</script>

if I add this script to the top of my partial view. This break point does get executed:

<script type="text/javascript">
    debugger;
</script>

Any suggestions would be greatly appreciated.

5
  • do you mean that the HTML you load into #surveyQuestionsArea contains javascript and that will not fire? Commented Feb 8, 2017 at 18:50
  • Yes that is correct. Commented Feb 8, 2017 at 18:52
  • Load a non-minified version of jquery.js and see if you still get the error. If you still do, you'll get a better idea of what's breaking in IE. If not you can start looking at the minified script. Commented Feb 8, 2017 at 18:55
  • 1
    can you include a sample of some of that javascript in your question that is not executing? Commented Feb 8, 2017 at 18:56
  • It might make more sense to pull the javascript out of your incoming html and conditionally run it from a function in your existing javascript code Commented Feb 8, 2017 at 20:42

1 Answer 1

3

I'm answering my own question here in hopes to help someone else that may encounter this.

So my Javascript had an ajax call, here is the code:

        // Load the Product Selection Area of the survey
        $.ajax({
            type: 'POST',
            url: '/Evaluation/UpdateNumericResult/',
            data: {
                evaluationProductNumericId,
                questionId,
                results,
                evaluationProductId,
                previousResults
            }
        }).done(function() {

        }).error(function() {
            toastr.error("Error Saving Results");
        }).always(function() {

        });

If you notice the data json object I pass in the same variables names as the inputs to my partial view. This works on all browsers except IE (I didn't try Edge)

The FIX is to reformat the ajax call to:

        // Load the Product Selection Area of the survey
        $.ajax({
            type: 'POST',
            url: '/Evaluation/UpdateNumericResult/',
            data: {
                evaluationProductNumericId: evaluationProductNumericId,
                questionId: questionId,
                results: results,
                evaluationProductId: evaluationProductId,
                previousResults: previousResults
            }
        }).done(function() {

        }).error(function() {
            toastr.error("Error Saving Results");
        }).always(function() {

        });

Notice the colon in the DATA json object is the missing one in the error above.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.