Javascript funktioniert mit .html() nicht

[tsbmusic]

Moin Leute!

Also wenn ich auf meiner Seite bei .html() den Seiten-Inhalt ändere, dann funktioniert das darin enthaltene Javascript nicht mehr. Ist das nur bei mir so oder ist das generell ein Problem? :S

Gruss
tsbmusic

 

[SpiceLab]

Ist das nur bei mir so oder ist das generell ein Problem?

Vermutlich ersteres ;-)

 

[tsbmusic]

Also ich frag das jetzt weil ich hab mir jetzt mal ajaxify angeguckt und da ist das bei mir so. Hat jemand von euch erfahrung damit und kennt sich damit aus?

 

[SpiceLab]

Viel interessanter, weil weiterführender, wäre zunächst mal von deiner Seite die Angabe, was du wie (codetechnisch) konkret erfolglos versuchst, anstatt hier (wie bei dir schon in gewohnter Manie) wieder mal im Blindflug über ungelegte Eier zu sinnieren.

 

[tsbmusic]

Also ich hab ganz normal jquery.ajaxify.js eingebunden im Header und dann alle Links damit verknüpft ($('a').ajaxify().

Und wenn ich jetzt eine Seite habe und auf einen Link klicke wird der auch geladen, nur das dann die Links im geladenenn Inhalt nicht mehr über ajaxify geladen werden sondern ganz normal. Und das soll ja nicht so sein.

Ich hoffe das war jetzt nicht zu umständlich ausgedrückt...

 

[tsbmusic]

Also ich hab ganz normal jquery.ajaxify.js eingebunden im Header und dann alle Links damit verknüpft ($('a').ajaxify().

Und wenn ich jetzt eine Seite habe und auf einen Link klicke wird der auch geladen, nur das dann die Links im geladenenn Inhalt nicht mehr über ajaxify geladen werden sondern ganz normal. Und das soll ja nicht so sein.

Ich hoffe das war jetzt nicht zu umständlich ausgedrückt...

 

[FipsTheThief]

Das das Javascript nicht funktioniert ist ganz normal , da es ja ein String ist und dieser einfach in den DOM eingetragen wird. Er führt das JavaScript welches auf die Art und Weise eingebunden wird nicht aus da er es nicht erkennt und somit passiert da gar nix.

Vermutlich hast versucht den klar zu machen , okay wenn geladen dann instanziere das JS neu und belege wieder alle Links damit.

Also für das Problem gibt es eine Lösung schön das zu wissen fürs erste

Ich hab nun keine Ahnung von dem Ajaxify , der einfachste weg wäre eine Callback Funktion die ausgeführt wird wenn alle Operationen stattgefunden haben um dann die enthaltenen Links hinzuzufügen.

Die 2. Möglichkeit wäre das JavaScript zu parsen und selbiges dann per eval auszuführen.

       /**
        * nach JavaScript Code parsen 
        * und selbigen extrahieren
        *@access private
        *@param String was soll durchsucht werden
        *@return Array (htmlCode,ScriptCode)
        */
        function parseScriptContent (parseString) {
            var scriptTagPattern = /<script[^>]+>((?:\r|\n|.)*?)<\/script>/gi;
            var scriptCodePattern = new RegExp("(?:<script[^>]+>)((?:\r|\n|.)*?)(?:<\/script>)","im");

            var m = parseString.match(scriptTagPattern);
            var jsCode = "";

            if(m){
                for(var i = 0; i < m.length;i++) {
                    try {
                        jsCode += m[i].match(scriptCodePattern)[1];
                    } catch (e) {
                        alert(e.message);
                    }
                }

                parseString = parseString.replace(scriptTagPattern,"");
                return [parseString,jsCode];
            } else {
                return [parseString,""];
            }
        };

var stringWithJS = "hallo da ist eine alert box mit drinnen."+
                              "<script type='text/javascript'>alert('hallo welt');</script>";

var parsed = parseScriptContent(stringWithJS);
var html     = parsed[0];
var code    = parsed[1];

// um den JS Code nun zu zünden 
eval(code); // nun sollte hallo welt in einen Alert Fenster auftauchen

Hat für mich bisher super funktioniert aber jQuery wird sowas sicher auch schon mitbringen.

 

[tsbmusic]

also mein Problem ist das ich wenn ich einen Ajax-Request mache und dann HTML als Rückgabebekomme und das auch auf die Seite eingefügt wird, das in dem eingefügten HTML kein Javascript mehr funktioniert.

Hier mein Code:

$.ajax({
                		type: "POST",
                		url: "script.php",
                		dataType: "json",
                		data: {...},
                		processData: true,
                		cache: false,
                        success: function(response){
                            $.globalEval(response.payload);
                        },
                        error: function(msg){
                            alert("Es ist ein Fehler aufgetreten. Bitte versuch es später nochmal.");
                        }
                    });

DOM = {
    findParent: function(e,p){
        var b = $(e).closest(p);
        return b;
    },
    find: function(a,b){
        return $(a).find(b);
    },
    replace: function(a, b){
        $(a).replaceWith(b);
    },
    addContent: function(a,b,c){
        if(c == 0){
            return a.html(b);
        } else if(c == 1){
            return a.prepend(b);
        } else {
            return a.append(b);
        }
    }
}

function HTML(html){
    return html.replace(/c003/ig, "<").replace(/"/ig, '"');
}

Und hier noch ein Beispiel wie so eine Antwort von "script.php" aussieht:

{"error":"","payload":"DOM.replace(DOM.find(document,\".liveForm_74c0880ae8a777a6ce492cb422b3f1ce .uiLikeBox\"), HTML(\"\\c003li class=\\\"uiBox uiListItem uiLikeBox\\\"> \\c003button class=\\\"like_link\\\" name=\\\"like\\\" type=\\\"submit\\\" title=\\\"Das find ich gut\\\">  \\c003span class=\\\"uiWrap\\\">   \\c003span class=\\\"uiWrap_Image\\\">\\c003i class=\\\"uiImage rate rate_up\\\">\\c003\\\/i>\\c003\\\/span>   \\c003span class=\\\"uiWrap_Content\\\">Find ich gut\\c003\\\/span>  \\c003\\\/span> \\c003\\\/button>\\c003span class=\\\"uiText\\\">\\c003\\\/span>\\c003\\\/li>\"));","scripts":["js\/base.js"]}

 

[Maniac]

Wie FipsTheThief schon geschrieben hatte, ist das normales Verhalten von JavaScript.
Kannst du auch hier nachlesen:
http://docs.jquery.com/Frequently_A..._events_stop_working_after_an_AJAX_request.3F

$('selector').live();

Ist genau zu diesem Zweck gemacht worden.

 

[tsbmusic]

Danke danke das ist genau das was ich brauche nur es gibt dabei ein Problem: Wenn ich das in meinem Plugin von bind zu live ändere funktioniert das ganze nicht mehr...

Hier der Code:

(function($){
    $.fn.extend({
        ajx: function(options){
            ajxDefaults = {
                target: "#main",
                event: "click",
                link: false,
                method: "GET",
                loadHash: false,
                tagToLoad: false,
                title: false,
                params: "__a=1",
                contentType: "application/x-www-form-urlencoded",
                dataType: "json",
                cache: false
            };

            return this.each(function(){
                var current = $.extend({},ajxDefaults,options);
                $(this).live(current.event, function(){
                    if($(this).is("a")){
                        var link = $(this).attr('href').replace(/^#/, "");
                        current.link = link;
                    } else if($(this).is("input[type=submit]") || $(this).is("button[type=submit]")){
                        var form = this.form;
                        current.link = $(form).attr("action");
                        current.paramres = $(form).serialize()+"&"+current.params+"&"+$(this).attr("name")+"="+$(this).attr("value");
                        current.method = "POST";
                    }
                    if(!current.paramres){
                        current.paramres = current.params;
                    }
                    $.ajax({
                		type: current.method,
                		url: current.link,
                		dataType: current.dataType,
                		data: current.paramres,
                		contentType: current.contentType,
                		processData: true,
                		cache: current.cache,
                        success: function(response){
                            $.globalEval(response.payload);
                            /*if(response.scripts){
                                scripts = response.scripts;
                                for(i in scripts){
                                    $.getScript(scripts[i]);
                                }
                            }*/
                            if(response.js){
                                $.globalEval(response.js);
                            }
                        },
                        error: function(msg){
                            alert("Es ist ein Fehler aufgetreten. Bitte versuch es später nochmal.");
                        }
                    });
                    current.paramres = "";
                    if($(this).is("a") || $(this).is("input[type=submit]") || $(this).is("button[type=submit]")) return false;
                });
            });
        }
    });
})(jQuery);