Insérer du code HTML dans une page avec AJAX

Je suis actuellement en train de développer un site web et j'ai besoin que les pages se charge dynamiquement en fonction de ce que les actions que l'utilisateur n'.

Exemple: Si l'utilisateur clique sur le bouton 'Paramètres' ajax fonction de la charge à partir d'une page externe le code et le mettre dans le div avec le tag 'paramètres'.

C'est le code que j'utilise pour faire la requête Ajax:

    function get_page_content(page, target_id)
    {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function()
        {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                document.getElementById(target_id).innerHTML = xmlhttp.responseText;
                //After getting the response we have to re-apply ui effects or they
                //won't be available on new elements coming from request.
                $('button').sb_animateButton();
                $('input').sb_animateInput();
            }
        }
        xmlhttp.open('GET', 'engine/ajax/get_page_content.php?page=' + page, true);
        xmlhttp.send();
    }

Et c'est là que l'ajax résultats seront mis par le premier extrait:

<div id="settings_appearance">                
</div>

Le code est appelé à partir d'une fonction ici:

<div class="left_menu_item" id="left_menu_settings_appearance" onclick="show_settings_appearance()">
    Appearance
</div>

Et c'est le html qui l'ajax fonction de la mettre dans le settings_appearance div:

    <script type="text/javascript">
        $(function()
        {
            $('#upload_hidden_frame').hide();
            show_mybrain();

            document.getElementById('avatar_upload_form').onsubmit = function()
            {
                document.getElementById('avatar_upload_form').target = 'upload_hidden_frame';
                upload_avatar();
            }
        });
    </script>
    <div class="title">Appearance</div>
    <iframe id="upload_hidden_frame" name="upload_hidden_frame" src="" class="error_message"></iframe>
    <table class="sub_container" id="avatar_upload_form" method="post" enctype="multipart/form-data" action="engine/ajax/upload_avatar.php">
        <tr>
            <td><label for="file">Avatar</label></td>
            <td><input type="file" name="file" id="file" class="file_upload" /></td>
            <td><button type="submit" name="button_upload">Upload</button></td>
        </tr>
        <tr>
            <td><div class="hint">The image must be in PNG, JPEG or GIF format.</div></td>
        </tr>
    </table>

Je voudrais savoir si il existe un moyen pour exécuter également le code javascript qui est retourné par la fonction ajax (bouton télécharger dans la code_retour ne fonctionne pas à cause de cela) et si il est possible d'appliquer à certaines des effets d'interface-je construire qui sont chargés avec la page principale.

Merci pour votre aide.

P. S. C'est le script qui applique les effets d'INTERFACE:

<script type="text/javascript">
//UI effects
$(document).ready(function()
{
  $('button').sb_animateButton();
  $('input').sb_animateInput();
  $('.top_menu_item').sb_animateMenuItem();
  $('.top_menu_item_right').sb_animateMenuItem();
  $('.left_menu_item').sb_animateMenuItem();
});
</script>

P. P. S. des effets d'interface ne sont pas appliquées à des éléments html (telles que les contributions et les boutons) renvoyé par la fonction Ajax. J'ai utilisé un peu de solution de contournement en appliquant de nouveau de l'interface utilisateur-effets après ajax fonction renvoie la réponse. Probablement il y a une autre façon de faire... la même qui va m'aider à résoudre ce problème.

source d'informationauteur siannone

8

Si vous utilisez jQuery la fonction ajax (ou de la simplification de jQuery obtenir la fonction), et de définir le type de données au format html, jQuery sera d'évaluer le contenu de toutes les balises de script inclus dans les résultats.

Votre $.obtenez de l'appel ressemblerait à quelque chose comme:
```
$.get('engine/ajax/get_page_content.php?page=' + page,null,function(result) {
    $("#"+target_id).html(result); //Or whatever you need to insert the result
},'html');
```

Je vous conseille aussi de ne pas, mais après le chargement du contenu dans le div, passer l'ID de l'élément à cette fonction. Ce sera même la poignée de document.écrire

function do_JS(e){
        var Reg = '(?:<script.*?>)((\n|.)*?)(?:</script>)';
        var match    = new RegExp(Reg, 'img');
        var scripts  = e.innerHTML.match(match);
        var doc = document.write;
        document.write = function(p){ e.innerHTML = e.innerHTML.replace(scripts[s],p)};
        if(scripts) {
            for(var s = 0; s < scripts.length; s++) {
                var js = '';
                var match = new RegExp(Reg, 'im');
                js = scripts[s].match(match)[1];
                js = js.replace('<!--','');
                js = js.replace('-->','');
                eval('try{'+js+'}catch(e){}');
            }
        }
        document.write = doc;
    }

Une meilleure solution sera d'ajouter une fonction que vous pouvez appeler à la fin de la mise à jour pour montrer les effets.

1

Je vous recommande de ne pas le faire, elle pourrait conduire à une violation de la sécurité.

Si vous utilisez déjà jquery, utiliser de l'ajax fonctionnalités au lieu de la matière première.

Quand la requête ajax complète d'exécuter le code d'animation (il suffit de laisser sur la page de l'appel ajax).
0

Dans votre contenu HTML (celui que vous obtenez à partir de l'appel) en font une commune de la fonction javascript pour chaque page de contenu, qui sera appelée à chaque fois que le contenu est chargé dans la page principale...

le nom de la fonction sera quelque chose comme: loadContentJavascript() {}

et cette fonction est en charge de chargement de toutes les fonctionnalités qu'il sera à la charge sur un événement onload.

Vous devez vous connecter pour publier un commentaire.