content dynamisch nachladen in welchem js steckt

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

  • content dynamisch nachladen in welchem js steckt

    geschätzte jsWelt,

    ich möchte gerne content refreshen in einem div.

    einfaches beispiel:

    HTML-Code:
    Code:
     <script type="text/javascript" src="http://demos.mootools.net/demos/mootools.svn.js"></script>
    <script type="text/javascript">
    		
       function getData() {
    			txt = '<h3 class="toggler">
    <a href="#introduction">text 1</a></h3><div class="accordion">
    <div class="item"><span>Shirt 1</span><br />
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, </div>
    </div><h3 class="toggler">
    <a href="#introduction">text 1</a></h3><div class="accordion">
    <div class="item"><span>Shirt 2</span><br />
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy </div>
    </div>';				
    			var el = document.getElementById("items");
    			el.innerHTML= txt;
      }			
    </script>
    	
    </head>
    
    <body>
    
    <form>
    	<input type="button" value="getData" onClick="getData()" />
    </form>
    <div id="items"><h3 class="toggler">
    <a href="#introduction">text 1</a></h3><div class="accordion">
    <div class="item"><span>Shirt 1</span><br />
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, </div>
    </div><h3 class="toggler">
    <a href="#introduction">text 1</a></h3><div class="accordion">
    <div class="item"><span>Shirt 2</span>
    <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy </div></div></div>		
    
    
    <!-- muss unterhalb vo code stehen, warum auch immer -->
    <script type="text/javascript" src="toggler.js"></script>
    
    </body>
    </html>
    wenn die seite refresht wird, funktioniert der accordion Effekt und sobald ich den identischen code dynamisch nachlade, funktioniert dieser im identischen div nicht mehr.

    Was ist falsch an meinem script?

    Liebe grüsse aus Zürich
    Roger
    Zuletzt geändert von innovationTune; 22.04.2008, 18:18.

  • #2
    Liebe grüsse aus Zürich
    Liebe Grüsse von der Hardturmstrasse und Code umbrechen aber flux. Sonst landet der Thread im Trash

    Gruss

    tobi
    Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

    [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
    Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

    Kommentar


    • #3
      besser :-)

      Kommentar


      • #4
        Wie ich dich verstehe, soll Code nachgeladen werden, der auch zur Ausführung kommt?
        Das geht nur solange, wie das load-Event noch nicht eingetreten ist, also solange die Seite noch nicht komplett geladen wurde. Sobald die Seite vollständig geladen wurde, lässt sich kein fremder JS-Code mehr einbinden.
        Doch, natürlich lässt er sich noch einbinden. Aber er kommt eben nicht mehr zur Ausführung.

        Kommentar


        • #5
          Das ist ein Fall für eval.

          Kommentar


          • #6
            mhhh, das ist sehr schade... habe es nun auch noch mit dem mootools cart beispiel versucht...

            die div's welche nachgeladen werden können nicht mehr drag & drop in den cart verschoben werden...

            tja, da bin ich irgendwie am ende mit meinen ideen...

            ich würde nun gerne nicht jedesmal die ganze seite neu laden wenn ich eine action ausführe...

            was habe ich noch für Möglichkeiten?

            Kommentar


            • #7
              Wie PHP-Desaster schon schreib: eval(). Das führt einen String als JavaScript-Code aus. Eine andere Möglichkeit gibt es nicht.

              Kommentar


              • #8
                da komme ich noch nicht ganz mit... was das eval() betrifft.

                Code:
                   function getData() {			
                	txt = '<?=$data?>';
                	var el = document.getElementById("items");
                	el.innerHTML= txt;
                  }
                dies funktion soll hier:
                Code:
                <form>
                	<input type="button" value="getData" onClick="getData()" />
                </form> 
                <div id="items"></div>
                nachgelden werden.

                Wie muss ich nun das eval() anwenden?

                Kommentar


                • #9
                  Wenn es sich nur um EventHandler-Attribute handelt, muss eigentlich nichts nachgeladen werden. Die müssten automatisch angenommen werden.

                  Kommentar


                  • #10
                    ich war eben auch der Meinung.

                    ich verwende mootools und lade diese am anfang.
                    ich kann diesen datenstring am anfang gleich mit laden und das drag&drop funktioniert

                    wenn ich nun den identischen string nachlade ins identische div so funktioniert drag und drop nicht mehr.

                    der datastring sieht folgendermassen aus:
                    Code:
                    $data = '<div  id="1" class="find_item">' .
                    'hallo text 1 <br />' .
                    '</div>' .
                    '</div>' .
                    '<div  id="2" class="find_item">' .
                    'hallo und so <br />'.
                    '</div>' .
                    '</div>';

                    Kommentar


                    • #11
                      ich habe nun einen lauffähigen mootools Cart gebaut in welchem ich daten per ajax nachladen möchte.

                      Dieser Code ist lauffähig und kann als Beispiel für den Mootools drag&Drop angesehen werden.

                      Code:
                      <?php
                      
                      $data = '<div  id="1" class="find_item">' .
                      'Artikel 1' .
                      '</div>' .
                      '<div  id="2" class="find_item">' .
                      'Artikel 2'.
                      '</div>';
                      
                      $data1 = '<div  id="3" class="find_item">' .
                      'Artikel 3' .
                      '</div>' .
                      '<div  id="4" class="find_item">' .
                      'Artikel 4'.
                      '</div>';
                      ?>
                      
                      <script type="text/javascript" src="http://demos.mootools.net/demos/mootools.svn.js"></script>
                      <script type="text/javascript">
                         function getData() {			
                      			txt = '<?=$data1?>';
                      			var el = document.getElementById("items");
                      			el.innerHTML= txt;
                        }  
                      window.addEvent('domready', function(){
                      	var drop = $('cart');
                      	var dropFx = drop.effect('background-color', {wait: false}); 
                      	
                      	$$('.find_item').each(function(find_item){
                      	
                      		find_item.addEvent('mousedown', function(e) {
                      			e = new Event(e).stop();
                      	
                      			var clone = this.clone()
                      				.setStyles(this.getCoordinates()) 
                      				.setStyles({'opacity': 0.7, 'position': 'absolute'})
                      				.addEvent('emptydrop', function() {
                      					this.remove();
                      					drop.removeEvents();
                      				}).inject(document.body);
                      	
                      			drop.addEvents({
                      				'drop': function() {
                      					drop.removeEvents();
                      					clone.remove();
                      					find_item.clone().inject(drop);
                      					dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
                      				},
                      				'over': function() {
                      					dropFx.start('98B5C1');
                      				},
                      				'leave': function() {
                      					dropFx.start('ffffff');
                      				} 
                      			}); 
                      	
                      			var drag = clone.makeDraggable({
                      				droppables: [drop]
                      			}); // this returns the dragged element
                      				
                      			drag.start(e); // start the event manual
                      		});
                      	
                      	});
                      });  	
                      </script>
                      <style type="text/css">
                      #cart {
                      	float: right;
                      	width: 100%;
                      	background-color: #fff;
                      	border: 1px dotted gray;
                      	padding-bottom: 30px;
                      }
                      .find_item {
                      	float: left;
                      	position: relative;
                      	height: auto;
                      	background-color: #fff;
                      	cursor: move;
                      	border:1px solid green;
                      	margin-left:5px;
                      }
                      #cart .find_item {
                      	width: 150px;
                      	height: auto;
                      	margin: 5px;
                      	border-width: 1px;
                      	cursor: default;
                      }
                      </style>
                      
                      
                      <div id="cart">&nbsp;</div>
                      <br />
                      <form>
                      	<input type="button" value="getData" onClick="getData()" />
                      </form> 
                      <div id="items"><?=$data?></div>
                      Meine Frage:
                      Warum funktioniert das Drag & Drop nach dem nachladen der Daten nicht mehr indem ich auf den getData Button drücke?
                      Zuletzt geändert von innovationTune; 22.04.2008, 20:13.

                      Kommentar


                      • #12
                        Was du in deinem ersten Post gemacht hast (Code umbrechen) machst du bitte auch im letzten Post Ich habe einer 1650-er Auflösung und immer noch einen Scrollbalken

                        Grüässli

                        tobi
                        Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

                        [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
                        Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

                        Kommentar


                        • #13
                          so jetzt ist es umgebrochen und gaaaanz schön formatiert ja ja...

                          Grüsse an die Hardturmstrasse...
                          dort würde ich auch gerne wohnen :-)

                          Kommentar


                          • #14
                            dort würde ich auch gerne wohnen
                            OffTopic:

                            Dort arbeite ich zum Glück nur. In dieser Stadt würde ich nicht mal gratis wohnen wollen (so als eingefleischter St.Galler)

                            Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

                            [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
                            Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

                            Kommentar

                            Lädt...
                            X