Database data in jquery dialog - php

Question

Ok, i tried it with jquery ajax to achieve the same. But now the system always shows the first id. It doesn't matter at which edit_subscriber image i click. This is what i did:
Jquery code:
jQuery(".edit_subscriber").click( function() {
jQuery('.dialog-modal').dialog({
modal: true,
open: function ()
{
jQuery.ajax({
async: false,
type: 'get',
url: nieuwsbrief.editsubscriber,
data: 'ajax=&subscriber_id=' + jQuery('.edit_subscriber').prop('id'),
success: function(data) {
jQuery('.dialog-modal').html(data);
}
});
},
close: function ()
{
},
height: 400,
width: 600,
title: 'Ajax Page'
});
return false;
});
html code:
echo '<div class="dialog-modal" title="Basic modal dialog" style="display: none;"></div>';
edit_subcriber.php:
<?php
include_once $_SERVER['DOCUMENT_ROOT'] . '/www/wordpress/wp-config.php';
include_once $_SERVER['DOCUMENT_ROOT'] . '/www/wordpress/wp-load.php';
include_once $_SERVER['DOCUMENT_ROOT'] . '/www/wordpress/wp-includes/wp-db.php';
global $wpdb;
echo $_GET['subscriber_id'];
?>

Answer 1

The issue with the script is, you are using same id for all dialog-models, and when you are clicking on the edit_subscriber, it is picking the dialog form the id, and as you are picking form id, it will always get the first element with the id.
Multiple element with same id is not valid.
So you can try this.
Just replace this code
echo '<div id="dialog-modal" title="Basic modal dialog" style="display: none;">
Naam: <input type = "text" name = "subscriber_name" id = "'.$abonnee->subscriber_id.'" value = "'.$abonnee->subscriber_name.'"> <br />
</div>';
with this
echo '<div class="dialog-modal" title="Basic modal dialog" style="display: none;">
Naam: <input type = "text" name = "subscriber_name" id = "'.$abonnee->subscriber_id.'" value = "'.$abonnee->subscriber_name.'"> <br />
</div>';
and change js function to :
jQuery(".edit_subscriber").click( function() {
$(this).closest('tr').next().dialog({
modal: true,
open: function (){},
close: function (){},
height: 400,
width: 600,
title: 'Ajax Page'
});
});
As you are placing div after tr which is also not valid markup.