Ajax not posting the variable to another page - php

Question

Hi I have problem of sending my variable to another PHP page using ajax.
My problem is am getting the id of the element from main page. Its for edit operation.
Main page modal:
<a href='javascript:' 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>
it will open modal on same page:
<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="project_name" name="project_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>
SCRIPT:
$( ".modal-customeredit" ).click(function() {
var myGroupId = $(this).data('id');
alert( myGroupId);
$.ajax({
type: "POST",
url: "sample.php",
data: { id: myGroupId }, // data retrieve on server-side ($_POST['id'])
})
$( "#modal-customeredit" ).dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn"
});
$('.ui-widget-overlay').addClass('bg-black opacity-60');
});
});

Answer 1

Try the following:
Change the ajax function,
var myGroupId = $(this).attr('data-id'); // data-id
data = {'id':myGroupId };
$.ajax({
type: "POST",
url: "sample.php",
data: data, // data retrieve on server-side ($_POST['id'])
success:function(response){
alert(response); //do the rest of operations.
}
});

Answer 2

You didn't mention what the alert says.
Though I guess it shows a Null value since the ajax request seems good.
My bet goes for your selector, try this :
var myGroupId = $(this).attr('data-id');

Answer 3

HTML (with quotes) :
<a href="javascript:void(0)" data-id="{$row['customer_id']}" class="...">
<i class='glyph-icon icon-edit' ></i>
</a>
jQuery (width data-id and callback):
$( ".modal-customeredit" ).click(function() {
var myGroupId = $(this).attr('data-id'); // data-id
$.ajax({
type: "POST",
url: "sample.php",
data: { id: myGroupId },
}).done(function(response) { // data returned by server
var d = $('<div id="dialog">'+response+'</div>').appendTo('body');
d.load(function(){
$( "#dialog").dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn"
});
$('.ui-widget-overlay').addClass('bg-black opacity-60');
});
});
});

Answer 4

You will not get the value because you are using echo to your php code in data-id attribute.
This is what you need to do to your html
<a href="javascript:void(0)" data-id="<?php echo $row['customer_id']?>" class="...">
<i class='glyph-icon icon-edit' ></i>
</a>
and use #seenath's code to check if you get the value