Actualiser une partie de la page (div)

92

J'ai un fichier html de base qui est attaché à un programme java. Ce programme java met à jour le contenu d'une partie du fichier HTML chaque fois que la page est actualisée. Je souhaite actualiser uniquement cette partie de la page après chaque intervalle de temps. Je peux placer la partie que je souhaite actualiser dans un div, mais je ne sais pas comment actualiser uniquement le contenu du fichier div. Toute aide serait appréciée. Je vous remercie.

user760220
la source

Réponses:

117

Utilisez Ajax pour cela.

Construisez une fonction qui récupérera la page actuelle via ajax, mais pas la page entière, juste le div en question sur le serveur. Les données seront ensuite (à nouveau via jQuery) placées dans le même div en question et remplaceront l'ancien contenu par un nouveau.

Fonction pertinente:

http://api.jquery.com/load/

par exemple

$('#thisdiv').load(document.URL +  ' #thisdiv');

Notez que le chargement remplace automatiquement le contenu. Veillez à inclure un espace avant le sélecteur d'identifiant.

utilisateur1721135
la source
6
Hé mec, je viens de découvrir qu'il vous manque un espace après le '(deux-points à droite?), Cet exemple n'a pas fonctionné hors de la boîte :-) $ (' # thisdiv '). Load (document.URL +' # thisdiv ');
David Reinberger
16
Cette méthode présente un gros inconvénient. Si vous utilisez ceci et que la partie de la page se recharge, vous ne pouvez pas refaire la même action JQuery / Ajax sans recharger la page entière dans le navigateur. Après le rechargement avec cette méthode, JQuery n'est pas activé / ne fonctionnera plus.
Marcel Wasilewski
2
êtes-vous sûr que nous avons besoin d'un espace avant # tag? J'ai travaillé pour moi si je supprime #tag.
Kurkula
2
@GregHilston voici mon code js $ ('# dashboard_main_content'). Load (document.URL + '#dashboard_content'); et voici mon HTML <div class = "col-lg-12" id = "dashboard_main_content"> <div id = "dashboard_content"> Contenu </div> </div>
Touhami
2
$('#thisdiv').load(document.URL + ' #thisdiv>*')empêche d'en avoir un autre #thisdivà l'intérieur de l'original#thisdiv
Peter
17

Supposons que vous ayez 2 div à l'intérieur de votre fichier html.

<div id="div1">some text</div>
<div id="div2">some other text</div>

Le programme java lui-même ne peut pas mettre à jour le contenu du fichier html car le html est lié au client, tandis que java est lié au back-end.

Vous pouvez cependant communiquer entre le serveur (le back-end) et le client.

Ce dont nous parlons est AJAX, que vous obtenez en utilisant JavaScript, je recommande d'utiliser jQuery qui est une bibliothèque JavaScript commune.

Supposons que vous souhaitiez actualiser la page à chaque intervalle constant, vous pouvez alors utiliser la fonction d'intervalle pour répéter la même action toutes les x fois.

setInterval(function()
{
    alert("hi");
}, 30000);

Vous pouvez également le faire comme ceci:

setTimeout(foo, 30000);

Où un toto est une fonction.

Au lieu de l'alerte ("hi"), vous pouvez effectuer la requête AJAX, qui envoie une requête au serveur et reçoit des informations (par exemple le nouveau texte) que vous pouvez utiliser pour charger dans le div.

Un AJAX classique ressemble à ceci:

var fetch = true;
var url = 'someurl.java';
$.ajax(
{
    // Post the variable fetch to url.
    type : 'post',
    url : url,
    dataType : 'json', // expected returned data format.
    data : 
    {
        'fetch' : fetch // You might want to indicate what you're requesting.
    },
    success : function(data)
    {
        // This happens AFTER the backend has returned an JSON array (or other object type)
        var res1, res2;

        for(var i = 0; i < data.length; i++)
        {
            // Parse through the JSON array which was returned.
            // A proper error handling should be added here (check if
            // everything went successful or not)

            res1 = data[i].res1;
            res2 = data[i].res2;

            // Do something with the returned data
            $('#div1').html(res1);
        }
    },
    complete : function(data)
    {
        // do something, not critical.
    }
});

Lorsque le backend est capable de recevoir des données POST'ed et est capable de renvoyer un objet de données d'informations, par exemple (et très préférable) JSON, il existe de nombreux tutoriels sur la façon de le faire, GSON de Google est quelque chose que je utilisé il y a quelque temps, vous pourriez y jeter un coup d'œil.

Je ne suis pas professionnel avec la réception Java POST et le retour JSON de ce type, donc je ne vais pas vous donner d'exemple avec cela, mais j'espère que c'est un bon début.

Jonast92
la source
Votre exemple Ajax, comment le mettre à jour en direct?
TheCrazyProfessor
10

Vous devez le faire côté client, par exemple avec jQuery.

Supposons que vous souhaitiez récupérer du HTML en div avec l'ID mydiv:

<h1>My page</h1>
<div id="mydiv">
    <h2>This div is updated</h2>
</div>

Vous pouvez mettre à jour cette partie de la page avec jQuery comme suit:

$.get('/api/mydiv', function(data) {
  $('#mydiv').html(data);
});

Du côté serveur, vous devez implémenter un gestionnaire pour les requêtes arrivant /api/mydivet renvoyer le fragment de HTML qui entre dans mydiv.

Voir ce violon que j'ai créé pour vous pour un exemple amusant utilisant jQuery get avec les données de réponse JSON: http://jsfiddle.net/t35F9/1/

jsalonen
la source
Exemple cool et simplifié. Pourrions-nous trouver des inconvénients à cela?
Luigi Lopez
3

Utiliser fetchet innerHTMLpour charger du contenu div

Kamil Kiełczewski
la source
1

$.ajax(), $.get(), $.post(), $.load()les fonctions de jQuery envoient une XML HTTPrequête en interne . parmi ceux-ci, le load()n'est dédié qu'à un particulier DOM Element. Voir jQuery Ajax Doc . Un QA de détails sur ceux-ci sont ici .

M. Mak
la source