jQuery html attribute not working in IE

2019-01-09 03:29发布

站内文章 / jQuery

12 0

叛逆

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am using country and state dropdowns in my form. Whenever the user selects the country in the dropdown, the respective states of the country will populate in the states dropdown. I am populating the states in the dropdown using AJAX call. The problem is that the states get populated in Mozilla but it doesn't work in IE. I guess there is some problem in jQuery while loading the states in the states dropdown. The jQuery code i am using is

$('select#edit-country').change(function(e) {

    $.getJSON("loadContactUsStates",{id: $(this).val(), ajax: 'true'}, function(j){
        var options = '';

        for (var i = 0; i < j.length; i++) { 
            options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';

        }

    <!-----I guess the problem is with the below line------------------>
       $("select#edit-state").html(options);

    })//end json

});

回答1:

Try using append instead of the html method as detailed in this post.

edit

Actually, I've just run into this problem myself. For me the answer was to call empty first, then append which has the same effect (I think?) as using the html method.

回答2:

Also (in my case) check if you have valid html, I had mismatched tags, and it worked in firefox and didn't in IE(6-8)

回答3:

add to .ajax options

cache: false,

回答4:

This is what worked for me: (I tested on IE7 - IE9, and Chrome)

It looks like the trick for IE is to use a DIV wrapper

Original html:

<div  id="dynamicMenu"></div>

jQuery script:

$.ajax({

            url: "/myapp/myajaxUrl.jsp",
            type: "GET",
            dataType: "html",
            async: false,
            success: function(msg) {
                $("#dynamicMenu").html(msg);
            });

Where msg is something like:

<TABLE>
<TBODY>
 <TR>
  <TD><LABEL for="dropdown1">OS type:</LABEL></TD>
  <TD>
   <SELECT id="dropdown1">
    <OPTION selected value="">Select OS</OPTION>
    <OPTION value="WIN">Windoze</OPTION>
    <OPTION value="UX">Unix</OPTION>
    <OPTION value="LX">Linux</OPTION>
   </SELECT>
  </TD>
 </TR>
</TBODY>
</TABLE>

I tried .empty() .html() to no avail but the above worked great!

回答5:

The following method solved the problem for me:

$('Element ID OR Class').empty().html(string);

First use empty() & then set html using html()

回答6:

If you are parsing xml using jquery, and you need html() in IE, try this:

var content = ($.browser.msie) ? $(this).context.xml : $(this).html();

This solved my problem. I hope it will help someone too.

Greetings.

回答7:

After hours of frustration I realized that IE does not support jquery attribute functions for html5 elements other than div. I was trying to do this:

success: function (response, textStatus, XMLHttpRequest) {
    $response = $(response.replace(/\t/g, " "));
    $responseHTML = $response.find("#pageContainer").html();
    $container.html($responseHTML);

For this element:

<nav id="pageContainer" class="content">
</nav>

By changing it to this it solved the problem:

<nav>
    <div id="pageContainer" class="content">
    </div>
</nav>

回答8:

I just ran into the same issue and none of the suggested fixes helped. Turns out tab characters in the passed string were the cause. As soon as I removed all of them, both html() and append() worked just fine. Guess no formatted strings for IE.. hmpf.

回答9:

I had the same problem after receiving an AJAX HTML-Request with the function jQuery.ajax() and then trying to parse the result with jQuery( html_result_data ). The solution was to strip the header and all tabs and "returns" in the html_result_data like this:

success: function( data ) {
   // God this is ugly
   data = data.split("<body>")[1].split("</body>")[0];
   data = data.split("\t").join("").split("\r").join("").split("\n").join("");                      
   data = jQuery( data );
   ...
}

回答10:

Jukums' comment led me to try turning off ColdFusion debug output and then .html() worked for me in IE8. To force debug output off:

<cfsetting showdebugoutput="No">

回答11:

In my case it was so easy like change the jquery version. I was using jquery-1.3.2 and I was add this line

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>

instead jquery-1.3.2 import. Without changing anything in my source code, the .prepend function works perfectly in IE, FF and Chrome.

回答12:

I had the same problem and found that the simplest solution was to use the replaceWith() function.

回答13:

I had a issue on IE using this:

$('#valor_total').html(valor_total);

where id had the same name as the variable passed as a parameter. Changing the id worked well:

$('#div_valor_total').html(valor_total);

回答14:

For me, I could only get it to work by placing my select in a placeholder div, and then write via .html(); the whole statement to that div. Works completely.

回答15:

Also note that if you use a tagName prefix in your selector it is slower than just using the id.

In your case just use $("#edit-state").append(options)

回答16:

Check that any JavaScript in the returned data is syntactically correct.

I had a JSON options object that had a trailing comma, and that was enough for IE to refuse to run it.

回答17:

On my case too the returned data should be syntactically correct. I had some unmatched tags like , unclosed tags

or .. etc

check if all data is correct

if this is an ajax request, then quick way for debug would be to add a text area outside the area you populate and populate the text area with the returned data. then check that data for inconsistencies. Jquery.html is working fine with IE

回答18:

In IE8 go to tools-> internet options-> then select the advanced tab. Then click reset to reset all internet explorer settings.

I thought I had a problem with my code but the problem was IE8. This worked a treat.

Good luck and hope this helps.

回答19:

Are you using 1.4.2? There's an issue with the cleanData method using invalid cache entries in IE. The bug and corresponding fix can be found here. This affects calls to .html()

回答20:

I have encountered an same problem when html does not work in IE.

I believe it does not work if you have invalid html

Example:

For my case i am using an div without a close tag. So invalid html might be a culprit for IE

回答21:

As the solution is not mentioned here: I just had the same problem in IE8 when activating compatibility mode. The solution was to pass in a jQuery object to the .html() function like this:

$("select#edit-state").html($(options));

This was not a problem if the options were a jQuery object and also built as one. But in the above example, this should do the trick - at least for me it did.

回答22:

In my case, I've had to change the selector that was a <figure> tag. This is what I had:

HTML:

<figure id="imagen">...</figure>

JS (does not work):

$("#imagen").html(res);

And I had to replace with:

HTML:

<div id="imagen">...</div>

JS (it works!):

$("#imagen").html(res);

回答23:

In my case the problem was with the way I was commenting out my javascript in the data being loaded.

// Works fine

/* Works fine */

<!-- This causes a syntax error in IE -->

I've never had any problems commenting out like that in IE before, only when using ajax to load it into an existing page. No problem with th eother browsers either.

回答24:

Adding the no cache attribute to the controller fixed this for me.

Copied from this answer: https://stackoverflow.com/a/12948321/1389589

标签： jquery html forms

叛逆