Passing multiple variables to a jquery dialog form

Question

I'm needing to send multiple variables to a jquery dialog form so that users can edit that entry. The entries are shown as a html table on the page and the data is loaded from a mysql database. I want to pass all of the entries from a row to the jquery dialog form so that they can edit them and resubmit it to the database. I'm really at a loss here and I don't even know where to start. I've seen people talking about the .data() function in jquery, but i'm not sure how best to send that data to the popup form.

Here is an example of the form. I used to just send the data to an update_contact.php which would pull the users record and place it into a form. But I like the jquery dialog form for keeping it on the same page.

<table width="600" cellpadding="4" class="tickets">
  <tr style="background-color:#736F6E;">
    <th width="225" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Name</a></b>
    </th>
    <th width="225" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Title</a></b>
    </th>
    <th width="150" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Work Phone</a></b>
    </th>
    <th width="150" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Actions</a></b>
    </th>
  </tr>
  <tr style="background-color:#FFFFFF">
    <td style="padding-top: 5px; padding-bottom: 5px; padding-left: 10px;">
      <a href="#" class="clickTip38">Contact #1</a>
    </td>
    <td style="padding-top: 5px; padding-bottom: 5px; padding-left: 10px;">
      Support Team Lead
    </td>
    <td style="padding-top: 5px; padding-bottom: 5px; padding-left: 10px;">
      123-456-7890
    </td>
    <td>
      <center><a href="update_contact.php?search=38" class="clickTip" title="Edit Contact"><img src="/img/user_edit.png" border="0"></a><a href="#1#38" class="display-dialog" title="Delete Contact"><img src="/img/user_delete.png" border="0"></a><a href="vcard.php?id=38" class="clickTip" title="Download vCard"><img src="/img/vcard.png" border="0"></a></center>
    </td>
  </tr>
</table>

As the modal dialog is in the same page, you can select your row in the function that create the dialog. You can use simple selectors to do this. — TCHdvlp, Sep 25 '13 at 15:28
You can find starting point here http://stackoverflow.com/questions/18766301/how-can-you-most-easily-pass-url-arguments-data-between-jquery-mobile-jqm-embe/18774677#18774677 — Serge P, Sep 25 '13 at 15:30
I can share with you an example HTML excerpt of the data, but I really haven't the fondest clue of how best to call this form up or how to pass the variables. I was able to do this same form for adding users quite easily, but i'm just not sure on passing the variables. — olanandkate, Sep 25 '13 at 15:31
As you are in a web page and trying to get form fields, you can't really talk about variable. You only need to get the fields. So, in the function that create the modal (just before `$("#aDiv").dialog();`) get your fields with a simple selector. You are manipulating fields of your page, not variables. — TCHdvlp, Sep 25 '13 at 15:36

score 0 · Answer 1 · answered Sep 25 '13 at 15:45

0

use a simple selector like var field = $("#myField"); to get your field in the dialog.

http://jsfiddle.net/TCHdevlp/nyyhD/

As you can see, it is very simple to get something from the page into a modal

answered Sep 25 '13 at 15:45

TCHdvlp

1,334
1
9
15

so I could just do a
around each variable in the table row? That would be extremely simple.
– olanandkate Sep 25 '13 at 16:00
No, put a `
` arround cells is extremly complicated ;). Cells can have an identifier... ``. But you can also select a cell by its index, or select the whole row.
– TCHdvlp Sep 25 '13 at 16:34
So i tried the id in the TD but still not working. Here is the fiddle for what i'm messing around with. Thanks so much for your help on this. I'm a hobbyist learning this in my own time and trying to learn as much as I can :) http://jsfiddle.net/nyyhD/3/ – olanandkate Sep 25 '13 at 19:56
Actually i think this will be a better example of what I'm trying to do. It is a full blown example of what the table would look like and what the update button does when I use it. I just need it to pass the variables in the table plus a few other hidden variables into that form. From there I can easily update my database with that form. It's just getting the variables from the page (both hidden and visible) into the form. http://jsfiddle.net/nyyhD/7/ – olanandkate Sep 25 '13 at 20:12
haha, `.val()` isn't valid for a cell. use `.html()` to get the html content ;) – TCHdvlp Sep 25 '13 at 21:30

score 0 · Accepted Answer · answered Sep 25 '13 at 15:57

Something like this would work

<table width="600" cellpadding="4" class="tickets">
  <tr style="background-color:#736F6E;">
    <th width="225" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Name</a></b>
    </th>
    <th width="225" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Title</a></b>
    </th>
    <th width="150" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Work Phone</a></b>
    </th>
    <th width="150" style="padding-top: 5px; padding-bottom: 5px;">
      <b><a class="title">Actions</a></b>
    </th>
  </tr>
  <tr style="background-color:#FFFFFF">
    <td style="padding-top: 5px; padding-bottom: 5px; padding-left: 10px;">
      <a href="#" class="clickTip38" onclick="EditContact()">Contact #1</a>
    </td>
    <td style="padding-top: 5px; padding-bottom: 5px; padding-left: 10px;">
      Support Team Lead
    </td>
    <td style="padding-top: 5px; padding-bottom: 5px; padding-left: 10px;">
      123-456-7890
    </td>
    <td>
      <center><a href="update_contact.php?search=38" class="clickTip" title="Edit Contact"><img src="/img/user_edit.png" border="0"></a><a href="#1#38" class="display-dialog" title="Delete Contact"><img src="/img/user_delete.png" border="0"></a><a href="vcard.php?id=38" class="clickTip" title="Download vCard"><img src="/img/vcard.png" border="0"></a></center>
    </td>
  </tr>
</table>

        <div id="modal" class="hidden">
    <div>
        <input type="text" id="txtName"/>
        <input type="text" id="Title"/>
        <input type="text" id="WorkPhone"/>
    </div>
</div>

javascript

function EditContact(){
    var tds = $(event.srcElement)
              .closest("tr").find("td");

    var selected = {
        name: $(tds[0]).text(),
        Title: $(tds[1]).text(),
        WorkPhone: $(tds[2]).text()
    };

    $("#txtName").val(selected.name);
    $("#Title").val(selected.Title);
    $("#WorkPhone").val(selected.WorkPhone);
    $("#modal").dialog();
}

Is there a way to do this for a few more fields that I'm not displaying? The table display area was quite small so I had to choose the important information. The other fields to display at cellphone, company and then I want to pass the user's id# along so that when I do the mysql database update it will know which one it needs to update. — olanandkate, Sep 25 '13 at 22:50
Nvm, I was able to answer my own question from above with the hidden fields. Here is what I ended up with. http://jsfiddle.net/nyyhD/9/ — olanandkate, Sep 26 '13 at 03:28

Passing multiple variables to a jquery dialog form

2 Answers2