MSIE: la append jQuery () / html () ne fonctionne pas, eu recours à getElementById () innerHTML.

Question

Ceci est un long,

Le Prémisse

a été appelé pour aider un client avec une correction de bogues sur un projet en cours de la leur. Ce qu'il fallait fixation est une liste d'emploi page. Vous avez une liste d'emplois, vous cliquez sur un et si JavaScript est activé un appel AJAX est fait pour charger dynamiquement les détails de l'emploi dans un élément existant (DIV # de emploi_details). Si JS n'est pas activé, il suffit de la page recharge avec les détails de l'emploi (moins important).

Je sautais sur leurs serveurs de laboratoire pour travailler sur le site Web dev.

Le problème

En fait, IE7 (au début) n'a pas été afficher le contenu chargé par charge () $ ().. IE6 a travaillé sans accroc avec innerHTML. Les demandes sont envoyées et je reçois une réponse à chaque fois. Je reçois les données, je peux alerter () et le voir, mais le dumping réel du contenu ne fonctionne pas. Safari, Firefox, sans aucun problème. L'élément DIV # de emploi_details Je Chargement des informations en dispose d'un écran CSS: none; dans ses styleheets et est affiché après que le contenu est chargé dans (autre ne détaillerons pas si important).

show_emploi = function(id, succ_id)
{
    $('#emploi_details').fadeOut(800, function() {
        var $$ = $(this);

        $$.load('emploi_<?php echo $data['lang']; ?>.php', { job_details: 1, ajax: 1, id: id, succ: succ_id, random: (new Date().getTime()) }, function(data, status){
            if (isIE6) document.getElementById('emploi_details').innerHTML = data;
            $$.show();
        });
        $('#bgContent').fadeOut();
    });
}

La solution

Au début, j'avais l'impression peut-être le $ (). Load () a été qu'imiter, donc je l'ai changé pour un .get de $ () pour plus de contrôle sur la manipulation du contenu chargé.

$.get('emploi_<?php echo $data['lang']; ?>.php', { job_details: 1, ajax: 1, id: id, succ: succ_id, random: (new Date().getTime()) }, function(data, status){
    $$.empty().append(data).show();
});

Cela fonctionne. Dans tous les navigateurs, y compris IE6 et IE7. Aucun problème. Bizarre, mais vous savez, si cela fonctionne et son indéréglable, ne pose pas de questions.

Le Revirement

Maintenant, voici où la merde devient bizarre. Je considérais le bug fixe et appliqué la solution sur le site en direct et ... ça ne marche pas. IE est tout simplement pas l'aimer. Perplexe après avoir essayé .ajax $ et toutes les autres sortes de choses que je finis en utilisant ce pour le site en direct:

$.get('emploi_<?php echo $data['lang']; ?>.php', { job_details: 1, ajax: 1, id: id, succ: succ_id, random: (new Date().getTime()) }, function(data, status){
    document.getElementById('emploi_details').innerHTML = data;
    $$.show();
});

Et cela fonctionne sur tous les navigateurs, car il n'y a rien comme barebones JS pour se faire des choses. Nécessairement, ce correctif fonctionne également sur le site Web dev.

'A suivre'

Il y a quelque chose dans la fonction d'intégration du contenu qui ne clique pas pour tous les navigateurs (et clairement les serveurs).

Dans l'ensemble, ma question est une question de WTF. Je ne comprends pas pourquoi on travaille sur un côté et même ne fonctionne pas de l'autre côté ou même pourquoi il n'a jamais fonctionné correctement au début ($ () charge. ()). Il est clairement pas différentes versions de jQuery (1.2.6) car il était mon premier instinct de vérifier la version du framework.

De toute façon, le mystère intéressant l'OMI.

quelqu'un l'espoir là-bas dans Stackland a la réponse donnée par Dieu.

Merci

Answer 1

Je l'ai résolu l'énigme! voici un exemple de travail de mon problème. L'astuce était d'appeler un autre AJAX après le premier succès, ce sera en quelque sorte remplacer les problèmes avec le innerHTML. Merci les gars pour me mettre à la bonne direction.

J'espère que cela aidera certaines personnes, parce que jusqu'à présent je ne l'ai pas vu encore la solution de travail. Je contacterai aussi jQuery pour cela: P

$.ajax({
url:'modifyarticle.php',
type:'POST',
data:{
 id:this.id,
 article:'something',
 mode:'single',
 action:'delete'},
cache:false,
success:function(msg) {
 alert(msg);$.ajax({
  url:'getall.php',
  type:'GET',
  cache: false, 
  success: function(data) {
   $('#output').html(data);
  }
 });
}});

Salut

Answer 2

Je suppose que vous deviez être là. Voici quelques points possibles de failue:

• jQuery.clean. La fonction qui rend le fragment qui est ajouté au DOM

  Cela pourrait être possible si le doctype est mauvais, ou si est erronée le code HTML de réponse dans certains manière qui rend la fonction propre échec, laissant ainsi rien à insérer dans le DOM.

• jQuery.fn.append: Ajout du fragment de réponse fournie au DOM.

  Disons que, parce que jQuery ajoute du contenu au DOM avec appendChild plutôt que innerHTML, un bug provoque IE ignorer que le DOM a changé et ne rend pas les changements signalés. Ce serait alors se court-circuité lorsque vous utilisez innerHTML.

  Il est pas clair de votre question si vous avez vérifié que le code HTML injecté est en effet Là. Ce serait testables avec quelque chose comme ceci:

  $$.empty().append(data);
  alert( $$.parent()[0].innerHTML );
  $$.show();
  

• jQuery.fn.show ():. Affichage des résultats

  Il est pas clair de votre question si l'échec final est parce que le contenu est de ne pas mettre dans les DOM, ou si elle est tout simplement pas affiché? Si la récipient a un rembourrage et un fond, est-ce que vous voyez?

  La fonction show est plus complexe que le simple ajout .style.display='block' sur la élément. Il ne sera pas afficher l'élément si elle pense qu'il est caché, ce qui peut parfois IE avoir des idées étranges sur. Est-remplacement show () avec le changement d'affichage réglage manuel quoi que ce soit?

Il est clair qu'il ya une différence dans la façon dont IE traite la page de scène / dev et le site en direct. Mes premiers pas serait d'essayer de découvrir la différence entre eux. Rubriques HTTP, encodage, doctypes, scripts supplémentaires, css supplémentaires, même ... Certains espaces blancs différence apparemment mineure est la cause de ce bug.

Inn tous les cas, vous devez préparer un test réduit de seulement le strict nécessaire requis pour reproduire ce bug. Même si vous ne trouvez pas un remède pour cela que vous êtes à l'aise avec, doit être envoyer le cas de test avec votre rapport de bug à jQuery .