Προς το περιεχόμενο

Ajax inline edit

sinikos

Από τον sinikos
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

sinikos Community Regular

sinikos

Δημοσ.
Δημοσ.

Καλησπερα. Θελω να βρω ενα τροπο να μπορω να κανω με ajax inline edit σε διαφορα σημεια της σελιδας μου που εχω φτιαξει με php και codeigniter. 

Βρηκα πολλα τουτοριαλ στο ιντερνετ αλλα ολα λενε για inline edit  μεσα σε table.

Εμενα δεν με ενδιαφερει η αλλαγη σε table. Θελω να αλλαζω h1, p, photos κλπ. Υπαρχει αλλος τροπος ή τελικα ειναι μονο για τα table ;

sinikos Community Regular

sinikos

Δημοσ.
  • Μέλος
Δημοσ.
23 λεπτά πριν, ajaxmonkey4hire είπε

https://www.google.com/search?hl=en&ei=yCG-W-yuJILosAWCzK5o&q=javascript+rich+text+editor&oq=javascript+rich+text+editor&gs_l=psy-ab.12..0l6j0i22i30l4.9980.20590..26030...0.0..0.140.1916.27j1......0....1..gws-wiz.......0i71j0i13i30j0i8i13i30j33i10.kzAaD7H9k5E

διαλέγεις και παίρνεις.

Νομίζω είναι άσχετο αυτό με αυτό που ρωτάω.

Έχω μια σελίδα που "γεμίζεται" δυναμικά από την βάση σε διάφορα σημεία του template.

Πολύ χοντρικά.

Ο τίτλος πχ είναι <?php echo $object->$title;  ?>

η περιγραφή πχ <?php echo $object->$info;  ?>

η εικόνα πχ <img src="images/<?php echo $object->$info;  ?>" />

 στο footer πχ Τηλέφωνο: <?php echo $object->$phone;  ?>

...

...

και ούτω καθεξής

Αυτό που θέλω είναι με διπλό κλικ να μπαίνει σε κατάσταση edit και onblur να αποθηκεύεται στην βάση.

Δηλαδή περίπου κάτι τέτοιο, αλλά όχι σε table...

για παραδειγμα να μπορουμε να αλλάξουμε αυτά

Snip20181010_18.png.cb9986203de2defe531c66dee328f756.png

 

 

 

 

 

ajaxmonkey4hire Contributor

ajaxmonkey4hire

Δημοσ.
Δημοσ. (επεξεργασμένο)

κανε κάτι  σαν και αυτό: http://104.236.83.163/editable.html 

<!doctype html>
<html>   
	<head>    
		<meta charset="utf-8"> 
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				$('.editable').click(function(e){
					e.preventDefault();
					$(this).attr('contenteditable', true).focus();
				
				});
				
				$('.editable').blur(function(e){
					alert('save elem id='+$(this).attr('id')+'\n\n'+$(this).html());
				});
			});
		</script>
	</head>
	<body>
		<h2 id="myHeader" class="editable">Click to edit this header</h2>
		<p id="myParagraph" class="editable">
			Click to edit this paragraph
		<p>
	</body>
</html>

 

Επεξ/σία από ajaxmonkey4hire
ajaxmonkey4hire Contributor

ajaxmonkey4hire

Δημοσ.
Δημοσ.

το κάνεις με ajax. Κάπως έτσι:

  

<!doctype html>
<html>   
	<head>    
		<meta charset="utf-8"> 
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				function ajax(path, payload, cb){
					$.ajax({
						url:  path,
						data: payload,
						method: 'POST',
						dataType: 'application/x-www-form-urlencoded'
					})
					.done(function(res){
						cb(null, res);
					})
					.fail(function(jq, statusText, err){
						cb(err, jq);
					});				
				}			
			
				$('.editable').click(function(e){
					e.preventDefault();
					$(this).attr('contenteditable', true).focus();
				
				});
				
				$('.editable').blur(function(e){
						ajax('http://whereverItNeedsToGo',
                        	$.param({'id':$(this).attr('id'),'content':$(this).html()}),
                            function(err, res){
                                if (err){
                                    //handle error
                                }else{
                                    //handle feedback
                                }
                            }
					);
				});
			});
		</script>
	</head>
	<body>
		<h2 id="myHeader" class="editable">Click to edit this header</h2>
		<p id="myParagraph" class="editable">
			Click to edit this paragraph
		<p>
	</body>
</html>

 

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...