Contenu d'un div à partir d'un script PHP

[MadMass]

Salute,
Je bute sur un soucis, je suis une bille en JS/AJAX :'(

Bref j'ai un div identifié par son ID. J'aimerais qu'au clic sur un élément de ma page, javascript, à l'aide d'un onclick= par exemple, remplace le texte contenu dans mon div par ce que va lui renvoyer un script php.
Ce qui revient en fait à faire comme un iframe, mais les iframes c'est dégueulasse :heu:

Quelqu'un pourrait m'aider ? Je trouve vraiment rien sur le net, ou sinon c'est hors de ma portée (je fais du php from scratch en MVC...)
Merchi

[Xenos]

Salut,

Les iframes ne sont pas dégueulasses... Un système javascript qui les émule me semble être le plus dégueulasse des deux.
Si le php renvoie une vraie page, qui pourrait être consultée de façon autonome (aka, dans un nouvel onglet), utilise l'iframe: c'est fait pour

Sinon, tu peux le faire en AJAX. Le PHP te renvoie alors une réponse, que tu récupère via "responseText", et tu l'injecte dans le .innerHTML de ta div. C'est encore plus dégueulasse que les iframes, mais je t'avais prévenu :p

[Sephi-Chan]

Pourquoi tu dis que les iframe c'est dégueulasse ? Car c'est pas vrai du tout (contrairement au frames). Bon, par contre je suis presque sûr que ce n'est pas ce dont tu as besoin. :p

Pour ton histoire, on pourrait mieux t'aider en sachant ce dont tu as besoin (qui n'est pas toujours ce que l'on veut).

Basiquement si tu es une poire en Javascript, il te faut l'aide de jQuery. J'attends d'en savoir plus pour t'aiguiller !

[Ter Rowan]

Basiquement si tu es une poire en Javascript, il te faut l'aide de jQuery.

pareil, et c est une poire qui parle...

sinon le vrai truc dégueulasse c est le onclick = ...

passe en gestionnaire d événement (avec jquery facile) plutot que dans ton code html

[niahoo]

je bosse sur une appli composée d'un architecture branlesque d'iframes dans tous les sens et ça me rend fou. Ne fais pas ça.

Mais c'est pas plus dégueulasse que bidouiler le innerHTML. Les deux sont utilisés couramment

Maintenant, dire que tu n'as rien trouvé sur le net, à mon avis, c'est dire que tu n'as vraiment pas bien cherché.

[Sephi-Chan]

Ou qu'il ne sait pas quoi chercher. Attendons d'en savoir plus sur son souci ! :p

[niahoo]

en prenant uniquement les mots du l'OP, tu peux faire une recherche google sur remplacer le contenu d'une div jquery ajax. Et si tu t'en sors pas avec ça, ça devient chaud pour faire un jeu !

[MadMass]

Parce que j'ai d'emblée évacué tout ce qui se rapportait à une lib js :p

Bon ce que je souhaite faire est simple (et c'est dégueulasse en l'état de mes connaissances).
J'ai sur le côté gauche de l'écran la liste de toutes mes flottes, et je veux pouvoir cliquer sur celles que je veux sélectionner. Dès que je clique sur une flotte, elle apparaît dans une liste à droite de l'écran.
Ne maîtrisant pas d'autres techno que php, j'ai donc pensé à la méthodologie suivante :
- Dès que je clique sur une flotte, ça actualise le div avec une page php. Cette page reçoit un token (en GET) qui lui indique la flotte en question.
- Elle enregistre (dans une session ou une base HEAP) la flotte, et génère l'affichage de la liste de droite, en incluant les flottes précédemment sélectionnées.
- Dès que je clique sur le bouton déplacement, le script va récupéré toutes les flottes enregistrées dans la liste de droite, et enclencher leur déplacement server-side.

Ca marche avec une iframe comme avec une div. Le souci c'est qu'un iframe peut potentiellement me foutre en l'air certaines caractéristiques graphiques, comme le background (c'est le background de la frame qui est affiché, et pas de la page; sachant que c'est pas un background uni...). En outre, le temps du chargement de la frame, la zone apparaît blanche un court instant, ce qui est moche.
Je SAIS qu'il est possible de faire ça entièrement client-side. Mais je ne sais pas faire.

[Sephi-Chan]

Le panneau des flottes sélectionnées contient des informations supplémentaires ou reprend juste la même chose que dans la barre latérale ?

Moi je partirais sur un DOM assez simple et en tirant profit de checkboxes (pour ne pas avoir à s'occuper de l'accumulation des IDs et pour le feedback visuel de la sélection) :

<div id="sidebar">

    <ul id="available-fleets">

        <li>

            <label>

                <input type="checkbox" value="1" />

                Fleet 1

            </label>

        </li>

        <li>

            <label>

                <input type="checkbox" value="2" />

                Fleet 2

            </label>

        </li>

    </ul>

</div>



<div id="summary">

    <ul id="selected-fleets"></ul>



    <button>Send!</button>

</div>

Avec côté Javascript (et jQuery, sinon tu vas vraiment te faire chier sans aucun bénéfice) :

var getSelectedFleetIds = function() {

  $.makeArray($('#available-fleets :checkbox:checked').map(function(){ return this.value }));

}



var injectHtmlForSelectedFleets = function(html) {

  // Les <li> retournés par le serveurs.

  $('#selected-fleets').html(html);

}



var refreshSummary = function(event) {

  $.get('/dom_for_selected_fleets', { ids: getSelectedFleetIds() }, injectHtmlForSelectedFleets);

}



var sendFleets = function(event) {

  $.post('/send_fleets', { ids: getSelectedFleetIds() }, displayMovementReport)

}



var displayMovementReport = function() { ... };



$(function(){

  $('#available-fleets :checkbox').change(refreshSummary);

  $('#summary button').click(sendFleets);

})

[MadMass]

Le panneau des flottes sélectionnées reprend les mêmes informations, mais possède un bouton pour annuler la sélection d'une flotte en particulier, et indique aussi le temps de parcours de la flotte. Mais c'est pas vraiment important cette dernière chose, je peux l'afficher d'emblée

EDIT : je comprend partiellement ton code, cependant, ça s'utilise comment ? Qu'es-ce que fait la partie javascript pas à pas ?