jquery对话框中的数据库数据

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.