Solved

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

Posted on 2011-02-11
5
331 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_
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to count occurrences of each item in an array.

752 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