Solved

Update mysql table from jquery ui dialog in datable.net webpage

Posted on 2011-02-11
5
321 Views
Last Modified: 2013-11-27
Hi ! and sorry for my english
I display projects informations in table with datable.net code  (see the code datable.php) -  No problem. When I click a row i obtain some details in a jquery ui dialog box (see the code edit.php) -  No problem. The edit.php page is load in dialog box with ajax sack plugin -  No problem. But if a use a update button from the form in dialog box it doesnt update the data into mysql table (php code with isset method) .

I think i have to use the jquery method something like
$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success
  dataType: dataType
});
 inside my datable.php code but it doesnt work too

Please could you help me many tanks
WEBPAGE datable.php 

<?php
	header('Content-type: text/html; charset=iso-8859-1');
		$id = $_GET["id"];
?>	  	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"-s />
		
		<title>DataTables example</title>
		<link rel="stylesheet" href="../_code%20datatable/_datatable%20css/demo_page.css" />
		<link rel="stylesheet" href="../_code%20datatable/_datatable%20css/demo_table.css" />
		<link rel="stylesheet" href="../_code%20datatable/_datatable%20css/demo_table-tools.css" />	
		<link rel="stylesheet" href="../_code jquery ui/_jquery ui css/jquery.ui.base.css">
	
		<script type="text/javascript" language="javascript" src="../_code%20global%20js/js-jquery-1.4.4.js"></script>
		<script type="text/javascript" language="javascript" src="../_code%20datatable/_datatable%20js/js-jquery-datatables-min.js"></script>
		<script type="text/javascript" language="javascript" src="../_code%20datatable/_datatable%20js/js-jquery-datatables-tools.js"></script>
		<script src="../_code global js/js-ajax-sack.js"></script>
		<script src="../_code jquery ui/_jquery ui exernal/jquery.bgiframe-2.1.2.js"></script>
		<script src="../_code jquery ui/_jquery ui js/jquery.ui.core.min.js"></script>
		<script src="../_code jquery ui/_jquery ui js/jquery.ui.widget.min.js"></script>
		<script src="../_code jquery ui/_jquery ui js/jquery.ui.mouse.min.js"></script>
		<script src="../_code jquery ui/_jquery ui js/jquery.ui.button.min.js"></script>
		<script src="../_code jquery ui/_jquery ui js/jquery.ui.dialog.min.js"></script>
		<script src="../_code jquery ui/_jquery ui js/jquery.ui.position.min.js"></script>
		<script src="../_code jquery ui/_jquery ui js/jquery.ui.resizable.min.js"></script>
		<script src="../_code jquery ui/_jquery ui js/jquery.ui.dragable.min.js"></script>
	
		<script type="text/javascript" charset="utf-8">
			var oTable;
			$(function(){$("#dialog:ui-dialog").dialog("destroy");
			$("#dialog-sublocalisation").dialog({autoOpen:false,height:300,width:350,modal:true,buttons:{"Update":function(){
					*// MISSING CODE //* $(this).dialog("close");
			},
			Cancel:function(){$(this).dialog("close");}},close:function(){allFields.val("").removeClass("ui-state-error");}});});

			$(document).ready(function(){
				oTable = $('#example').dataTable( {
					"sDom": 'T<"clear">lfrtip',"bProcessing": true,
					"bServerSide": true,
					"sAjaxSource": "projects-sublocation-table-code.php?id=<?php echo $id ?>",
							"fnDrawCallback": function(oSettings){$('#example tbody tr').each(function(){
							var iPos = oTable.fnGetPosition(this);$(this).click(function(){
							var url = "projects-sublocation-edit.php?subid="+oSettings.aoData[iPos]._aData[0];
							$("#dialog-sublocalisation").load(url,function(){$("#dialog-sublocalisation").dialog("open");});
							})
						})
					},
					"oTableTools": {"sSwfPath": "../_code datatable/_datatable swf/copy_cvs_xls_pdf.swf"}
				});
			});

		</script>
	</head>
	<body id="dt_example">
		<div id="container">
		<div id="dynamic">
			<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
				<thead>
					<tr>
						<th width="20%">A</th>
						<th width="25%">B</th>
						<th width="25%">C</th>
						<th width="25%">D</th>
						<th width="25%">E</th>
						<th width="25%">F</th>
						<th width="25%">G</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td colspan="5" class="dataTables_empty">Loading data from server</td>
					</tr>
				</tbody>
			</table>		
			</div>
		</div>		
		<div id="dialog-sublocalisation" title="sublocation"></div>
	</body>
</html>

WEBPAGE  edit.php

<?php
	header('Content-type: text/html; charset=iso-8859-1');
	require('../_code security/security-connect intranet.php');
		$dblink = mysql_connect($db_host, $db_user, $db_pass) or die("Impossible de se connecter au serveur.");
			mysql_select_db($db_database, $dblink) or die("Impossible de se connecter à la base de donnée.");
			  	$subid = $_GET["subid"];
					 	$sql = "SELECT tb_projects_sublocations.sublocation_id,tb_projects_sublocations.sublocation_project_id,tb_projects_sublocations.sublocation_zone,tb_projects_sublocations.sublocation_zone_ID,tb_projects_sublocations.sublocation_country,tb_projects_sublocations.sublocation_country_ID,tb_projects_sublocations.sublocation_admin1,tb_projects_sublocations.sublocation_admin1_ID,tb_projects_sublocations.sublocation_admin2,tb_projects_sublocations.sublocation_admin2_ID,tb_projects_sublocations.sublocation_city,tb_projects_sublocations.sublocation_lat,tb_projects_sublocations.sublocation_long,tb_projects_sublocations.sublocation_start,tb_projects_sublocations.sublocation_end,tb_projects_sublocations.sublocation_description,tb_projects_sublocations.sublocation_nbpersons,tb_projects.project_title FROM tb_projects LEFT JOIN tb_projects_sublocations ON tb_projects_sublocations.sublocation_project_id = tb_projects.project_dripe_id WHERE sublocation_id =".$subid;
					 	$query = mysql_query($sql) or die("Impossible d'exécuter la requête.");
						 	if($result = mysql_fetch_object($query)){
	?>			  	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	</head>		
	<body>		
		<form name="c" id="c" method="POST">
			<label class="label" for="project_title">Projet </label><input name="project_title" id="project_title" size="10" value="<?php echo($result->project_title);?>"><br>
			<label class="label" for="sublocation_project_id">Numéro de suivi DRIPE </label><input name="sublocation_project_id" id="sublocation_project_id" size="10" value="<?php echo($result->sublocation_project_id);?>"><br>
			<label class="label" for="sublocation_id">Numéro sub </label><input name="sublocation_id" id="sublocation_id" size="10" value="<?php echo($result->sublocation_id);?>"><br>
			<label class="label" for="sublocation_zone">Zone  </label><input name="sublocation_zone" id="sublocation_zone" size="10" value="<?php echo($result->sublocation_zone);?>"><br>
			<label class="label" for="sublocation_zone_ID">Zone ID </label><input name="sublocation_zone_ID" id="sublocation_zone_ID" size="10" value="<?php echo($result->sublocation_zone_ID);?>"><br>
			<label class="label" for="sublocation_country">Pays  </label><input name="sublocation_country" id="sublocation_country" size="10" value="<?php echo($result->sublocation_country);?>"><br>
			<label class="label" for="sublocation_country_ID">Pays ID  </label><input name="sublocation_country_ID" id="sublocation_country_ID" size="10" value="<?php echo($result->sublocation_country_ID);?>"><br>
			<label class="label" for="sublocation_admin1">Région [niveau administratif 1] </label><input name="sublocation_admin1" id="sublocation_admin1" size="10" value="<?php echo($result->sublocation_admin1);?>"><br>
			<label class="label" for="sublocation_admin1_ID">Région 1 ID </label><input name="sublocation_admin1_ID" id="sublocation_admin1_ID" size="10" value="<?php echo($result->sublocation_admin1_ID);?>"><br>
			<label class="label" for="sublocation_admin2">Région [niveau administratif 2] </label><input name="sublocation_admin2" id="sublocation_admin2" size="10" value="<?php echo($result->sublocation_admin2);?>"><br>
			<label class="label" for="sublocation_admin2_ID">Région 2 ID </label><input name="sublocation_admin2_ID" id="sublocation_admin2_ID" size="10" value="<?php echo($result->sublocation_admin2_ID);?>"><br>
			<label class="label" for="sublocation_city">Ville </label><input name="sublocation_city" id="sublocation_city" size="10" value="<?php echo($result->sublocation_city);?>"><br>
			<label class="label" for="sublocation_lat">Latitude  </label><input name="sublocation_lat" id="sublocation_lat" size="10" value="<?php echo($result->sublocation_lat);?>"><br>
			<label class="label" for="sublocation_long">Longitude  </label><input name="sublocation_long" id="sublocation_long" size="10" value="<?php echo($result->sublocation_long);?>"><br>
			<label class="label" for="sublocation_start">Début </label><input name="sublocation_start" id="sublocation_start" size="10" value="<?php echo($result->sublocation_start);?>"><br>
			<label class="label" for="sublocation_end">Fin </label><input name="sublocation_end" id="sublocation_end" size="10" value="<?php echo($result->sublocation_end);?>"><br>
			<label class="label" for="sublocation_description">Description </label><input name="sublocation_description" id="sublocation_description" size="10" value="<?php echo($result->sublocation_description);?>"><br>
			<label class="label" for="sublocation_nbpersons">nbpersons</label><input name="sublocation_nbpersons" id="sublocation_nbpersons" size="10" value="<?php echo($result->sublocation_nbpersons);?>"><br>

			<input type="submit" name="Update" value="Update"/>
		</form>
	</body>
/////////// When i click update from the form in dialog box it doesnt update data in myslq table ////////

<?php }
if(isset($_POST['Update'])){
$id =  $_POST["sublocation_id"];
$sublocation_project_id =  $_POST["sublocation_project_id"];
$sublocation_zone =  $_POST["sublocation_zone"];
$sublocation_zone_ID =  $_POST["sublocation_zone_ID"];
$sublocation_country =  $_POST["sublocation_country"];
$sublocation_country_ID =  $_POST["sublocation_country_ID"];
$sublocation_admin1 =  $_POST["sublocation_admin1"];
$sublocation_admin1_ID =  $_POST["sublocation_admin1_ID"];
$sublocation_admin2 =  $_POST["sublocation_admin2"];
$sublocation_admin2_ID =  $_POST["sublocation_admin2_ID"];
$sublocation_city =  $_POST["sublocation_city"];
$sublocation_lat =  $_POST["sublocation_lat"];
$sublocation_long =  $_POST["sublocation_long"];
$sublocation_start =  $_POST["sublocation_start"];
$sublocation_end =  $_POST["sublocation_end"];
$sublocation_description =  $_POST["sublocation_description"];
$sublocation_nbpersons =  $_POST["sublocation_nbpersons"];
$sql = "UPDATE tb_projects_sublocations SET sublocation_project_id='$sublocation_project_id',sublocation_zone='$sublocation_zone',sublocation_zone_ID='$sublocation_zone_ID',sublocation_country='$sublocation_country',sublocation_country_ID='$sublocation_country_ID',sublocation_admin1='$sublocation_admin1',sublocation_admin1_ID='$sublocation_admin1_ID',sublocation_admin2='$sublocation_admin2',sublocation_admin2_ID='$sublocation_admin2_ID',sublocation_city='$sublocation_city',sublocation_lat='$sublocation_lat',sublocation_long='$sublocation_long',sublocation_start='$sublocation_start',sublocation_end='$sublocation_end',sublocation_description='$sublocation_description',sublocation_nbpersons='$sublocation_nbpersons' WHERE sublocation_id =" .$id;
$query = mysql_query($sql) or die(mysql_error()) ;
}?>
</html>

Open in new window

0
Comment
Question by:any_
  • 2
5 Comments
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34879038
Your form on edit.php seem to be posting to it self instead of to update.php
<form name="c" id="c" method="POST">

Try changing that to :
<form name="c" id="c" method="POST" action="update.php">
0
 

Author Comment

by:any_
ID: 34905950
Thank you for your anwser. It's working well, but what i would like to do is to use the ui.dialog update button (please have a look at the picture) and not have to put a php update button inside the page i'm loading inside the modal dialog

Thanks     update buttons
0
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 125 total points
ID: 34913726
Try the following code in your update button
$("#dialog-sublocalisation").dialog({
	autoOpen:false,
	height:300,
	width:350,
	modal:true,
	buttons:{
		"Update":function(){
				$.post(
					$('form#c').attr('action'), //You can also hardcode 'update.php' here
					function(result, status, xhr){
						
						//Handle the result here
						
						//POST successfull
						$(this).dialog("close");
					},
				);
			},
		Cancel:function(){
			$(this).dialog("close");
			}
		},
	close:function(){
		allFields.val("").removeClass("ui-state-error");
		}
});

Open in new window

0
 
LVL 16

Expert Comment

by:CWS (haripriya)
ID: 39680208
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
hbo knew my windows software 4 63
Help with PHP 13 27
Text field validation on text fields used for multiple inserts 7 22
PHP Mail error 3 28
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question