Database data in jquery dialog

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'];

 ?>

Ids must be unique per page, you cannot have several #dialog-modal elements in one page. — deceze
– deceze ♦, Commented Jun 10, 2013 at 14:18

Yograj Gupta · Accepted Answer · 2013-06-10 14:46:08Z

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.

edited Jun 10, 2013 at 14:46

answered Jun 10, 2013 at 14:18

Yograj Gupta

9,8673 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user2237168 Over a year ago

Thanks, i've changed it to class. But there is still a problem. Now i get 2 popups, in sequence, which contains the data in my database. So each popup contains a name from the database. It doesnt matter at which edit image i click, the system shows the same information over and over again.

Yograj Gupta Over a year ago

did you changed your js function also or not?

user2237168 Over a year ago

Yes i did, but now only the last record pops up. And it gets deleted from the table.

user2237168 Over a year ago

Now its getting the information of the closest tr, but i dont want that. I want to get the information which is inside the div.

Yograj Gupta Over a year ago

$(this).closest('tr').next('div.dialog-modal').dialog({ try with it.

|

Collectives™ on Stack Overflow

Database data in jquery dialog

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related