Navigationpunkte verschieben mit PHP & JavaScrip

Dieses Thema Navigationpunkte verschieben mit PHP & JavaScrip im Forum "Webentwicklung, Hosting & Programmierung" wurde erstellt von Ciryx, 14. Nov. 2006.

Thema: Navigationpunkte verschieben mit PHP & JavaScrip Sooo... Da bin ich wieder! ??? Die Navigationspunkte auf meiner Page werden aus einer DB ausgelesen. Nun habe ich...

  1. Sooo... Da bin ich wieder! ???

    Die Navigationspunkte auf meiner Page werden aus einer DB ausgelesen. Nun habe ich mir Gedanken über die Positionierung gemacht. Ich möchte diese im Admin Bereich vornehmen können bzw. immer wieder ändern.

    Nach folgendem Schema möchte ich vorgehen:

    [​IMG]

    Im linken <select> Feld erscheinen die aktuellen Navigationspunkte in richtiger Ordnung (ORDER BY position). Rechts erscheint standardmässig ein leeres <select> Feld. Wählt man nun links einen Navigationspunkt aus, und klickt auf den Button, so soll dieser rechts im <select> Feld erscheinen.

    Probleme bereiten mir folgende Punkte.

    1. Wie mache ich anschliessend die UPDATE Querys
    2. JavaScript

    Es wäre toll, wenn mir jemand weiterhelfen könnte!

    Danke...
     
  2. Das ist zu 100% genau das was ich wollte...

    Nun also gehen meine Fragen weiter:

    - Ich möchte das Script so verkürzen das man nur jeweils einen Punkt hin und her schieben kann und nicht den ganzen <select> (>> bzw. <<).
     
  3. Gut... lassen wir das verkürzen einmal weg...

    Ich habe momentan folgenden Code:

    Code:
    <?php
    if(isset($_REQUEST[save]))
    		{
    			print_r($_REQUEST[toBox]);
    			
    			echo <br><br><br>;		
    		}
    
    		// ###################################
    		$sql = SELECT * FROM page_navi WHERE type =->master' OR type =->user' ORDER BY position ASC;
    		
    		$r = mysql_query($sql);
    		
    		echo <form method=\post\ action=\?id=master_menu.php\>;
    		echo <select multiple name=\fromBox\ id=\fromBox\>;
    
    		while($row = mysql_fetch_array($r))
    		{
    			echo <option value=\$row[id]\>$row[name]</option>;	
    		}
    
     		echo </select>;
    		echo <select multiple name=\toBox[]\ id=\toBox\>;
    		echo </select>;
    		echo <input type=\submit\ value=\save\ name=\save\>;
    		echo </form>;
    		echo <script type=\text/javascript\>;
    		echo createMovableOptions(\fromBox\,\toBox\,300,150,'Aktuelle Navigation','Neue Navigation');;
    		echo </script>;				
    		// ###################################
    ?>
    
    Was muss ich machen, damit ich den toBox Array ausgeben kann bzw. Die Daten neu in die DB schreiben.

    Ich denke es hat was mit dem Code zu tun, welcher auf der Seite, die Du mir gepostet hast, zu unterst steht!
     
  4. Nun gut... Ich bin jetzt ein paar Schritte weiter nach dem ich gemerkt habe, dass man im Vorteil ist, wenn man lesen kann.

    Hier meine File welches die Selects darstellt:

    show_selects.php
    Code:
    <?php
    if(isset($_REQUEST[save]))
    		{
    			echo <pre>;
    			print_r($_REQUEST);
    			echo </pre>;
    			
    			echo <br><br><br>;		
    		}
    
    		// ###################################
    		$sql = SELECT * FROM page_navi WHERE type =->master' OR type =->user' ORDER BY position ASC;
    		
    		$r = mysql_query($sql);
    		
    		echo <form method=\post\ action=\?id=master_menu.php\ onSubmit=\selectItem()\>;
    		echo <select multiple name=\fromBox[]\ id=\fromBox\>;
    
    		while($row = mysql_fetch_array($r))
    		{
    			echo <option value=\$row[id]\>$row[name]</option>;	
    		}
    
     		echo </select>;
    		echo <select multiple name=\toBox[]\ id=\toBox\>;
    		
    		
    		echo </select>;
    		echo <input type=\submit\ value=\save\ name=\save\>;
    		echo </form>;
    		echo <script type=\text/javascript\>;
    		echo createMovableOptions(\fromBox\,\toBox\,300,150,'Aktuelle Reihenfolge','Neue Reihenfolge');;
    		echo </script>;				
    		// ###################################
    ?>
    
    und hier das .js File welches das Applet aufbaut.

    dyn_nav.js
    Code:
    <script type=text/javascript>
    	
    	/************************************************************************************************************
    	(C) [url]www.dhtmlgoodies.com[/url], October 2005
    	
    	This is a script from [url]www.dhtmlgoodies.com[/url]. You will find this and a lot of other scripts at our website.	
    	
    	Terms of use:
    	You are free to use this script as long as the copyright message is kept intact. However, you may not
    	redistribute, sell or repost it without our permission.
    	
    	Thank you!
    	
    	[url]www.dhtmlgoodies.com[/url]
    	Alf Magne Kalleland
    	
    	************************************************************************************************************/
    	
    		
    	var fromBoxArray = new Array();
    	var toBoxArray = new Array();
    	var selectBoxIndex = 0;
    	
    	function moveSingleElement()
    	{
    		var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
    		var tmpFromBox;
    		var tmpToBox;
    		if(this.tagName.toLowerCase()=='select'){			
    			tmpFromBox = this;
    			if(tmpFromBox==fromBoxArray[selectBoxIndex])tmpToBox = toBoxArray[selectBoxIndex]; else tmpToBox = fromBoxArray[selectBoxIndex];
    		}else{
    		
    			if(this.value.indexOf('>')>=0){
    				tmpFromBox = fromBoxArray[selectBoxIndex];
    				tmpToBox = toBoxArray[selectBoxIndex];			
    			}else{
    				tmpFromBox = toBoxArray[selectBoxIndex];
    				tmpToBox = fromBoxArray[selectBoxIndex];	
    			}
    		}
    		
    		for(var no=0;no<tmpFromBox.options.length;no++){
    			if(tmpFromBox.options[no].selected){
    				tmpFromBox.options[no].selected = false;
    				tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);
    				
    				for(var no2=no;no2<(tmpFromBox.options.length-1);no2++){
    					tmpFromBox.options[no2].value = tmpFromBox.options[no2+1].value;
    					tmpFromBox.options[no2].text = tmpFromBox.options[no2+1].text;
    					tmpFromBox.options[no2].selected = tmpFromBox.options[no2+1].selected;
    				}
    				no = no -1;
    				tmpFromBox.options.length = tmpFromBox.options.length-1;
    											
    			}			
    		}
    		
    		
    // 		var tmpTextArray = new Array();
    // 		for(var no=0;no<tmpFromBox.options.length;no++){
    // 			tmpTextArray.push(tmpFromBox.options[no].text +->___' + tmpFromBox.options[no].value);			
    // 		}
    // 		tmpTextArray.sort();
    // 		var tmpTextArray2 = new Array();
    // 		for(var no=0;no<tmpToBox.options.length;no++){
    // 			tmpTextArray2.push(tmpToBox.options[no].text +->___' + tmpToBox.options[no].value);			
    // 		}		
    // 		tmpTextArray2.sort();
    // 		
    // 		for(var no=0;no<tmpTextArray.length;no++){
    // 			var items = tmpTextArray[no].split('___');
    // 			tmpFromBox.options[no] = new Option(items[0],items[1]);
    // 			
    // 		}		
    // 		
    // 		for(var no=0;no<tmpTextArray2.length;no++){
    // 			var items = tmpTextArray2[no].split('___');
    // 			tmpToBox.options[no] = new Option(items[0],items[1]);			
    // 		}
    	}
    	
    	function moveAllElements()
    	{
    		var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
    		var tmpFromBox;
    		var tmpToBox;		
    		if(this.value.indexOf('>')>=0){
    			tmpFromBox = fromBoxArray[selectBoxIndex];
    			tmpToBox = toBoxArray[selectBoxIndex];			
    		}else{
    			tmpFromBox = toBoxArray[selectBoxIndex];
    			tmpToBox = fromBoxArray[selectBoxIndex];	
    		}
    		
    		for(var no=0;no<tmpFromBox.options.length;no++){
    			tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);			
    		}	
    		
    		tmpFromBox.options.length=0;
    		
    	}
    	
    	
    	
    	function createMovableOptions(fromBox,toBox,totalWidth,totalHeight,labelLeft,labelRight)
    	{		
    		fromObj = document.getElementById(fromBox);
    		toObj = document.getElementById(toBox);
    		
    
    		
    		fromObj.ondblclick = moveSingleElement;
    		toObj.ondblclick = moveSingleElement;
    
    		
    		fromBoxArray.push(fromObj);
    		toBoxArray.push(toObj);
    		
    		var parentEl = fromObj.parentNode;
    		
    		var parentDiv = document.createElement('DIV');
    		parentDiv.className='multipleSelectBoxControl';
    		parentDiv.id =->selectBoxGroup' + selectBoxIndex;
    		parentDiv.style.width = totalWidth +->px';
    		parentDiv.style.height = totalHeight +->px';
    		parentEl.insertBefore(parentDiv,fromObj);
    		
    		
    		var subDiv = document.createElement('DIV');
    		subDiv.style.width = (Math.floor(totalWidth/2) - 15) +->px';
    		fromObj.style.width = (Math.floor(totalWidth/2) - 15) +->px';
    
    		var label = document.createElement('SPAN');
    		label.innerHTML = labelLeft;
    		subDiv.appendChild(label);
    		
    		subDiv.appendChild(fromObj);
    		subDiv.className =->multipleSelectBoxDiv';
    		parentDiv.appendChild(subDiv);
    		
    		
    		var buttonDiv = document.createElement('DIV');
    		buttonDiv.style.verticalAlign =->middle';
    		buttonDiv.style.paddingTop = (totalHeight/2) - 50 +->px';
    		buttonDiv.style.width =->30px';
    		buttonDiv.style.textAlign =->center';
    		parentDiv.appendChild(buttonDiv);
    		
    		var buttonRight = document.createElement('INPUT');
    		buttonRight.type='button';
    		buttonRight.value =->>';
    		buttonDiv.appendChild(buttonRight);	
    		buttonRight.onclick = moveSingleElement;	
    		
    			
    		
    		var buttonLeft = document.createElement('INPUT');
    		buttonLeft.style.marginTop='10px';
    		buttonLeft.type='button';
    		buttonLeft.value =-><';
    		buttonLeft.onclick = moveSingleElement;
    		buttonDiv.appendChild(buttonLeft);		
    		
    
    		
    		var subDiv = document.createElement('DIV');
    		subDiv.style.width = (Math.floor(totalWidth/2) - 15) +->px';
    		toObj.style.width = (Math.floor(totalWidth/2) - 15) +->px';
    
    		var label = document.createElement('SPAN');
    		label.innerHTML = labelRight;
    		subDiv.appendChild(label);
    				
    		subDiv.appendChild(toObj);
    		parentDiv.appendChild(subDiv);		
    		
    		toObj.style.height = (totalHeight - label.offsetHeight) +->px';
    		fromObj.style.height = (totalHeight - label.offsetHeight) +->px';
    
    			
    		selectBoxIndex++;
    		
    	}
    	
    	
    	
    
    function selectItem()
    {
     var obj = document.getElementById('toBox[]');
     for(var no=0;no<obj.options.length;no++){
     obj.options[no].selected = true;
     }
    }
    
    
    </script>
    
    Die Sortierungsfunktionen Habe ich auskommentiert. (Ich möchte die Reihenfolge ja selber festlegen können)

    Die unterste Funktion [function selectItem()] soll nun allso das mehrfach selektieren im <select> ermöglichen. So weit so gut. Es funktioniert nun absolut alles! Genau so wie ich es will! Aber leider nur im IE! Kann mir jemand sagen, was ich ändern muss damit auch der Firefox mitmacht?

    Danke...
     
Die Seite wird geladen...

Navigationpunkte verschieben mit PHP & JavaScrip - Ähnliche Themen

Forum Datum
Fehler beim Verschieben von Desktop und Dokumente Windows 10 Forum 3. Juli 2016
Desktop Icons lassen sich nicht mehr verschieben Windows 10 Forum 31. Okt. 2015
Externe Festplatte kopiert statt zu verschieben! Hardware 10. Okt. 2015
Dokumente verschieben rückgängig machen Windows 7 Forum 9. März 2015
Partition verwalten/verschieben Windows 8 Forum 4. März 2015