jquery: dialogbox funktioniert nicht

Dreamwatcher · 20.07.2010, 00:53

Hallo,

ich wusste jetzt wirklich nicht wie ich das Thema nennen sollte

Ich wage mich zur Zeit an jquery ran und habe jetzt mal wieder ein weiteres Problem, bei dem ich nicht weiß, wie ich vorgehen muss.

Ich habe eine mainbox und eine nav_left, in die der neue inhalt bei klick auf einen Link geschrieben wird.

Jetzt möchte ich aber in einem neu geladenen Fenster eine Dialogbox benutzen, der Inhalt dieser wird in ein div namens dialogBox geladen und dann angezeigt.

Dieser Vorgang funktioniert aber auch nur, wenn man auf die Seite kommt ohne auf einen Link zu klicken, also nur wenn vorher kein Jquery benutzt wurde.

Wenn doch, wird der Link einfach geöffnet (ohne jquery, einfach normal geladen)

Wie kann ich nun dem Link mit der Klasse "ContentFadeIn"
nach dem Laden des neuen Inhalts die richtigen Eigenschaften geben?

Quellcode:

Code:

function click_event(href)
{
	$.ajax({
		type: "POST",
		dataType: "html",
		url: href,
		data: "ajax_req=1",
		success: function(html){
			$("#mainbox").html(html);
			$("#mainbox").html(html).find("a").click(function(){
				click_event($(this).attr("href"));
			});

		}
	});
	$.ajax({
		type: "POST",
		dataType: "html",
		url: href,
		data: "ajax_req=2",
		success: function(html){
			$("#nav_left").html(html);
			$("#nav_left").html(html).find("a").click(function(){
				click_event($(this).attr("href"));
			});
		}
	});		
	return false;
}
$(document).ready( function() { 
$("a").bind("click", function() { return false;  })
$("a").addClass("mainbox");
$("a.ContentFadeIn").removeClass("mainbox");
	$("#loading").ajaxStart(function(){
   		$(this).fadeTo(100, 1);
	});
	$(".mainbox").click(function () {
	href = $(this).attr("href"); 
	click_event(href);
	});	
	$("#loading").ajaxStop(function(){
		$(this).hide();
	});
	
	
		$("#dialogBox").dialog({ autoOpen: false, modal: true, draggable: false, resizable: false, maxWidth: 900 });
	$(".ContentFadeIn").click(function () {
		href = $(this).attr("href"); 
		$.ajax({
			type: "POST",
			dataType: "html",
			url: href,
			data: "ajax_req=1",
			success: function(html){
				$("#dialogBox").html(html);
				$("#dialogBox" ).dialog({ show: "slide" });
				$("#dialogBox" ).dialog({ closeOnEscape: true });
				$("#dialogBox").css("font-size", "10px");
				$("#dialogBox" ).dialog( "option", "width", 900 );
				$("#dialogBox" ).dialog( "option", "height", 700 );
				$("#dialogBox" ).dialog( "option", "position", "top" );
				$("#dialogBox").dialog("open");
			}
		});
	});
	
});

PS: Falls ich es mir irgendwo viel zu schwer mache, wäre es super wenn mich jemand drauf hinweisen könnte, weil man sich am Anfang meist schlechte Manieren angewöhnt, weil man es nicht besser kann.

Grüße,
Dreamwatcher

ChrisB · 20.07.2010, 15:58

Zitat:

Zitat von Dreamwatcher

Dieser Vorgang funktioniert aber auch nur, wenn man auf die Seite kommt ohne auf einen Link zu klicken, also nur wenn vorher kein Jquery benutzt wurde.

Bitte drücke dich deutlicher aus - was geschieht denn, wenn jQuery „vorher benutzt“ wird, wofür benutzt du es ...?

Chriz · 20.07.2010, 20:40

Du musst nach dem Laden von Inhalt über AJAX dein "Binding" erneut ausführen. Im Moment machst du es ja nur, wenn das Dokument initial geladen wurde ($(document).ready()).

rudygotya · 21.07.2010, 02:54

Oder live() und noch besser delegate() ansehen. Für das bissi html laden kannst du auch load() verwenden + callback angeben. Dann müsstest du die parameter an die url anhängen.
Unschön:

PHP-Code:

  href = $(this).attr("href");

Die dialog options kannst du auch schöner und einfacher angeben:

PHP-Code:

  $("#dialogBox" ).dialog({
    option1: true,
    option2: true,
//...
});

Dreamwatcher · 21.07.2010, 07:16

Wo müsste ich denn Live oder Delegate angeben?
Ich habe den Code bis jetzt so (dialogbox init geändert und href geändert):

Code:

function click_event(href)
{
	
	$.ajax({
		type: "POST",
		dataType: "html",
		url: href,
		data: "ajax_req=1",
		success: function(html){
			$("#mainbox").html(html);
			$("#mainbox").html(html).find("a").click(function(){
				click_event($(this).attr("href"));
			});

		}
	});
	$.ajax({
		type: "POST",
		dataType: "html",
		url: href,
		data: "ajax_req=2",
		success: function(html){
			$("#nav_left").html(html);
			$("#nav_left").html(html).find("a").click(function(){
				click_event($(this).attr("href"));
			});
		}
	});		
	return false;
}
$(document).ready( function() { 
$("a").bind("click", function() { return false;  })
$("a").addClass("mainbox");
$("a.ContentFadeIn").removeClass("mainbox");
	$("#loading").ajaxStart(function(){
   		$(this).fadeTo(100, 1);
	});
	$(".mainbox").click(function () {
	click_event($(this).attr("href"));
	});	
	$("#loading").ajaxStop(function(){
		$(this).hide();
	});
	$("#dialogBox").dialog({ 
			autoOpen: false, 
			modal: true, 
			draggable: false, 
			resizable: false, 
			maxWidth: 900,
			show: "slide",
			closeOnEscape: true,
			width: 900,
			height: 700,
			position: "top"
		});
	$("#dialogBox").css("font-size", "10px");
	$(".ContentFadeIn").click(function () {
		$.ajax({
			type: "POST",
			dataType: "html",
			url: $(this).attr("href"),
			data: "ajax_req=1",
			success: function(html){
				$("#dialogBox").html(html);
				$("#dialogBox").dialog("open");
			}
		});
	});
	
});

Wie muss ich das denn jetzt genau einbauen?

rudygotya · 21.07.2010, 09:25

PHP-Code:

  function click_event(href)
{
    $("#mainbox").load(href + "?ajax_req=1");
    $("#nav_left").load(href + "?ajax_req=2");
    // wieso return false? schau mal nach stopPropagation / cancelBubble
    return false;
}
$(function() {
    $("a").not(".ContentFadeIn")
    // das hier sollte nicht jquery machen, sondern dein html von vornherein liefern
        .addClass("mainbox")
        .click(function () {
            click_event($(this).attr("href"));
    }); 
    $("#loading").ajaxStart(function(){
        $(this).fadeTo(100, 1);
    });
    $("#loading").ajaxStop(function(){
        $(this).hide();
    });
    $("#dialogBox").dialog({ 
            autoOpen: false, 
            modal: true, 
            draggable: false, 
            resizable: false, 
            maxWidth: 900,
            show: "slide",
            closeOnEscape: true,
            width: 900,
            height: 700,
            position: "top"
        });
    // das hier per css erledigen
    $("#dialogBox").css("font-size", "10px");
    $(".ContentFadeIn").click(function () {
        $("#dialogBox").load(href + "?ajax_req=1",
            function () {
                $("#dialogBox").dialog("open");
            }
        )
    });
    // bsp für delegate
    $("#nav_left").delegate("a", "click", function(){
        click_event($(this).attr("href"));
    });
    // bsp für live
    $("#nav_left a").live("click", function(){
        click_event($(this).attr("href"));
    });
});

Paul.Schramenko · 21.07.2010, 09:32

Zitat:

Zitat von Chriz

Du musst nach dem Laden von Inhalt über AJAX dein "Binding" erneut ausführen. Im Moment machst du es ja nur, wenn das Dokument initial geladen wurde ($(document).ready()).

Das würde mich jetzt auch interessieren, hab auch schon öfters dieses Problem gehabt, hab dann irgendwelche Workarounds gebastelt, bis es funktioniert hat. Gibts da irgendnen Befehl oder was das das ganze automatisiert wird?

rudygotya · 21.07.2010, 09:34

Schau dir doch mal die 2 Beispiele von mir im code mit an. Ganz unten live und delegate. Wobei delegate performanter ist (dafür schwieriger zu benutzen)

Paul.Schramenko · 21.07.2010, 10:14

Ja hab ich schon gesehn, aber eine Funktion die alles aufeinmal macht gibt es dann wohl nicht. Schade eigentlich.

Chriz · 21.07.2010, 13:35

$(document).bind("change", function() {}) vielleicht? Nein weiß es auch nicht. rudygotya ist ja unser jQuerykönig

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
jQuery findet Element nicht	ByStones	JavaScript, Ajax und mehr	8	11.06.2010 14:03
Verschlüsselung funktioniert nicht richtig	netmario	PHP Tipps 2010	2	19.05.2010 22:57
jQuery Plug scroll to - wie einbetten?	mxxxx	JavaScript, Ajax und mehr	5	24.04.2010 18:12
[Erledigt] [Erledigt] jQuery Endlos Scrolling Umlaute	kn0wledge	JavaScript, Ajax und mehr	0	18.10.2009 19:29
mod_rewrite mit slash/ohne slash funktioniert nur teilweise	taurus	Server, Hosting und Workstations	4	13.09.2009 12:57
jQuery mit AJAX ohne ActiceX im IE?	krush	JavaScript, Ajax und mehr	2	11.08.2009 08:54
[ERLEDIGT]PHP while-Schleife für Ausgabe funktioniert plötzlich nicht	fuckinghot19	PHP Tipps 2009	6	05.06.2009 22:28
[Erledigt] Umlaute ersetzen funktioniert nicht richtig	BlackSpirit	PHP Tipps 2009	19	20.04.2009 12:04
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
For Schleife mit jQuery	phpbeginner	JavaScript, Ajax und mehr	3	22.11.2008 22:35
send button funktioniert nicht, finde fehler nicht	selma123	PHP Tipps 2008	3	17.09.2008 11:57
PHP funktioniert nicht		PHP Tipps 2005	20	28.04.2005 13:56
Php Gästebuch funktioniert nicht auf dem Server		PHP Tipps 2005	13	21.04.2005 22:11
Dateien erstellen oder schreiben funktioniert nicht im Web		PHP Tipps 2004-2	1	05.12.2004 19:39


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

20.07.2010, 20:40
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.065	Du musst nach dem Laden von Inhalt über AJAX dein "Binding" erneut ausführen. Im Moment machst du es ja nur, wenn das Dokument initial geladen wurde ($(document).ready()). __________________ "Nuschel ich?" - "Was?"

21.07.2010, 02:54
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 1.864 PHP-Kenntnisse: Fortgeschritten	Oder live() und noch besser delegate() ansehen. Für das bissi html laden kannst du auch load() verwenden + callback angeben. Dann müsstest du die parameter an die url anhängen. Unschön: PHP-Code: `href = $(this).attr("href");` Die dialog options kannst du auch schöner und einfacher angeben: PHP-Code: `$("#dialogBox" ).dialog({ option1: true, option2: true, //... });` __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

21.07.2010, 09:25
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 1.864 PHP-Kenntnisse: Fortgeschritten	PHP-Code: function click_event(href) { $("#mainbox").load(href + "?ajax_req=1"); $("#nav_left").load(href + "?ajax_req=2"); // wieso return false? schau mal nach stopPropagation / cancelBubble return false; } $(function() { $("a").not(".ContentFadeIn") // das hier sollte nicht jquery machen, sondern dein html von vornherein liefern .addClass("mainbox") .click(function () { click_event($(this).attr("href")); }); $("#loading").ajaxStart(function(){ $(this).fadeTo(100, 1); }); $("#loading").ajaxStop(function(){ $(this).hide(); }); $("#dialogBox").dialog({ autoOpen: false, modal: true, draggable: false, resizable: false, maxWidth: 900, show: "slide", closeOnEscape: true, width: 900, height: 700, position: "top" }); // das hier per css erledigen $("#dialogBox").css("font-size", "10px"); $(".ContentFadeIn").click(function () { $("#dialogBox").load(href + "?ajax_req=1", function () { $("#dialogBox").dialog("open"); } ) }); // bsp für delegate $("#nav_left").delegate("a", "click", function(){ click_event($(this).attr("href")); }); // bsp für live $("#nav_left a").live("click", function(){ click_event($(this).attr("href")); }); }); __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

21.07.2010, 09:34
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 1.864 PHP-Kenntnisse: Fortgeschritten	Schau dir doch mal die 2 Beispiele von mir im code mit an. Ganz unten live und delegate. Wobei delegate performanter ist (dafür schwieriger zu benutzen) __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

21.07.2010, 10:14
Paul.Schramenko Erfahrener Benutzer Registriert seit: 15.04.2010 Beiträge: 813 PHP-Kenntnisse: Fortgeschritten	Ja hab ich schon gesehn, aber eine Funktion die alles aufeinmal macht gibt es dann wohl nicht. Schade eigentlich. __________________ "My software never has bugs, it just develops random features." "Real programmers don't comment. If it was hard to write, it should be hard to understand!" Positive Bewertungen sind nicht unwillkommen...

21.07.2010, 13:35
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.065	$(document).bind("change", function() {}) vielleicht? Nein weiß es auch nicht. rudygotya ist ja unser jQuerykönig __________________ "Nuschel ich?" - "Was?"