ansaurus

Question

Internet explorer only executing function inside jQuery ajax success response once even though there are three requests

Answer 1

A:

Have you tied ".live" instead of ".bind"?

WVDominick 2010-02-16 17:36:47

Nope, didn't work, cheers for the suggestion.

2010-02-17 09:17:47

Answer 2

A:

I just test the script and the only problem I had is that the function "load" has a comma in the last parameter, It works fine in IE6 and IE7.

$(putsnippethere).load(snippeturl, function (responseText, textStatus, XMLHttpRequest, )

Update all script:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
  <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; 
    <script type="text/javascript" src="js/colorpicker.js"></script>
  <script type="text/javascript" src="js/eye.js"></script>
  <script type="text/javascript" src="js/utils.js"></script>
  <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
    <title>load</title>
</head>
<body>

    <div id="formone"></div>
    <div id="formtwo"></div>
    <div id="formthree"></div>

    <input id="i1" class="pickcolor" type="text" /><br />
    <input id="i2" class="pickcolor" type="text" /><br />
    <input id="i3" class="pickcolor" type="text" /><br />

    <pre style="text-align:left;width:600px;" id="mydebug"></pre>

</body>
</html>
<script>
$(function() {

    addDebug = function(text){
        $("#mydebug").append(text+"<br />");
    }

  function ajax_form(putloadingboxhere, putsnippethere, snippeturl) {

    $(putsnippethere).load(snippeturl, function (responseText, textStatus, XMLHttpRequest) {
      if (textStatus == "success") {

          addDebug(putsnippethere  + " :: One");

          var lstElPickcolor = $("input.pickcolor");

          addDebug(putsnippethere  + " :: Length inputs : " + lstElPickcolor.length);

          $.each(lstElPickcolor, function(i, val){

              addDebug(putsnippethere  + " :: add ColorPicker for input.id=" + $(val).attr('id'));
                        $(val).ColorPicker({

                  onShow: function (colpkr) {
                      $(colpkr).fadeIn(500);
                      return false;
                  },

                  onSubmit: function(hsb, hex, rgb, xel) {
                      $(xel).val(hex);
                      $(xel).ColorPickerHide();
                      $(xel).siblings('.colorpreview').css('background-color', '#' + hex);
                  },

                  onBeforeShow: function () {
                      $(this).ColorPickerSetColor(this.value);
                  }
              });

              addDebug(putsnippethere  + " :: unbind event keyup for input.id=" + $(val).attr('id'));
              $(val).unbind('keyup');

              addDebug(putsnippethere  + " :: bind event keyup for input.id=" + $(val).attr('id'));
              $(val).bind('keyup', function(){
                  $(this).ColorPickerSetColor(this.value);
              });               

          });

          addDebug(putsnippethere  + " :: Two");
          addDebug(" ");
      }

      if (textStatus == "error") {
          // Show error message
      }

    });
  }

  ajax_form('tab_box', '#formone', 'snippet_one.htm #snippet');
  ajax_form('tab_box', '#formtwo', 'snippet_two_copy.htm #snippet');
  ajax_form('tab_box', '#formthree', 'snippet_three.htm #snippet');

});
</script>

andres descalzo 2010-02-16 20:15:30

Hi Andres,Thanks for your help, I removed that comma, but it still didn't work. Interestingly enough though, when I copied and tested your code above, I got the same thing happen in Firefox as IE - only the alert 'One' appears three times. Can you think of a reason for that?

2010-02-17 09:17:31

2010-02-17 11:45:24

Oh, hang on, the input.pickcolor are bought in via the ajax - they are in a form that is a snippet bought into the page by ajax.

2010-02-17 13:42:02

please try this and see the results

andres descalzo 2010-02-17 14:22:05

It still has the same results - works fine in FF in both the input fields that are bought in with the ajax and the input fields that are native to the page and in IE neither work - Just get one, one, one alerted. 'Error: Object doesn't support this property or method.' is shown after each alert in IE.

2010-02-17 14:35:15

It seems to be choking on the input...

2010-02-17 14:48:47

ansaurus

tags:

views:

answers:

Internet explorer only executing function inside jQuery ajax success response once even though there are three requests

related questions