content dynamisch nachladen in welchem js steckt

**jahlives** · 22.04.2008, 18:01

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

**innovationTune** · 22.04.2008, 18:09

besser :-)

**Manko10** · 22.04.2008, 18:52

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.

**PHP-Desaster** · 22.04.2008, 18:56

Das ist ein Fall für eval.

**innovationTune** · 22.04.2008, 19:12

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?

**Manko10** · 22.04.2008, 19:14

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

**innovationTune** · 22.04.2008, 19:25

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?

**Manko10** · 22.04.2008, 19:28

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

**innovationTune** · 22.04.2008, 19:36

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>';

**innovationTune** · 22.04.2008, 19:58

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?

**jahlives** · 22.04.2008, 20:09

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

**innovationTune** · 22.04.2008, 20:15

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

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

**jahlives** · 22.04.2008, 20:26

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)

content dynamisch nachladen in welchem js steckt