Come si usa $ ('documento'). Ready (function()) in jQuery?

Ho un pezzo di codice che funziona perfettamente in IE, ma non funziona in Firefox. Penso che il problema è che non sono stato in grado di implementare $('document').ready(function). La struttura del mio json è come [{"options": "smart_exp"}, {"options": "user_intf"}, {"options": "blahblah"}]. Sarò molto grato se qualcuno vedrà il mio codice & aiutarmi a implementarlo correttamente. Ecco il mio codice:

<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>

fonte

2010-10-21 XCeptable

OH OK, grazie per indicare, in realtà non sapevo che devo accettare anche per il riconoscimento ..... – XCeptable

La sua non è qualcosa di stupido, come il modo in cui si sta impostando la frutta 'opzioni con document.form1.fruits.options [i] è?Mi chiedo solo se questo è ciò che non piace a firefox piuttosto che le parti ajax/onload. Se tieni premuto un avviso poco prima che venga attivato? È un buon modo di testare. Oppure installa firebug e controlla gli errori nella console javascript. – Chris

firebug dice sempre "errore di sintassi" e "'un' indefinito ......" molte volte.Per l'errore di sintassi, il suo puntamento sulla chiusura di parentesi graffe e parentesi. Ho controllato molte volte ma non ho trovato alcuna parentesi graffa o parentesi mancata o mancata. Anche U può vederlo. Un'altra cosa è se il suo errore di sintassi, piuttosto che il motivo per cui è in esecuzione in ie. – XCeptable

Basta eseguire $(document).ready(function() {doStuff}). Questo verrà eseguito automaticamente quando il documento è pronto.

È consigliabile, almeno secondo me, che non si inseriscano eventi nello stesso codice HTML. In questo modo si separa la struttura di un documento html dal suo comportamento. Aggiungi invece eventi nella funzione $ (documento) .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: ho provato con il seguente e deriso l'oggetto JSON quanto non riesco a fare quella chiamata me stesso.

<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>

fonte

2010-10-21 21:26:59 shoebox639

onload no? :-) –

Touche, chiarirò. – shoebox639

ora c'è una confusione. Da queste risposte ora mi sembra 2 che ci sia solo $ (document) .ready (function() deve essere usato come funzione di livello superiore nello script, all'interno del quale è usato $ .getJson. funzione di livello e al suo interno devo definire un'altra funzione (come quella che definisco preLoad()) che implementerà $ .getJson e questa funzione verrà chiamata come l'ho chiamata con l'evento onLoad. Puoi gentilmente rispondermi al riguardo. – XCeptable

Versione corta (suggerita da meeger): non utilizzare virgolette singole attorno al documento.

document è una variabile fornita con JavaScript (almeno nel contesto del browser). Invece, prova quanto segue per la linea pertinente.

$(document).ready(function() {

Si potrà anche prendere l'attributo onLoad fuori del tag body, il resto verrà eseguito due volte.

fonte

2010-10-21 21:26:51

Per riepilogare, non utilizzare le virgolette singole su 'documento'. – meagar

@some L'uso di virgolette non era in discussione; potresti anche aver detto "non usare parentesi quadre o segni di dollaro o punti o virgole attorno a' documento' " – meagar

Eccolo in tutto il suo splendore. La stenografia, versione impressionante:

AGGIORNATO

<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>

Naturalmente, io non so che cosa la vostra struttura JSON è, quindi potrebbe essere necessario giocare con la sezione di aggiunta del codice.

Non ci dovrebbero essere motivi per cui quanto sopra non funzionerebbe.

fonte

2010-10-21 21:40:52 Stephen

preferisco usa '$ .ready (funzione)' dato che è leggermente meno magicamente chiamato. [jQuery.ready] (http://api.jquery.com/ready/). Solo per curiosità, perché no '$ ('

Rispetto la tua posizione, ma non chiamerei questa magia. Beh, in realtà lo farei, ma per ragioni diverse.;) La ragione per il' document.createElement() 'è perché è più veloce della versione '$ ('

@Stephen no, non funziona. U dico che devo lasciare cadere significa che dovrebbe essere solo un etichetta corpo normale . La struttura del mio json è come [{"options": "smart_exp"}, {"options": "user_intf"}, {"options": "blahblah"}]. – XCeptable

Non hai bisogno di virgolette sul documento. Una volta che la pagina è stata completamente caricata, inizierà l'esecuzione tutto quello che è stato definito in pronto()

$(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); 
    }); 
    }); 
});

fonte

2010-10-22 14:04:51

non funziona anche in ie ... – XCeptable

Prova questa, i dati JSON dovrebbero essere in questo formato:

[{'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('')); 
    }); 
});

Si prega di notare che ci possono essere un problema di codifica/fuga qui. Assicurati di uscire correttamente dal testo dal lato server. htmlentities, htmlspecialchars può aiutarti in questo.

Questo dovrebbe funzionare nella maggior parte dei browser

fonte

2010-10-22 14:19:17 jerjer

non funziona anche in ie ... – XCeptable

L'ho provato, anche non eseguito in cioè con codice ora corretto. – XCeptable

Come si usa $ ('documento'). Ready (function()) in jQuery?

risposta

Problemi correlati