jQuery dialog window with PHP input

Question

The scenario I have on my hands is that I have a PHP generated table with multiple rows fetched from a database displayed on a page. Each row has a unique ID. I would like to be able to add the functionality to edit each row.

So far I am using the dialog from this website to create the dialog pop up which works with a static button (exactly how it works in the Animated example).

Simply put, I want to be able to click anywhere in the row to trigger the dialog, and pass the unique ID using jQuery to a PHP file to generate the content for the dialog.

So far here is my attempt at the content to display within the dialog.

<script>
        $(function() {
            $( "#dialog" ).dialog({
                autoOpen: false,
                show: {
                    effect: "fade",
                    duration: 100

                },
                hide: {
                    effect: "fade",
                    duration: 100
                }
            });

            $( "#opener" ).click(function() {
                $( "#dialog" ).dialog( "open" );

                var id = <somehow fetch the ID through a form or class within a span or somehow!>;
                var dataString = 'id=' + id;

                $.ajax({
                    type: "POST",
                    url: "edit.php",
                    data: dataString,
                    success: function(response) {
                        $('.ui-dialog-content').html(response);
                    }
                });
                return false;
            });
        });
    </script>

To simply sum it up my problem, I can't get row to trigger a dialog even when I add <tr id="opener">...</tr> it still doesn't open and the other problem passing a unique ID (named $db_id in the PHP script that generates each row into the AJAX script triggered by opening the dialog.

Thanks in advance!

Edit: It would probably be worth noting that I know extremely little about javascript/jQuery so please explain anything relating to it in the most simplest terms with given examples is possible! :)

Which version of jQuery are you using? – S. A. Jan 14 '14 at 15:44 — S. A., Jan 14 '14 at 15:44

score 3 · Answer 1 · answered Jan 14 '14 at 16:09

Assume you have the following html table on your page:

<table id="opener">
    <tr id="row1">
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr id="row2">
        <td>three</td>
        <td>four</td>
        <td>five</td>
    </tr>
</table>

You can use the following to listen to the click events on any of the rows:

$( "#opener" ).on("click", "tr", function() {
    var id = $(this).attr('id');
    var dataString = 'id=' + id;

    alert(id);
});

In this case any click events on the "tr" elements will bubble up to the table with id of "opener". Inside the event handler, this will refer to the element that was clicked so you can get the id of the row. Note that you can also use the .click event as well, however the table has to exist in the DOM at the time the .click event is created. Using the above will also work if you generate the table after you wire up the event.

Also, When making the AJAX call to your PHP page, I would use something like this:

$.ajax({
    url: edit.php,
    type: "POST",
    data: {
        id: id
    },
    success: function(response) {
        $('.ui-dialog-content').html(response);
    }
});

Then in PHP you should be able to access the id using:

$rowid = null;
if(isset($_POST["id"])) {
    $rowid = $_POST["id"];
}

As much as I would have loved to give this a try, I've already found an answer that works :( BUT you did teach me a better way to send data via AJAX so thank you for that! That is actually a lot better than my previous method. — SteppingHat, Jan 14 '14 at 16:12

Charlie Schliesser · Accepted Answer · 2014-01-14T16:01:58.997

1

You can use custom data attributes in tags to store whatever info you need:

<tr class="row" data-id="1" data-type="widget" data-company="acme">
  <td>...</td>
</tr>

and the corresponding javascript:

$(document).ready(function() {
  $('.row').click(function() {
    var id = $(this).attr('data-id');
    console.log(id); // print the ID to the console
    // or send the ID to your php script (where you'll run 
    // int_val() to verify it's an integer!)
  });
});

That solves the span / ID problem.

I would listen for any click on the <tr> via the sample code above. Give it a class or give the parent wrapper a class and listen for clicks on the .parent-class tr. I can revise this to be more helpful if you need.

edited Jan 14 '14 at 16:01

answered Jan 14 '14 at 15:44

Charlie Schliesser

7,851
4
46
76

For simplicity sake, I'll go with the first option. But where would I insert that jQuery code? – SteppingHat Jan 14 '14 at 15:51
The jQuery should go somewhere in your document. You could put it inline via ` – Charlie Schliesser Jan 14 '14 at 15:58
I figured out your edits before you made them :P But thats exactly what I needed! Thank's heaps for your help :) – SteppingHat Jan 14 '14 at 16:08

pathfinder · Answer 3 · 2014-01-14T15:56:31.350

0

If you had this as html: <tr class="opener" id="phpid"><td>blah</td><td>blah</td></tr>

$('tr.opener td').click(function() {
    var phpid = $(this).parent(tr).attr(id);
    // do your ajax
    });

The reason I do not put the click function on the <tr> is because sometimes it is fully covered by the <td>'s inside it and it does not trigger the click function.

edited Jan 14 '14 at 15:56

answered Jan 14 '14 at 15:44

pathfinder

1,606
18
22

How would I pass a variable from PHP to it though? – SteppingHat Jan 14 '14 at 15:51
I have it set as the id on the , do you need to know how this works in php? – pathfinder Jan 14 '14 at 15:52
Nah I understand the PHP perfectly fine, just didn't understand how javascript was referencing to it. Still kinda new to the world of JS. – SteppingHat Jan 14 '14 at 15:56
you could also use the "data-whatever" attribute as suggested in other answers, but the important part is binding you click to the `` or sometimes it will not fire if bound to the `` – pathfinder Jan 14 '14 at 15:59

score 0 · Answer 4 · answered Jan 14 '14 at 15:52

If I am not wrong you are using jQuery UI dialogue. It should work as you mentioned. Like this HTML example:

<tr class="opener" data-id="1">...</tr>
<tr class="opener" data-id="2">...</tr>
<tr class="opener" data-id="3">...</tr>

<div id="dialog_1" title="Dialog Title" style="display:none"> Some text</div>  
<div id="dialog_2" title="Dialog Title" style="display:none"> Some text</div>  
<div id="dialog_3" title="Dialog Title" style="display:none"> Some text</div>

Here is the script example:

<script>
    $(document).ready(function () {
        $('.opener').click(function () {
            var id = $(this).data('id');// here you get the unique id which you can use
            $('#dialog_'+id).dialog('open');
            return false;
        });
    });
</script>

score -1 · Answer 5 · answered Jan 14 '14 at 15:42

-1

Check the difference between .click and .bind.

answered Jan 14 '14 at 15:42

JKMurray

64
2

If you want to be able to click on something, you should use bind. If you want to click on something, you should use click. I know, the documentation says otherwise, but browsers interpret this differently. Reading both pages explains it. – JKMurray Jan 14 '14 at 15:47
I don't see how this relates to my question – SteppingHat Jan 14 '14 at 15:52
See: http://stackoverflow.com/questions/518762/jquery-clickfn-vs-bindclick-fn. `$().click(fn)` is shorthand for `$().bind('click',fn)`. This doesn't really answer the question. – Charlie Schliesser Jan 14 '14 at 15:56
@CharlieS That's right. However, from personal experience: click often doesn't work in Internet Explorer. Bind Always does the trick. – JKMurray Jan 14 '14 at 16:01

jQuery dialog window with PHP input

5 Answers5