Actualizarea automata a unei coloane intrun tabel html

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
Avatar utilizator
ionatan
Mesaje: 94

Actualizarea automata a unei coloane intrun tabel html

Salut,
Am un tabel cu cateva coloane in care preiau din baza de date in urnma unei interogatii sql toate coloane si randurile sunt editabile cu jquery.jeditable mai putin ultima coloana unde imi afiseaza rezultatul in urma inmultirii a doua coloane. As vrea fara sa mai reincarc pagina in urma editarii unui rand, sa se faca un refres si ultimei coloane afisandu-mi in timp real rezultatul
EX
Cantitate pret .... valoare
3 .......... 20 .......... 60
1 .......... 10 .......... 10

........ TOTAL .......... 70

cand dau clic si modific valoarea de ex la cantitate se face update in bd iar la TOTAL am reusit sa imi arate rezultatul cel nou (o actualizare la 3 sec) dar la valoare ramane neschimbat pana dau un refres la pagina . Cum as putea face un refres doar la coloana valoare aici nu ma mai desurc . Multumesc
Cumpără adevărul, şi nu-l vinde, înţelepciunea, învăţătura şi priceperea.
https://www.crestinmultimedia.com/
andras Mesaje: 430
Pentru asa ceva eu folosesc Ajax() care opereaza si in BD, dar eu generez cu ajax tot tabelul html si n-am probleme cu refresh.
MarPlo Mesaje: 4343
Salut
Se foloseste Ajax. Cand dai clic si se face update in baza de date, daca acest update se face prin Ajax, fara refresh, atunci cand se primeste raspunsul de la php apelezi in javascript o functie care modifica datele din tabelul html.
Asa fara codul pe care-l folosesti nu se poate da un raspuns mai exact; depinde de structura tabelului html si codul javascript.

- Sau cum a scris "andras", poti transmite la Ajax intreg tabelul html cand se face update si actualizezi /inlocuesti in pagina tabelul html cu cel primit ca raspuns de la php.

- Nu cunosc cum e cu plugin-ul jeditable.
ionatan Mesaje: 94
tabel html

Cod: Selectaţi tot

  <table class="as_gridder_table">
            <tr class="grid_header">
                <td><div class="grid_heading">Nr</div></td>
                <td><div class="grid_heading">Denumire manopera</div></td>
				<td><div class="grid_heading">U.M</div></td>
				<td><div class="grid_heading">Cantitate</div></td>
					<td><div class="grid_heading">Pret unitar</div></td>
                <td><div class="grid_heading">Valoare</div></td>
                <td><div class="grid_heading">Sterge</div></td>
            </tr>
            <?php
            if($count <= 0) {
            ?>
            <tr id="norecords">
                <td colspan="7" align="center">No records found <a href="addnew" id="gridder_insert" class="gridder_insert"><img src="images/insert.png" alt="Add New" title="Add New" /></a></td>
            </tr>
            <?php } else {
            $i = 0;
            foreach($record as $records) {
            $i = $i + 1;
            ?>
            <tr style="border:#000000 solid 1px;" class="<?php if($i%2 == 0) { echo 'even'; } else { echo 'odd'; } ?>">
              <td><div class="grid_content sno"><span><?php echo $i; ?></span></div></td>
			  <td ><div class="grid_content editable"><span><?php echo $records['fname']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("fname|".$records['id']); ?>" value="<?php echo $records['fname']; ?>" /></div></td>
              <td ><div class="grid_content editable"><span><?php echo $records['um']; ?>  &nbsp;&nbsp; </span><input type="text" class="gridder_input" name="<?php echo encrypt("um|".$records['id']); ?>" value="<?php echo $records['um']; ?>" /></div></td>
               <td ><div class="grid_content editable"><span><?php echo $records['cantitate']; ?>  &nbsp;&nbsp; </span><input type="text" class="gridder_input" name="<?php echo encrypt("cantitate|".$records['id']); ?>" value="<?php echo $records['cantitate']; ?>" /></div></td>
             <td style="border:#000000 solid 1px;" align="right"><div class="grid_content editable"><span><?php echo $records['pretunitar']; ?>  &nbsp;&nbsp; </span><input type="text" class="gridder_input" name="<?php echo encrypt("pretunitar|".$records['id']); ?>" value="<?php echo $records['pretunitar']; ?>" /></div></td>
              <td style="border:#ff0000 solid 3px;" align="right">
			    <div class="grid_content editable" id="showvaloare" >
			
				 <?php 
				    $cantitate = $records['cantitate'];
				   $pretunitar =  $records['pretunitar'];
				      $valoare = $cantitate * $pretunitar;
                      echo $valoare;
				   ?>
				 
				 </div>
				 </td>
            
               <td style="border:#000000 solid 1px;" align="center">
                  <a href="<?php echo encrypt($records['id']); ?>" class="gridder_delete"><img src="images/delete.png" alt="Delete" title="Delete" /></a>
			   </td>
            </tr>
            <?php
                }
            }	
            ?>  
		   <tr>
            <td> </td> <td> </td> <td> </td>
			<td> </td>
			<td align="right"> <b> TOTAL &nbsp;&nbsp;</b></td>
			<td>
			<div id="show" align="right" >  
			<?php	
			$query=mysql_query("SELECT SUM(cantitate*pretunitar) as age FROM grid");
                while($sumar=mysql_fetch_array($query))
             {
              $suma=$sumar["age"];
                 }
           echo"<b>"; echo $suma; echo"&nbsp;&nbsp;</b> ";
			?>     
			
	</div> </td>
    			</tr>
				
				<script type="text/javascript">
CargarDiv = function (objetivo, url)
 {$(document).ready(function() {$(objetivo).load(url+"?" + (new Date()).getTime());});}
setInterval('CargarDiv("#show", "total.php")', 5000 ); 
</script>
				
		<tr id="addnew" style="border:#000000 solid 1px;">
            	<td>&nbsp;</td>
            	<td colspan="6">
                <form id="gridder_addform" method="post">
                <input type="hidden" name="action" value="addnew" />
                <table width="100%">
                <tr>
				    <td>
					  <td> Descriere<input type="text" name="fname" id="fname" class="gridder_add" /></td>
<td> U.M<input type="text" name="um" id="um" class="gridder_add" /></td>
<td> Pret unitar<input type="text" name="pretunitar" id="pretunitar" class="gridder_add" /></td>
<td> Cantitate<input type="text" name="cantitate" id="cantitate" class="gridder_add" /></td>					
                   
                    <td> Valoare <input type="text" name="age" id="age" class="gridder_add" /></td>
                    <td align="center">&nbsp;
                    <input type="submit" id="gridder_addrecord" value="" class="gridder_addrecord_button" title="Add" /> &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="cancel" id="gridder_cancel" class="gridder_cancel"><img src="images/delete.png" alt="Cancel" title="Cancel" /></a></td>
				</tr>
                </table>                    
                </form>
            </tr>
            </table>
codul javascript

Cod: Selectaţi tot

<script type="text/javascript">
$(function(){
	// Function for load the grid
	function LoadGrid() {
		var gridder = $('#as_gridder');
		var UrlToPass = 'action=load';
		gridder.html('Se incarca...');
		$.ajax({
			url : 'ajax.php',
			type : 'POST',
			data : UrlToPass,
			success: function(responseText) {
				gridder.html(responseText);
			}
		});
	}
	
	// Seperate Function for datepiker() to save the value
	function ForDatePiker(ThisElement) {
		ThisElement.prev('span').html(ThisElement.val()).prop('title', ThisElement.val());
		var UrlToPass = 'action=update&value='+ThisElement.val()+'&crypto='+ThisElement.prop('name');
		$.ajax({
			url : 'ajax.php',
			type : 'POST',
			data : UrlToPass
		});
	}
	
	LoadGrid(); // Load the grid on page loads
	
	
	// Execute datepiker() for date fields
	$("body").delegate("input[type=text].datepicker", "focusin", function(){
		var ThisElement = $(this);
		$(this).datepicker({
	   		dateFormat: 'yy/mm/dd',
			onSelect: function() {
				setTimeout(ForDatePiker(ThisElement), 500);
			}
	   });
	});
	
	// Show the text box on click
	$('body').delegate('.editable', 'click', function(){
		var ThisElement = $(this);
		ThisElement.find('span').hide();
		ThisElement.find('.gridder_input').show().focus();
	});
	
	// Pass and save the textbox values on blur function
	$('body').delegate('.gridder_input', 'blur', function(){
		var ThisElement = $(this);
		ThisElement.hide();
		ThisElement.prev('span').show().html($(this).val()).prop('title', $(this).val());
		var UrlToPass = 'action=update&value='+ThisElement.val()+'&crypto='+ThisElement.prop('name');
		if(ThisElement.hasClass('datepicker')) {
			return false;
		}
		$.ajax({
			url : 'ajax.php',
			type : 'POST',
			data : UrlToPass
		});
	});
	
	// Same as the above blur() when user hits the 'Enter' key
	$('body').delegate('.gridder_input', 'keypress', function(e){
		if(e.keyCode == '13') {
			var ThisElement = $(this);
			ThisElement.hide();
			ThisElement.prev('span').show().html($(this).val()).prop('title', $(this).val());
			var UrlToPass = 'action=update&value='+ThisElement.val()+'&crypto='+ThisElement.prop('name');
			if(ThisElement.hasClass('datepicker')) {
				return false;
			}
			$.ajax({
				url : 'ajax.php',
				type : 'POST',
				data : UrlToPass
			});
		}
	});
	
	// Function for delete the record
	$('body').delegate('.gridder_delete', 'click', function(){
		var conf = confirm('Are you sure want to delete this record?');
		if(!conf) {
			return false;
		}
		var ThisElement = $(this);
		var UrlToPass = 'action=delete&value='+ThisElement.attr('href');
		$.ajax({
			url : 'ajax.php',
			type : 'POST',
			data : UrlToPass,
			success: function() {
				LoadGrid();
			}
		});
		return false;
	});
	
	
	// Add new record
	
	// Add new record when the table is empty
	$('body').delegate('.gridder_insert', 'click', function(){
		$('#norecords').hide();
		$('#addnew').slideDown();
		return false;
	});
	
	
	// Add new record when the table in non-empty
	$('body').delegate('.gridder_addnew', 'click', function(){
		$('html, body').animate({ scrollTop: $('.as_gridder').offset().top}, 25000); // Scroll to top gridder table
		$('#addnew').slideDown();
		return false;
	});
	
	// Cancel the insertion
	$('body').delegate('.gridder_cancel', 'click', function(){
		LoadGrid()
		return false;
	});
	
	// For datepiker
	$("body").delegate(".gridder_add.datepiker", "focusin", function(){
		var ThisElement = $(this);
		$(this).datepicker({
	   		dateFormat: 'yy/mm/dd' 
	   });
	});
	
	// Pass the values to ajax page to add the values
	$('body').delegate('#gridder_addrecord', 'click', function(){
		
		// Do insert vaidation here
		if($('#fname').val() == '') {
			$('#fname').focus();
			alert('Enter the First Name');
			return false;
		}
		if($('#lname').val() == '') {
			$('#lname').focus();
			alert('Enter the Last Name');
			return false;
		}
		if($('#age').val() == '') {
			$('#age').focus();
			alert('Enter the Age');
			return false;
		}
		if($('#profession').val() == '') {
			$('#profession').focus();
			alert('Select the Profession');
			return false;
		}
		if($('#date').val() == '') {
			$('#date').focus();
			alert('Select the Date');
			return false;
		}
		
		// Pass the form data to the ajax page
		var data = $('#gridder_addform').serialize();
		$.ajax({
			url : 'ajax.php',
			type : 'POST',
			data : data,
			success: function() {
				LoadGrid();
			}
		});
		return false;
	});
});
</script>
Am luat de aici si am editat:
asif18.com/21/php/simple-on-click-edit-in-jquery-ajax-php-simple-php-data-grid/
Cumpără adevărul, şi nu-l vinde, înţelepciunea, învăţătura şi priceperea.
https://www.crestinmultimedia.com/
MarPlo Mesaje: 4343
Nu te pot ajuta la acest script fiindca e mult cod, nu poate fi testat separat, si nu cunosc cum e cu plugin-ul jeditable.
La ce am inteles din cod, in functia $.ajax() care face update ar trebui adaugata proprietatea "success" iar in ea construit un cod jQuery prin care sa gasesti randul de tabel unde s-a facut modificarea, apoi pe acel rand sa schimbi datele din casuta de la coloana care vrei.

Cu acesat cod poti sa preiei randul de tabel in care este elementul respectiv, si sa ajungi la coloana a treia din el:

Cod: Selectaţi tot

var $row = $(this).closest('tr');
var $col3 = $row.find('td:eq(2)');
Mai departe nu stiu cum sa ajungi la elementul care sa-i schimbi valoarea.
andras Mesaje: 430
Codul pus de tine la sectiunea case "load":

Cod: Selectaţi tot

<?php 
$cantitate = $records['cantitate'];
$pretunitar =  $records['pretunitar'];
$valoare = $cantitate * $pretunitar;
echo $valoare;
?>
trebuie pus si la sectiunea case "update":, dar eu la sectiunea case "update": as regenera din ajax tot tabelul html si l-as pune intr-un <div> (ceva de genul "<div><?php echo $tabel; ?></div>").
Si bineinteles, pune div-ul in ajax la success,adica:

Cod: Selectaţi tot

success : function(msg) {
$('#div).html(msg);
}

Subiecte similare