Απορία Ajax PHP/Jquery/Javascript για καλύτερο κώδικα

[Zifnab]

Σε κάποιο σημείο στον κώδικα μου (στο περίπου) που είναι σε ένα αρχείο ajax.php

Code: Select all

 
$node = mongodb_getcurrentnode($_POST["nodeid"]);

if($_POST['mode']=="addparent") {
			echo '<span onClick="addparent(\''.$node["id"].\"); return false;"><a href="node.php?label='.$node["translabel"].'">'.$node["label"].'</a> '.$parentsstr.'</span>';
		}	
		else if($_POST['mode']=="addchild") {
			echo '<span onClick="addchild(\''.$node["id"].\"); return false;"><a href="node.php?label='.$node["translabel"].'">'.$node["label"].'</a> '.$parentsstr.'</span>';
		}

Η ιδέα είναι ότι θέλω να γίνεται παραγωγή διαφορετικών span που θα καλούν onclick διαφορετική function (addchild/addparent) ανάλογα με το mode στο POST και το δύσκολο είναι ότι σαν inputs στην function περνάω πράγματα από php... Πώς γίνεται να φύγει με κάποιο τρόπο το onclick από εκεί και να γίνει πιο σωστά με jquery/javascript

[nachos]

Μπορείς να βάλεις class attribute στα span που θα συμβολίζει το mode που περιγράφεις. Έπειτα μπορείς να βουτάς το κάθε διαφορετικό class με τον αντίστοιχο jquery selector και να του "κουμπώνεις" (με το συμπάθειο ) τον επιθυμητό event handler.

[Zifnab]

Μπορείς να βάλεις class attribute στα span που θα συμβολίζει το mode που περιγράφεις. Έπειτα μπορείς να βουτάς το κάθε διαφορετικό class με τον αντίστοιχο jquery selector και να του "κουμπώνεις" (με το συμπάθειο ) τον επιθυμητό event handler.

Οκ αυτό το σκέφτηκα αλλά τα inputs (έστω ότι είναι 2-3) που θα παίρνει ο event handler πού θα τα βρω ή μάλλον με ποιον τρόπο να τα περνάω - με hidden input πεδία :( ???
Ακόμα δεν μ' αρέσει κώδικας του στυλ: $('...').append('<li class="bar"><span class="foo">test</span></li>'); - πώς μπορώ να το αποφύγω..?

[nachos]

Οκ αυτό το σκέφτηκα αλλά τα inputs (έστω ότι είναι 2-3) που θα παίρνει ο event handler πού θα τα βρω ή μάλλον με ποιον τρόπο να τα περνάω - με hidden input πεδία :( ???
Ακόμα δεν μ' αρέσει κώδικας του στυλ: $('...').append('<li class="bar"><span class="foo">test</span></li>'); - πώς μπορώ να το αποφύγω..?

Τις παραμέτρους αν θες να τις διατηρήσεις οπωσδήποτε σαν POST, θα πρέπει να καταφύγεις σε λύση σαν αυτή που είπες, κοινώς να τις φτύσεις στο html σε hidden input και να τις βουτήξεις μετά με jquery. Βέβαια επειδή με web γενικά δεν την έχω ψάξει πολύ, googlare λίγο μήπως βρεις κάποια πιο formal μεθοδολογία. Πάντως αν γίνεται να τις γυρίσεις με GET, τότε μπορείς μετά να τις διαβάσεις κατευθείαν από javascript, μέσω του window.location.search object, που περιέχει όλο το GET query string.

Όσο για το attachment του event handler, προφανώς δεν θα κάνεις append με jquery όλο αυτό το μαρκούτσι!

Υποθέτω ότι τα "modes" που έχεις είναι συγκεκριμένα και προσδιορίζονται από κάποιο enum. Θα αντιστοιχίσεις ένα fix όνομα κλάσης ανά τιμή του enum, και αντί να φτύνεις τον κώδικα του event hanlder μέσα στο span, θα φτύνεις τη σωστή κλάση. Ας δούμε ένα από τα span που έδειξες στο αρχικό σου παράδειγμα:

Αυτό:

Code: Select all

echo '<span onClick="addparent(\''.$node["id"].\"); return false;"><a href="node.php?label='.$node["translabel"].'">'.$node["label"].'</a> '.$parentsstr.'</span>';

θα γίνει κάπως έτσι:

Code: Select all

echo '<span class="zifnabMode1"><a href="node.php?label='.$node["translabel"].'">'.$node["label"].'</a> '.$parentsstr.'</span>';

Μετά, χρησιμοποιόντας jquery θα κουμπώσεις τον handler ως εξής:

Code: Select all

$('.zifnabMode1').click(function() {
  var params = getArrayOfParamsFromHiddenFields();
  //execute rest of my stuff
});

Αυτό θα κάνει αυτόματα apply τον handler σε κάθε span της κλάσης "zifnabMode1". Προφανώς θα πρέπει να υλοποιήσεις και αυτή την εξωτική συνάρτηση 'getArrayOfParamsFromHiddenFields' που θα σου φέρνει τις παραμέτρους που χρειάζεσαι για να κάνεις τη δουλειά σου.

Αυτά τα ολίγα! Ελπίζω να σε κάλυψα!

[Zifnab]

Ok σε ευχαριστώ - νομίζω θα συμμαζευτεί ο κώδικας αρκετά με αυτά - και δεν βρήκα κάτι πιο formal ... - ναι χρειάζομαι ακόμα να είναι POST..

[nachos]

Ok σε ευχαριστώ - νομίζω θα συμμαζευτεί ο κώδικας αρκετά με αυτά - και δεν βρήκα κάτι πιο formal ... - ναι χρειάζομαι ακόμα να είναι POST..

Όποιος με POST params περπατεί, λάσπες και σκ*τά πατεί...

[Zifnab]

Πραγματικά ο κώδικας σουλουπώθηκε με αυτό! (Απόσπασμα:)

Από

Code: Select all

else if($_POST['mode']=="addtoscope") {
			echo '<span onClick="addtoscope(\''.$node["_id"].'\'); return false;"><a href="node.php?label='.$node["translabel"].'">'.$node["label"].'</a> '.$parentsstr.'</span>';
		}
		else if($_POST['mode']=="addparent") {
			echo '<span onClick="addparent(\''.$node["translabel"].'\',$(\'#nodeuid\').text()); return false;"><a href="node.php?label='.$node["translabel"].'">'.$node["label"].'</a> '.$parentsstr.'</span>';
		}	
		else if($_POST['mode']=="addchild") {
			echo '<span onClick="addchild(\''.$node["translabel"].'\',$(\'#nodeuid\').text()); return false;"><a href="node.php?label='.$node["translabel"].'">'.$node["label"].'</a> '.$parentsstr.'</span>';
		}
		else if($_POST['mode']=="addattribute") {
			echo '<span onClick="addattribute(\''.$node["translabel"].'\',$(\'#nodeuid\').text()); return false;"><a href="node.php?label='.$node["translabel"].'">'.$node["label"].'</a> '.$parentsstr.'</span>';
		}
		else if($_POST['mode']=="addtag") {
			echo '<span onClick="addtag(\''.$node["translabel"].'\',$(\'#nodeuid\').text()); return false;"><a href="node.php?label='.$node["translabel"].'">'.$node["label"].'</a> '.$parentsstr.'</span>';
		}

έγινε:

Code: Select all

		
else {
			?>
			<span class="lookupcapsule <?php echo $_POST['mode']; ?>">
			<a href="node.php?label=<?php echo $node["translabel"];?>"><?php echo $node["label"]; ?></a><?php echo $parentsstr; ?>
			<span style="display:none" class="nodeid"><?php echo $node["_id"];?></span>
			<span style="display:none" class="translabel"><?php echo $node["translabel"];?></span>
			</span>
			<?php
		
		}

και jquery:

Code: Select all

        var currentnodeid=$('#nodeuid').text();
        $('.lookupcapsule.addtoscope').live('click',function() { addtoscope($(this).find('.nodeid').text()); return false;});
	$('.lookupcapsule.addparent').live('click',function() { addparent($(this).find('.translabel').text(),currentnodeid); return false;});
	$('.lookupcapsule.addchild').live('click',function() { addchild($(this).find('.translabel').text(),currentnodeid); return false;});
	$('.lookupcapsule.addattribute').live('click',function() { addattribute($(this).find('.translabel').text(),currentnodeid); return false;});
	$('.lookupcapsule.addtag').live('click',function() { addtag($(this).find('.translabel').text(),currentnodeid); return false;});

[nachos]

Ωραίος ο παίχτης!