Ankündigung

Einklappen
Keine Ankündigung bisher.

jquery: dialogbox funktioniert nicht

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • jquery: dialogbox funktioniert nicht

    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
    War der Beitrag hilfreich? Dann Bedank dich mit einem klick auf .

  • #2
    Zitat von Dreamwatcher Beitrag anzeigen
    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 ...?
    [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

    Kommentar


    • #3
      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()).
      "[URL="http://www.youtube.com/watch?v=yMAa_t9k2VA&feature=youtu.be&t=25s"]Mein Name ist Lohse, ich kaufe hier ein.[/URL]"

      Kommentar


      • #4
        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({
            
        option1true,
            
        option2true,
        //...
        }); 
        I like cooking my family and my pets.
        Use commas. Don't be a psycho.
        [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

        Kommentar


        • #5
          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?
          War der Beitrag hilfreich? Dann Bedank dich mit einem klick auf .

          Kommentar


          • #6
            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(1001);
                });
                $(
            "#loading").ajaxStop(function(){
                    $(
            this).hide();
                });
                $(
            "#dialogBox").dialog({ 
                        
            autoOpenfalse
                        
            modaltrue
                        
            draggablefalse
                        
            resizablefalse
                        
            maxWidth900,
                        
            show"slide",
                        
            closeOnEscapetrue,
                        
            width900,
                        
            height700,
                        
            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"));
                });
            }); 
            I like cooking my family and my pets.
            Use commas. Don't be a psycho.
            [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

            Kommentar


            • #7
              Zitat von Chriz Beitrag anzeigen
              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?
              "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!"

              Kommentar


              • #8
                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)
                I like cooking my family and my pets.
                Use commas. Don't be a psycho.
                [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                Kommentar


                • #9
                  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!"

                  Kommentar


                  • #10
                    $(document).bind("change", function() {}) vielleicht? Nein weiß es auch nicht. rudygotya ist ja unser jQuerykönig
                    "[URL="http://www.youtube.com/watch?v=yMAa_t9k2VA&feature=youtu.be&t=25s"]Mein Name ist Lohse, ich kaufe hier ein.[/URL]"

                    Kommentar


                    • #11
                      Ne, das nun wirklich nicht. Mach zwar seit knapp 1.5 Jahren fast nichts mehr anderes als mich mit clientseitiger Entwicklung auf jquery basis auseinanderzusetzen. Nur hat man bei Javascript das Gefühl, dass man wirklich nie auslernt, selbst wenn man denkt, man kann langsam bissl was..

                      Hab bis jetzt gearbeitet, aber ich hatte da vor 2 Tagen was gelesen Sollte das sein, was du suchst, Paul.

                      jQuery create event on github
                      I like cooking my family and my pets.
                      Use commas. Don't be a psycho.
                      [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                      Kommentar


                      • #12
                        Sehr geil, habs nur mal schnell überflogen, aber ich glaube das gesucht zu haben xD. Hab mir mal direkt ein Lesezeichen gesetzt, kann ich dann in einer ruhigen Minute mal richtig durchlesen. Vielen Dank!
                        "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!"

                        Kommentar


                        • #13
                          Sehr sehr geil... eben ausprobiert, so macht das ganze richtig Laune. Und mit 3KB compressed ist es auch nicht groß...
                          Code:
                          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                          <html>
                          <head>
                              <meta http-equiv="content-type" content="text/html; charset=utf8">
                              <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
                              <script type="text/javascript" src="jquery.livequery.min.js"></script>
                              <script type="text/javascript">
                                  $(document).ready(function(){
                                      $('.liveQueryTest').livequery(function(){
                                          $(this).hover(
                                              function(){$(this).css('background-color', '#DDD')},
                                              function(){$(this).css('background-color', '#FFF')}
                                          );
                                      });
                                      
                                      $('#add').click(function(){
                                          $('#testArea').append('<input type="text" class="liveQueryTest" value="added!" /><br />');
                                      });
                                  });
                              </script>
                          </head>
                          <body>
                              <div id="testArea">
                                  <input type="text" class="liveQueryTest" value="test" /><br />
                                  <input type="text" class="liveQueryTest" value="test" /><br />
                              </div>
                              <br><br>
                              <input type="button" value="add" id="add">
                          </body>
                          </html>
                          "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!"

                          Kommentar


                          • #14
                            PHP-Code:
                            $('.liveQueryTest').live('mouseover mouseout', function(event) {
                              if (
                            event.type == 'mouseover') {
                                $(
                            this).css('background-color''#DDD');
                              } else {
                                $(
                            this).css('background-color''#FFF');
                              }
                            }); 
                            Dein beispiel mit jquery core. Das livequery plugin ist ja fast vollständig in den core gewandert. Das was ich dir verlinkte, kannst du dennoch adaptiv nutzen:

                            PHP-Code:
                            $("div.liveQueryTest").live("create", function(){
                                $(
                            this).somePlugin1();
                                $(
                            this).somePlugin2();
                                $(
                            this).somePlugin3();
                                $(
                            this).somePlugin4();
                            }); 
                            Und sollte noch kleiner sein als livequery. Wenns irgendwie geht, der Performance wegen dennoch delegate verwenden!
                            I like cooking my family and my pets.
                            Use commas. Don't be a psycho.
                            [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                            Kommentar


                            • #15
                              Wieso delegate()? Ist das soviel besser. Aber ich bin ich baff, dass man einfach die Events Nachladen kann ohne dafür etwas extra programmieren zu müssen... Fördert meine Faulheit nur noch mehr xD
                              "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!"

                              Kommentar

                              Lädt...
                              X