CODEWITHSUNDEEP
javascriptjquerydynamicdialog
Alex
Alex

Reputation: 9265

jquery ui dynamic dialog

I am fairly new to js and jquery. I basically want to be able to change the table and id variables from an onClick event or something appended to the <a> this way I can modify the variables with php later on. This is just proof of concept, and doesnt seem to be working since I made modifications. Is there a way that I can pass variables from the a to the function?

OVERALL GOAL: I want to have an inline onclick that will pass id and table names from loadMe to the function and display table_render.php?id=someid&table=sometable in the dialog box.

  <script>
    $(function loadMe(table, id) {
        $( "#dialog-view" ).dialog({
            autoOpen: false,
            height: 600,
            width: 700,
            modal: true,
            buttons: {
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
        $( "#create-view" ).click(function() {
            $( "#dialog-view" ).load("table_render.php?id=" + id + "&table=" + table + "").dialog("open");
        });
    });
    </script>
    <a href="" id="create-view" onClick="loadMe(testimonials,1)">Some text</a>
    <div id="dialog-view" title="">
    </div>

Upvotes: 1

Views: 1080

Answers (3)

gherkins
gherkins

Reputation: 14985

you might want to put $(document).ready()around you functions initialising the dialog and binding the onclick event. Then open the dialog inside the callback of your ajax request.

That way you could dismiss the onclick attribute with the loadFunction, I guess. (tired)

something like:

HTML:

<a href="#" id="trigger" data-my-id="123" data-my-table="myTable">
  trigger
</a>

<div id="dialog">
 Dialog Contents....
</div>

JS:

$(document).ready(function() {


    $("#dialog").dialog({
        autoOpen: false,
        height: 600,
        width: 700,
        modal: true,
        buttons: {
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });

    $("#trigger").click(function() {

        var id = parseInt( $(this).attr('data-my-id');
        var table = $(this).attr('data-my-table');

        $("#dialog").load("table_render.php?id=" + id + "&table=" + table + "", 
          function(){
            $("#dialog").dialog("open");
          });
    });

});​

should do the trick.

Upvotes: 0

Alex
Alex

Reputation: 9265

so i got it working... heres the solution

function createViewer(id, table) {
        var id;
        var table;
        $("#dialog-view").dialog({
            autoOpen: false,
            width:650,
            minHeight:400,
            show:{effect: "fade", duration: 500},
            hide:"clip",
            resizable: false,
            modal: true,
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
        $("#dialog-view").load("table_render.php?id=" + id + "&table=" + table + "").dialog("open");
    };

And the inline code

<a href="#" onMouseDown="createViewer(<?php echo $row_testimonials['id'];?>,'testimonials');">View Quote</a>

Upvotes: 1

machineghost
machineghost

Reputation: 35725

You are hooking up the event twice, once via onclick and once via jQuery. You need to pick one.

If you pick the jQuery way (recommended) you're going to get the jQuery arguments (which is just one arg, event). However, jQuery will set this to the element that triggered the event (in this case, your A tag). You can use that to get data off of the A tag.

For instance, if you wanted the ID of the A that got clicked, you could do this in your handler:

var clickedId = $(this).attr('id');

If you want to store some arbitrary info (eg. "tableName") for each A tag, you can either use the HTML 5 data attributes (preferable), or just make up your own attributes (which will work, but is "bad form"). For instance:

<a tableName='testimonials'>

var clickedFoo = $(this).attr('tableName');

or (a little better):

<a data-tableName='5'>

var clickedTableName = $(this).attr('data-tableName');
// Also, I believe this would work:
var clickedTableName = $(this).data('tableName');

* EDIT *

Just to try and clarify a little further, the basic overall idea is this:

1) You write out your A tags to the page, via PHP

1A) As you write them out, you put whatever data is specific to them on the A tag, in the form of an attribute or attributes (eg. id='foo' data-bar='baz').

2) You also write out some Javascript code that says "hey, whenever an A tag gets clicked, run this function"

3) Inside the function that you hooked up to the A tag's click event, you use the this variable (which points to the A tag itself) to get the data (the "variables") that you need

3A) For instance, you could use the JQuery "attr" method: $(this).attr('id')

4) Profit! (or at least do something useful with the data you just got)

Upvotes: 1

Related Questions