Solved

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

Posted on 2011-02-11
5
307 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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

760 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now