Как вы используете $ ('document'). Ready (function ()) в jQuery? - PullRequest
Новая
       3

Как вы используете $ ('document'). Ready (function ()) в jQuery?

5 голосов
/ 22 октября 2010

У меня есть кусок кода, который отлично работает в IE, но он не работает в Firefox. Я думаю, что проблема в том, что я не смог реализовать $('document').ready(function). Структура моего json похожа на [{"options": "smart_exp"}, {"options": "user_intf"}, {"options": "blahblah"}]. Я буду очень благодарен, если кто-то увидит мой код и поможет мне правильно его реализовать. Вот мой код: 

<html><head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2
     /jquery.min.js"></script>
     <script type="text/javascript" language="javascript">
     $(document).ready(function() { 
     $.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
     $.each(jsonData, function (i, j) {
     document.form1.fruits.options[i] = new Option(j.options);
     });});
     });
     </script></head>
     <body><form name="form1">
     My favourite fruit is :
     <select name="fruits" id="fruits" /></form></body>
</html>

Ответы [ 5 ]

4 голосов
/ 22 октября 2010

Краткая версия (предложено meeger): не используйте одинарные кавычки вокруг документа.

document - это переменная, которая поставляется с JavaScript (по крайней мере, в контексте браузера).Вместо этого попробуйте следующее для соответствующей строки:

$(document).ready(function() {

Вы также можете удалить атрибут onLoad из тега body, иначе он будет выполняться дважды.

2 голосов
/ 22 октября 2010

Вот оно во всей красе.Сокращенная, потрясающая версия:

ОБНОВЛЕНО 

<script type="text/javascript" language="javascript">
    $(function() { 
        $.getJSON("http://localhost/conn_mysql.php", function (jsonData) {
            var cacheFruits = $('#fruits'),
                cacheOption = $(document.createElement('option'));

            $.each(jsonData, function (i, j) {
                cacheFruits.append(
                    cacheOption.clone().attr('value', j.options).html(j.options)
                );
            });
        });
    });
</script>

Конечно, я не знаю, какова ваша структура JSON, поэтому вам, возможно, придется поиграться сраздел добавления кода.

Не должно быть никаких причин, по которым вышесказанное не будет работать.

2 голосов
/ 22 октября 2010

Просто запустите $(document).ready(function() {doStuff}).Это автоматически запустится, когда документ будет готов.

Лучше, по крайней мере, на мой взгляд, не помещать события в сам html.Таким образом вы отделяете структуру HTML-документа от его поведения.Вместо этого прикрепите события в функцию $ (document) .ready. 

<html>
  <head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script type="text/javascript">
       $(document).ready(function() { 
           $.getJSON("http://localhost/conn_mysql.php", function (jsonData) {
             var selectElem = $('#fruits');

             for(var i = 0; i < jsonData.length; i++) { 
               selectElem.append($('<option>').html(jsonData[i].options));
             }

           });
       });
     </script>
  </head>
  <body>
    <form name="form1">
      My favourite fruit is :
      <select name="fruits" id="fruits" />
    </form>
  </body>
</html>

EDIT: Я проверил следующее и посмеялся над объектом json, так как не могу сделать этот вызов сам.

<html>
  <head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script type="text/javascript">
       $(document).ready(function() {
           var jsonData = JSON.parse('[{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}]');
           var selectElem = $('#fruits');

           for(var i = 0; i < jsonData.length; i++) { 
             selectElem.append($('<option>').html(jsonData[i].options));
           }

       });
     </script>
  </head>
  <body>
    <form name="form1">
      My favourite fruit is :
      <select name="fruits" id="fruits" />
    </form>
  </body>
</html>
0 голосов
/ 22 октября 2010

Попробуйте, ваши данные json должны быть в следующем формате: 

[{'text':'sometext','value':'somevalue'},{'text':'sometext','value':'somevalue'}];


$(document).ready(function() { 
  $(this).getJSON("http://localhost/conn_mysql.php", function (jsonData) {
    var options = [];
    $.each(jsonData, function (i, j) {
      options.push('<option value="' + j.value + '">'  + j.text + '</option>');
    });
    $('#fruits').html( options.join(''));
  });
});

Обратите внимание, что здесь могут быть проблемы с кодировкой / экранированием.Убедитесь, что вы правильно экранировали текст со стороны сервера.htmlentities, htmlspecialchars может помочь вам в этом.

Это должно работать в большинстве браузеров

0 голосов
/ 22 октября 2010

Вам не нужны кавычки вокруг документа. Как только страница полностью загрузится, она начнет выполнять все, что вы определили в ready () 

$(document).ready(function() { 
  $(this).getJSON("http://localhost/conn_mysql.php", function (jsonData) {
    $(this).each(jsonData, function (i, j) {
      document.form1.fruits.options[i] = new Option(j.options);
    });
  });
});
...