up vote 3 down vote favorite
1

According to documentation:

If html is specified, any embedded JavaScript inside the retrieved data is executed before the HTML is returned as a string. Similarly, script will execute the JavaScript that is pulled back from the server, then return nothing.

How to prevent this? I have js that shall modify the content that is obtained through ajax. Executing it before the html is returned makes no sense as it does not have content to work on (at least in my case).

my code:

function do_ajax(url)
    {
    $.ajax(
        {
        cache: false,
        url : url,
        success: function(response, status, xhr)
            {
            var ct = xhr.getResponseHeader("content-type") || "";
            if (ct.indexOf('script') > -1) {
                try {
                eval(response);
                }
                catch(error) { }
                }
                else
                {
                var edit_dialog = $('<div class="edit_dialog" style="display:hidden"></div>').appendTo('body');
                edit_dialog.html(response);
                edit_dialog.dialog({ modal:true, close: function(event, ui) { $(this).dialog('destroy').remove(); } });
                }

            },
        error:function (xhr, ajaxOptions, thrownError){
                   alert(xhr.status);
                   alert(thrownError);
                }
        });
    }

the script received by ajax is executed twice. First by me in the eval(response), then jquery execute it again (as described in the documentation)

share|improve this question
Do you have an example of your code? – Joey Nov 1 '11 at 10:31
code added above. so, when I receive script it is executed twice. When I comment out the eval(response) it is executed by the jquery – Krzysztof Dk Nov 1 '11 at 14:24
Are you passing GET data within the url? – Joey Nov 1 '11 at 14:29
yes, I pass the GET data with url – Krzysztof Dk Nov 1 '11 at 14:35
What exactly do you mean with 'it does not have content to work on'? Do you mean there are references made the js you are retrieving to elements on the current page? – Joey Nov 1 '11 at 14:54
show 1 more comment

3 Answers

up vote 0 down vote

The documentation states that any embedded Javascript inside the retrieved data will be executed before the HTML is returned as a string. If you want to then alter whatever you have retrieved using your ajax call, you can do so within the succes property:

$.ajax({
  url: "example.html",
  type: "GET",
  dataType: "html",
  succes: function(data){
     // Example: alert(data);
     // Do whatever you want with the returned data using JS or jQuery methods
  }
});
share|improve this answer
When I receive only js (dataType:'js'), and in the success function I do eval of the response, it is executed twice. First by my eval, then by the jquery itself as described in the documentation. similar is with html. – Krzysztof Dk Nov 1 '11 at 14:03
Why would you need to use an ajax call to receive only JS? Also, js is not an allowed datatype. Allowed datatypes are: xml, html, json, jsonp, script or text. – Joey Nov 1 '11 at 14:11
i have one function do_ajax(url) that perform ajax calls. It checks what it receives. when it is a js then it is executed, if html it create jqueryui dialog and put the content in the dialog. – Krzysztof Dk Nov 1 '11 at 14:14
I agree that js is not proper datatype. Just a typo in the post here. I meant dataType:'script' and I can't change the dataType as I don't know what response I will receive. – Krzysztof Dk Nov 1 '11 at 14:16
I don't suggest you use a function like that, as you might lose a lot of data or cause for unwanted behaviour. Instead of calling external javascript methods through ajax, just include them in your code and you can call them whenever you want. Without a work around function like youre describing. – Joey Nov 1 '11 at 14:19
show 1 more comment
up vote 0 down vote

That's one of the really annoying things about jQuery that it executes javascript on response. Other frameworks like MooTools disable script execution from responses unless you specifically set that you want them executed which is a much better approach.

The only way I could figure to prevent scripts being executed is to add a custom dataFilter Its easy enough but I think it should be default and an ajax option to enable script execution if you want it (I've never had a use for it and other frameworks disable by default for security etc.)

Example 

$.ajax('uri',{
    dataFilter: function(data, type)
    {
        type = type || 'text';
        if(type=='html'||type=='text'){
            /*return data.replace(/<script.*>.*?<\/script>/gi, '');*/
            return data.replace(/<script.*?>([\w\W\d\D\s\S\0\n\f\r\t\v\b\B]*?)<\/script>/gi, '');
        }
        return data;
    }
    , success: function(data)
    {
        // whatever
    }
});

** UPDATED ** Needs that crazy regex to cover more script tag instances

NOTE if dataType hasnt been set in options it will be undefined in dataFilter so I just default it to text for the filter - if you remove that line then it will only work if dataType is explicitly set.

share|improve this answer
up vote 0 down vote

Jquery .ajax does not evaluate scripts on return. The scripts are evaluated in this case when you call 

edit_dialog.html(response);

if you don't want to evaluate the scripts before inserting your response in to the DOM, you should be able to do something like:

edit_dialog.html($($.parseHTML(response)));

parseHTML is the key in that by default it removes script tags.

share|improve this answer

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.