[AJAX] Chargement de Javascript après un Appel Ajax

Invité · 11/02/2013, 15h41

Bonjour,

J'ai actuellement un petit problème, j'essaie après la soumission d'un formulaire en Ajax de rafraichir une partie de mon site que j'appelle avec un setTimeout. Le problème est que cette partie du site que je recharge possède un Jquery Accordion et que suite à l'appel il ne fonctionne pas et ne s'affiche pas correctement comme si le javascript n'est pas interprété.

Submit du formulaire en Ajax

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('form:not(#imageform)').on('submit', function()
    {
        $(this).ajaxSubmit(
        {
            resetForm:true,
            beforeSend : function()
            {
                $("#content").append('<div id="loader"></div>');
            },
            complete: function(html)
            {
                $('#loader').remove();                         
                setTimeout('refresh_div("playlist/ajax_listplaylist", "list_playlist")', 100);
                setTimeout('refresh_div("playlist/ajax_playlist", "playlist")', 100);
            }
        });
 
        return false;
 });

Fonction refesh_div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function refresh_div(url, div)
{
    aleatoire = Math.random();
    //Mise à jour de la photo dans l'onglet
    var xhr_object = null;         
 
    if(window.XMLHttpRequest)
    { // Firefox
        xhr_object = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    { // Internet Explorer
        xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
    }
 
    var method = 'GET';        
    var filename = url;
 
    xhr_object.open(method, filename, true);
 
    xhr_object.onreadystatechange = function()
    {  
        if(xhr_object.readyState == 4)
        {
            var tmp = xhr_object.responseText;
            document.getElementById(div).innerHTML = tmp;
        }
    }
    xhr_object.send("");
}

Fichier PHP (contenant l'accordion)

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<?php
if(isset($num_playlist) && $num_playlist != "")
{
    $active = $num_playlist - 1;
}
else
{
    $active = 0;
}?>
<script>
$(document).ready(function ()
{
    $("#list_playlist").accordion({
        autoHeight: false,
        navigation: true,
        collapsible: true,
        active: <?php echo $active; ?>
    });
});
</script>
<div id="list_playlist">
<?php $list = $this->requestAction('list_playlist/all');
    if(!empty($list))
    {
        foreach($list as $playlist)
        {
            echo '<h3';
                    if(isset($num_playlist) && ($num_playlist == $playlist["ListPlaylist"]["id"]))
                    {
                        echo ' id="current"';
                    }
                    echo '>'.$playlist["ListPlaylist"]["name_playlist"].'</h3>
                     
                    <div id="songs_playlist">';
 
                        if(empty($playlist["Playlist"]))
                        {
                            echo "<p id='playlist_empty'>".__('This playlist is empty !')."</p>";
 
                            if(isset($num_playlist) && ($num_playlist != $playlist["ListPlaylist"]["id"]))
                            {
                                echo '<p>
                                        <a href="/'.$server_name[1].'/playlist/switch_playlist?num='.$playlist["ListPlaylist"]["id"].'"><input type="button" class="play_playlist" value="'.__('Play').'"/></a>
                                    </p>';
                            }
                        }
                        else
                        {
                            foreach($playlist["Playlist"] as $song)
                            {
                                $file = $this->requestAction(array('controller' => 'file', 'action' => 'file_list_playlist'), array('pass' => array($song["file_id"])));
 
                                if(empty($file))
                                {
                                    echo "<p id='playlist_empty'>".__('This playlist is empty !')."</p>";
                                }
                                else
                                {
                                    foreach($file as $song)
                                    {
                                        echo '<div class="song">
                                                <span>'.tronquer($song["File"]["title"], 20).' - '.tronquer($song["File"]["artist"], 20).'</span>
                                                <form action="/'.$server_name[1].'/playlist/delete" method="post">
                                                    <input type="hidden" value="'.$song["File"]["folder"].'" name="folder"/>
                                                    <input type="hidden" value="'.$playlist["ListPlaylist"]["id"].'" name="playlist"/>
                                                    <input type="hidden" value="'.$song["File"]["id"].'" name="file_id"/>
                                                    <input type="image" src="/'.$server_name[1].'/img/little_delete_grey.png" id="delete_playlist" onMouseOver="this.src=\'/'.$server_name[1].'/img/little_delete.png\';" onMouseOut="this.src=\'/'.$server_name[1].'/img/little_delete_grey.png\';"/>
                                                </form>
                                            </div>';
                                    }
                                }
                            }
 
                            if(isset($num_playlist) && ($num_playlist != $playlist["ListPlaylist"]["id"]))
                            {
                                echo '<p>
                                        <a href="/'.$server_name[1].'/playlist/switch_playlist?num='.$playlist["ListPlaylist"]["id"].'"><input type="button" class="play_playlist" value="'.__('Play').'"/></a>
                                    </p>';
                            }
                        }
            echo    '</div>';
        }
    }
?>
</div>

Merci d'avance pour votre aide !

**NoSmoking** · 11/02/2013, 18h48

Bonjour,
tant qu'à utiliser jQuery autant l'utiliser jusqu'au bout, tu gagnerais avantage à utiliser la méthode .load().

Invité · 11/02/2013, 20h50

Tout d'abord merci pour ta réponse !
C'est vrai c'est pas bête j'ai donc remplacé mes "setTimeout" par "load()" .. mais cela ne résout pas mon problème

**Dr.Who** · 16/02/2013, 03h51

ajouter une fonction "Execute" a tes script appelé en Ajax que tu appel une fois que l'appel ajax est fini.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
if(xhr_object.readyState == 4){
  var tmp = xhr_object.responseText;
  document.getElementById(div).innerHTML = tmp;
  Execute();
}

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
<?php
if(isset($num_playlist) && $num_playlist != "")
{
    $active = $num_playlist - 1;
}
else
{
    $active = 0;
}?>
<script>
function Execute(){
  $("#list_playlist").accordion({
      autoHeight: false,
      navigation: true,
      collapsible: true,
      active: <?php echo $active; ?>
  });
}
</script>
 
<div id="list_playlist">
<?php 
  $list = $this->requestAction('list_playlist/all');
    if(!empty($list))
    {
        foreach($list as $playlist)
        {
            echo '<h3';
                    if(isset($num_playlist) && ($num_playlist == $playlist["ListPlaylist"]["id"]))
                    {
                        echo ' id="current"';
                    }
                    echo '>'.$playlist["ListPlaylist"]["name_playlist"].'</h3>
 
                    <div id="songs_playlist">';
 
                        if(empty($playlist["Playlist"]))
                        {
                            echo "<p id='playlist_empty'>".__('This playlist is empty !')."</p>";
 
                            if(isset($num_playlist) && ($num_playlist != $playlist["ListPlaylist"]["id"]))
                            {
                                echo '<p>
                                        <a href="/'.$server_name[1].'/playlist/switch_playlist?num='.$playlist["ListPlaylist"]["id"].'"><input type="button" class="play_playlist" value="'.__('Play').'"/></a>
                                    </p>';
                            }
                        }
                        else
                        {
                            foreach($playlist["Playlist"] as $song)
                            {
                                $file = $this->requestAction(array('controller' => 'file', 'action' => 'file_list_playlist'), array('pass' => array($song["file_id"])));
 
                                if(empty($file))
                                {
                                    echo "<p id='playlist_empty'>".__('This playlist is empty !')."</p>";
                                }
                                else
                                {
                                    foreach($file as $song)
                                    {
                                        echo '<div class="song">
                                                <span>'.tronquer($song["File"]["title"], 20).' - '.tronquer($song["File"]["artist"], 20).'</span>
                                                <form action="/'.$server_name[1].'/playlist/delete" method="post">
                                                    <input type="hidden" value="'.$song["File"]["folder"].'" name="folder"/>
                                                    <input type="hidden" value="'.$playlist["ListPlaylist"]["id"].'" name="playlist"/>
                                                    <input type="hidden" value="'.$song["File"]["id"].'" name="file_id"/>
                                                    <input type="image" src="/'.$server_name[1].'/img/little_delete_grey.png" id="delete_playlist" onMouseOver="this.src=\'/'.$server_name[1].'/img/little_delete.png\';" onMouseOut="this.src=\'/'.$server_name[1].'/img/little_delete_grey.png\';"/>
                                                </form>
                                            </div>';
                                    }
                                }
                            }
 
                            if(isset($num_playlist) && ($num_playlist != $playlist["ListPlaylist"]["id"]))
                            {
                                echo '<p>
                                        <a href="/'.$server_name[1].'/playlist/switch_playlist?num='.$playlist["ListPlaylist"]["id"].'"><input type="button" class="play_playlist" value="'.__('Play').'"/></a>
                                    </p>';
                            }
                        }
            echo    '</div>';
        }
    }
?>
</div>

[AJAX] Chargement de Javascript après un Appel Ajax

AJAX

Discussions similaires

Partager

Partager