L'utilisation d'ajax est très simple,
Je vous recommande d'utiliser le type de données HTML pour cela car vous avez une table dans votre conteneur,
Il existe une documentation api ici => http://api.jquery.com/jQuery.ajax/
Voici une violon que j'ai faite pour vous => http://jsfiddle.net/sijav/kHtuQ/19/ ou http://fiddle.jshell.net/sijav/kHtuQ/19/show/

J'ai mis le code ajax dans une fonction nommée updateClass (url) dont url signifie l'URL à obtenir et il ajoutera le conteneur avec le HTML qu'il obtient =>

 function updateClass(url){ $.ajax({ url: url, dataType: "HTML", error: function(msg){ alert(msg.statusText); return msg; }, success: function(html){ $("#container").html(html); } }); } 

J'ai ajouté un refreshClass qui actualise la classe de conteneur entière, =>

 function refreshClass(){ updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/"); //update the class } 

Et a changé sur le sélecteur de changement au code ci-dessous =>

 var classUpdateI; //stands for our interval updating class $(".class-selector").on("change",function(){ if (classUpdateI!=null)clearInterval(classUpdateI); //If the selector changed clear the interval so the container won't be update on it's own if(this.value == "") return; // if the value is null don't do anything else if(this.value == "allclassnup"){ refreshClass(); //if the value is allclassnup which is stands for All Non-Updating just refresh the whole class } else if(this.value == "allclassup"){ refreshClass(); //if the value is allclassup which is stands for All Updating refresh the whole class and set an interval for thirty second (look for 30*1000) classUpdateI = setInterval(refreshClass,30*1000); } else //else then it's a simple class value, just simply update the current class updateClass(this.value); }) 

J'espère que cela aide 😉
EDIT : Edité afin qu'il puisse obtenir une grande table (ne pas le générer!) Et la mise à jour sera mise à jour dans un intervalle de 30 secondes
AnotherEDIT : Croyez-le ou non, j'ai fait toute votre question!
FIDDLE DE TRAVAIL: http://jsfiddle.net/sijav/kHtuQ/39/ ou http://fiddle.jshell.net/sijav/kHtuQ/39/show/
1 c'est parce que cela n'a été fait que pour le dernier html, pour le nouveau, nous devrions le refaire! Alors mettez la fonction entière $('tr').click() dans une autre fonction et appelez-la lorsque cela est nécessaire.
– Voulez-vous que cela fonctionne pleinement? C'est un peu compliqué, mais ça peut fonctionner avec un peu de changement dans les codes! Que je vais vous montrer, d'accord, voici l'algurithme que nous devrions mettre la classe actuelle sur le changement de sélecteur de classe pour le cookie, puis nous pouvons le lire chaque fois que nous actualisons ou rechargons la page et posons la classe sélectionnée et ainsi de suite …
Mais dans la conception de code ici, je l'ai fait pour fonctionner,
D'abord, j'ai fait une variable globale appelée FirstTimeInit = true; Juste pour être sûr si nous sommes sur la première fois que vous chargez ou pas, puis je place la boucle for qui fait apparaître les choses sur la page chargée dans une fonction appelée selectSelectedClass , pourquoi? Parce que nous devons l'appeler plusieurs fois, Troisièmement, j'ai ajouté une déclaration si pour être sûr que nous pouvons lire les cookies, puis modifier les choses en surbrillance et la classe actuelle, voici le code:

 if(readCookie("CurrentClass")) //if we can read coockie $(".class-selector").val(readCookie("CurrentClass")).change(); //change it's value to current cookie and trigger the change function else{ // else selectSelectedClass(); //select those which was highlighted before trClick(); //make things clickable FirstTimeInit = false; //and turn of the first time init } 

Ensuite, ajouter un cookie de création sur la valeur du sélecteur change => createCookie("CurrentClass",$(".class-selector").val(),1);
Et finalement changer le succès sur l'obtention de Ajax à cette

  success: function(html){ $("#container").html(html + '<a id="KEY"></a>'); //the html container changer with adding extra id , I'll explain it later it's for your second question if(FirstTimeInit){ //if it is First Time then selectSelectedClass(); //highlight which was highlighted after put the correct html FirstTimeInit = false; // turn of the first time init } else //else for (var i=0;i<($("table").children().length);i++){ if(readCookie(i)) eraseCookie(i); //erase every cookie that has been before because the table is now changed and we're going on another table so old cookie won't matter } trClick(); //make things selectable! } 

De même pour que je n'arrive pas à effacer, j'ai changé le cours de rafraîchissement pour que le premier cours soit défini lorsque la classe sélectionnée est nulle ou nulle car nous avons toutes les classes et avons besoin de ces cookies! Alors voici le code:

 function refreshClass(){ if(readCookie("CurrentClass")=="allclassnup"||readCookie("CurrentClass")=="allclassup"||readCookie("CurrentClass")==null) FirstTimeInit = true; updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/"); } 

2 <a id="TOP"></a> doit être avant le conteneur, le <a id="KEY"></a> doit être généré à la fin du conteneur après avoir mis html sur le conteneur. Donc $("#container").html(html + '<a id="KEY"></a>');

3 Le bouton Suivant et Précédent a été conçu pour un design antérieur non-ajax. Il a maintenant besoin d'une solution différente! Voir ces codes simples par exemple

 $("#PreviousClass").click(function(){//on prev click $(".class-selector").val($(".class-selector option:selected").prev().val()).change() //change the value to the prev on and trigger the change }); $("#NextClass").click(function () {//on next click $(".class-selector").val($(".class-selector option:selected").next().val()).change() //change the value to the prev on and trigger the change }); 

4 Oui Il est possible que vous deviez changer votre clé vers le haut et vers le bas à ces codes et que vous êtes prêt à aller =>

 currentClass=0; $("a.TOPJS").click(function () { if(currentClass>0){ currentClass-- scrollToAnchor('CLASS'+currentClass); } }); $("a.KEYJS").click(function () { if($("a[id='CLASS" + currentClass + "']")[0]!=undefined){ currentClass++ scrollToAnchor('CLASS'+currentClass); } else scrollToAnchor('CLASSMAX'); }); 

Godd Luck

Une autre demande EDIT: (espérons que ce sera le dernier!)
Working Fiddle : http://jsfiddle.net/sijav/kHtuQ/42/ ou http://fiddle.jshell.net/sijav/kHtuQ/42/show/
D'accord, comme vous n'auriez pas aimé la classe de changement lors du rafraîchissement à un qui était là-dedans, j'ai supprimé cela, et mieux j'ai ajouté certains codes pour avoir des classes dans les cookies, car les cookies ne sont pas des arbres, il existe des conditions La classe est lue à partir du dernier caractère du sélecteur de classe, assurez-vous d'avoir le numéro de classe au dernier caractère comme -> Class number ***5*** le numéro 5 sera lu pour le sélecteur de classe!
EDIT : optimiser la classe à la prochaine et prévoir voir http://jsfiddle.net/sijav/kHtuQ/46/
EDIT : selon le commentaire demandé,
C'est ce que j'essaie de vous dire, parfois la démonstration montre sur jsfiddle.net, parfois elle montre sur fiddle.jshell.net, ce sont des domaines différents et vous ne pouvez pas obtenir le html à partir de différents domaines.
1) Vous ne pouvez mettre la fonction que dans l'intervalle ou simplement créer une autre fonction et appeler la manière appropriée comme ceci =>

 classUpdateI = setInterval(function(){updateClass(this.value,parseInt(a.charAt(a.length-1),10));},30*1000); 

2) Manques? Je ne peux pas trouver votre deuxième question!
3) Eh bien, … trclick doit changer … à =>

 function trClick(tIndex){ //tIndex would be classnumber from now on if (tIndex == -1){ //if it is all updating or all non updating $("tr").click(function(){ //do the previous do $(this).toggleClass('selected').siblings().removeClass('selected'); if(readCookie($(this).parent().index("tbody"))){ if(readCookie($(this).parent().index("tbody"))==$(this).index()) eraseCookie($(this).parent().index("tbody")); else{ eraseCookie($(this).parent().index("tbody")); createCookie($(this).parent().index("tbody"),$(this).index(),1); } } else createCookie($(this).parent().index("tbody"),$(this).index(),1); }); } else{ //else $("tr").click(function(){ //on click $(this).toggleClass('selected').siblings().removeClass('selected');//do the toggle like before if(readCookie(tIndex)){ //if you can read the CLASS cookie, not the current index of table because our table has only one row if(readCookie(tIndex)==$(this).index()) //as before if we selecting it again eraseCookie(tIndex); //just erase the cookie else{ //else eraseCookie(tIndex); //select the new one createCookie(tIndex,$(this).index(),1); } } else createCookie(tIndex,$(this).index(),1); //else if we can't read it, just make it! }); } } 

Et lorsque nous appelons le succès d'Ajax, nous devrions l'appeler avec classNumber => trClick(classNumber);
Dernier violon de travail: http://jsfiddle.net/sijav/kHtuQ/53/ ou http://fiddle.jshell.net/sijav/kHtuQ/53/show/

Bonne chance

Honnêtement, j'ai du mal avec le code que vous avez posté, surtout parce que je ne comprends pas l'exemple JSON. Si vous $.ajax HTML plat comme valeurs JSON, il est plus logique de simplement $.ajax le code HTML au DOM plutôt que le codage JSON, l'analyse et l'insertion. Cela dit, je vais supposer que le JSON n'était pas un exemple réaliste et qu'il prendra plus de la forme:

{ class_name: "Class 1", description: "Blah Blah Blah" }

Compte tenu de cette hypothèse, cet exemple bien documenté, mais non testé, devrait vous indiquer la bonne direction. Essentiellement, je fais ce qui suit:

• Définir un modèle HTML
• Créez une fonction de modélisation simple pour transposer les valeurs JSON dans le modèle HTML
• Configurez un intervalle pour interroger le serveur pour de nouvelles données à l'aide de setInterval appelant une fonction qui passe un horodatage de la dernière fois que nous avons demandé à votre JSON générant le script côté serveur à l'aide de getJSON

Voici mon exemple, faites-le moi savoir si vous avez des questions.

 <script> // I wrapped this in a self-invoking anonymous function to prevent adding new global variables (function(){ var SECONDS_TO_POLL = 3 , $parent_node = $('#node-to-append-to') , last_timestamp = null // this will be a timestamp passed to the server , template = '<table id="gradient-style"> \ <tbody> \ <thead> \ <tr> <th scope="col"><a id="{ident}" optionname="{class_name}"></a>Class</th> \ </tr> \ </thead> \ <tr><td>{class_name}</td></tr> \ </tbody> \ <tfoot> \ <tr> \ <th class="alt" colspan="34" scope="col"><a id="KEY"></a><img class="headimager" src="{image}" /></th> \ </tr> \ <tr> \ <td colspan="34"><em><b>Data</b> - Test</em></td> \ </tr> \ </tfoot> \ </table>'; /** * simple templating function * @param template String template using bracket vars (eg <h1>{message}</h1>) * @param values Object literal (eg {message: "Hello"}) * @return Rendered HTML template */ var render_template = function(template, values) { values = values || {}; return template.replace(/{([^{}]*)}/g, function(bracketed, clean){ var object_value = values[clean]; return ['string', 'number'].indexOf((typeof object_value)) > -1 ? object_value : bracketed; }); }; // this is our polling function, will retrieve the JSON from the server, convert to HTML using template and render to the DOM var poller = function(){ // load the JSON and pass a GET var telling the server what timestamp to query from (eg WHERE data.timestamp > last_timestamp) $.getJSON('/path/to/json?last_retrieved='+last_timestamp, function(data){ // render the new data into our HTML template var html = render_template(template, data); // append the result to the parent DOM node $parent_node.append(html); }) // get a current timestamp so that we can limit the server results to those last_timestamp = new Date().getTime(); } // retrieve new results every N seconds setInterval(poller, SECONDS_TO_POLL*1000); })() </script> 

De plus, juste pour mettre un coup de tête sur ceci, si vous venez de retourner le HTML à partir du serveur, vous pouvez (pour la plupart) simplement remplacer $.getJSON par $.get , renoncer à tous les modèles de rendu côté client et Ajoutez simplement la réponse au DOM

 (function(){ var SECONDS_TO_POLL = 3 , $parent_node = $('#node-to-append-to') , last_timestamp = null // this will be a timestamp passed to the server // this is our polling function, will retrieve the HTML from the server and render to the DOM var poller = function(){ // load the HTML pass a GET var telling the server what timestamp to query from (eg WHERE data.timestamp > last_timestamp) $.get('/path/to/server?last_retrieved='+last_timestamp, function(html){ // append the result to the parent DOM node $parent_node.append(html); }) // get a current timestamp so that we can limit the server results to those last_timestamp = new Date().getTime(); } // retrieve new results every N seconds setInterval(poller, SECONDS_TO_POLL*1000); })() 

La meilleure façon de résoudre votre problème est d'utiliser une bibliothèque de reliure telle que le knock-out. Avec vous, vous séparez vos données et votre vue et ne vous inquiétez que de la mise à jour des données, la vue sera mise à jour automatiquement. C'est ce à quoi vous semblez en train de lutter.

C'est pourquoi j'ai fait un petit échantillon en générant une liste et en mettant à jour les données en recherchant constamment (en utilisant un faux service qui renvoie toujours les mêmes données qui changent aléatoirement).

Voici l'exemple que j'ai fait en utilisant knock-out: S'il vous plaît regardez la page de documentation knock-out: http://knockoutjs.com/documentation/introduction.html

HTML: définissez une table simple avec l'en-tête et le contenu

 <table style="width: 100%" border="1"> <thead> <tr> <td> <p><b>Classes</b> </p> </td>http://jsfiddle.net/yBat5/#fork <td> <p><b>Childs</b> </p> </td> </tr> </thead> <tbody data-bind="foreach: Classes"> <tr> <td> <p data-bind=" text: Class"></p> </td> <td> <p data-bind=" text: Child"></p> </td> </tr> </tbody> </table> 

JavaScript:

 $(function () { // define a ViewModel for your data function ViewModel() { this.Classes = ko.observableArray([{ "Class": "test", "Child": "Max" }, { "Class": "test2", "Child": "Walter" }]); } var vm = new ViewModel(), dummyData = []; // create a lot of dummy data sets for (var i = 0; i < 1000; i++) { dummyData.push({ "Class": "test " + i, "Child": "Child" + i }) } // constantly poll for new data // JS fiddle implements a simple echo service, which we can use // to simulate data changes we change a rendon number function poll() { $.ajax({ "url": "\/echo\/json\/", "type": "POST", "data": { "json": JSON.stringify(dummyData), "deley": 3 }, "success": function (data) { vm.Classes(data); // poll again (3 seconds so we see how fast the update is) setTimeout(poll, 300); // change a random entry to see that data changes var randomnumber=Math.floor(Math.random()*1000); dummyData[randomnumber].Child = "Child" +randomnumber +" changed" } }); } poll(); // apply it to the page, knocout now does the binding for you ko.applyBindings(vm); }); 

Fiddle: http://jsfiddle.net/yBat5/3/