Passing javascript variable from modal to php on the same page

Question

I am actually stucking up with this problem for a day.I just want to perform edit operation on this script.My main page which is called customer-grid-screen.php the code comes as follows

<?php include("header.inc.php");
include("left.inc.php");
include('config.php');?>

<div id="page-content-wrapper">
  <?php include("pagetitile.inc.php"); ?>
  <div id="page-content">
  <div class="clearfix mrg10B"><a href="javascript:;"   class="btn large bg-green float-right modal-customeradd" title=""><span class="button-content">Add</span></a></div>
<div class="example-box">
    <div class="example-code">

        <table class="table table-condensed">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Details</th>
                    <th>Domain</th>
                    <th>Vertical</th>
                    <th>Taxanomy</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>

<?php
$result = mysql_query("SELECT * FROM customer_mast ORDER BY customer_id") or trigger_error(mysql_error());

while($row = mysql_fetch_array($result)){ 
if($row<1) {
    echo "</tr>";
    echo "<tr>";
    echo "<td colspan='6' class='text-center pad25A'>No Record</td>";
    echo "</tr>";
}
else
{
foreach($row AS $key => $value){
    $row[$key] = stripslashes($value);
  } 
    echo "<tr>";  
    echo "<td><a href='customer-screen.php'>" . nl2br( $row['customer_name']) . "</td>";

    if(!empty($row['customer_details'])){
    echo "<td><a href='customer-screen.php'>". nl2br( $row['customer_details']) . "</td>";
        }
    else{
       echo "<td><a href='customer-screen.php'>-</td>";
    }
    if(!empty( $row['domain']))
    {
    echo "<td><a href='customer-screen.php'>". nl2br( $row['domain']) . "</td>";}
    else{
       echo "<td><a href='customer-screen.php'>-</td>";
    }
    if(!empty($row['vertical'])){
    echo "<td><a href='customer-screen.php'>". nl2br( $row['vertical']) . "</td>";}
    else{
        echo "<td><a href='customer-screen.php'>-</td>";
    }
    if(!empty($row['taxanomy'])){
       echo "<td><a href='customer-screen.php'>". nl2br( $row['taxanomy']) . "</td>";
    }
    else
    { echo "<td><a href='customer-screen.php'>-</td>";}

         echo $row['customer_id'];


    echo "<td>

    <a href='javascript:?id={$row['customer_id']}'    data-id={$row['customer_id']} class='btn small bg-blue-alt tooltip-button modal-customeredit' data-placement='top' title='Edit'><i class='glyph-icon icon-edit' ></i>

    </a>
    <a href='customer_delete.php?id={$row['customer_id']}'  class='btn small bg-red tooltip-button confirm' data-placement='top' title='Remove'><i class='glyph-icon icon-remove'></i>
   </a>
   </td>";}}


 ?>
            </tbody>
        </table>
      </div>

</div>   
</div><!-- #page-content -->
    </div>
            </div>
<?php include("footer.inc.php"); ?>

I have to perform edit operation through modal pop up.i implemented the code as follows.

footer.inc.php
------------


    <!-- Project Edit  MAINLY SEE THIS-->
    <div class="hide" id="modal-projedit" title="Edit Project Info">
    <div class="pad10A">
    <h3>Edit Project Info</h3>
    <p class="font-gray-dark"> Fides Admin uses colors & styles from both the default theme color schemes and the included core color helpers. </p>
    <div class="divider mrg25B"></div>
    <form id="project-edit" action="" class="col-md-12 center-margin" method="">
    <div class="form-row">
    <div class="form-label col-md-3">
    <label for="name">
      Project Name:
      <span class="required">*</span>
      </label>
    </div>
    <div class="form-input col-md-9">
    <input id="name" name="name" placeholder="Name" data-required="true" class="parsley-validated" type="text">
    </div>
    </div>
    <div class="divider"></div>
    <div class="form-row">
    <div class="form-input col-md-8 col-md-offset-3">
    <a href="javascript:;" class="btn medium primary-bg radius-all-4" id="project-edit-valid" onclick="javascript:$('#project-edit').parsley( 'validate' );" title="Validate!">
      <span class="button-content">
        Update
        </span>
      </a>
    </div>
    </div>
    </form>
    </div>
    </div>
//modal window script:
 $( ".modal-customeredit" ).click(function() {


       var myGroupId = $(this).data('id');
          alert( myGroupId); //i can able to alert the paricular row id i want to edit i dont know to pass it through php.


   $( "#modal-customeredit" ).dialog({
     modal: true,
     minWidth: 700,
     minHeight: 200,
     dialogClass: "modal-dialog",
     show: "fadeIn"
   });
   $('.ui-widget-overlay').addClass('bg-black opacity-60');
 });        


//same page php file

<?php
   $id=???; (get id not working)

     $sql="SELECT * FROM `customer_mast` where customer_id='$id'";
   $result=mysql_query($sql);
   if($result==false)
      {
      die(mysql_error());
      }
      else{
      $row  = mysql_fetch_array($result);}
       if (isset($_POST['submit'])){
foreach($_POST AS $key => $value) { $_POST[$key] = mysql_real_escape_string($value); } 
$sql = "UPDATE `customer_mast` SET   `customer_name` =  '{$_POST['customer_name']}' ,  `customer_details` =  '{$_POST['customer_details']}',`domain` =  '{$_POST['domain']}' ,`vertical` =  '{$_POST['vertical']}' ,`taxanomy` =  '{$_POST['taxanomy']}'   WHERE `customer_id` = '$id' "; 
mysql_query($sql) or die(mysql_error()); 
echo (mysql_affected_rows()) ? "Edited row.<br />" : "Nothing changed. <br />"; 

header("Location:customer-grid.php");}
  ?>

Can anybody please explain me how i can pass that id value to the php script on same page and peform my edit operation.I can explain more if you have doubts,I have gone through many things to to make it correct.Nothing helped me.Please give your suggestion.

Answer 1

You should see how AJAX is working to pass a value to PHP.

$( "#modal-customeredit" ).dialog({
     modal: true,
     minWidth: 700,
     minHeight: 200,
     dialogClass: "modal-dialog",
     show: "fadeIn"
     buttons: {
         Edit: function() {
           // Sample ajax request ( see the documentation)
           $.ajax({
               type: "POST",
               url: "request.php",
               data: { id: myGroupId }, // data retrieve on server-side ($_POST['id'])
               dataType : 'html|json|...' // expected data returned
           })
           .success(function( msg ) {
               alert( "Data Saved: " + msg );
           });
         },
         Cancel: function() {
           $( this ).dialog( "close" );
         }
    }
    // stop event when form is submit
    return false;
});

You have all the element to do it by yourself. Just one more advice, try to separate your files. For instance execute your treatment in another file as request.php .

Edit :

Sample for your request.php (I will return json).

<?php
   header('Content-type: application/json'); // Tell the app that you want return json
   $id= $_POST['id']; // correspond to your retrieved data in ajax function

   // ... Your SQL request and other treatment

   // The result return
   echo json_encode($result);
?>

The data are now send back to your ajax function in .success( data ).