Creating links inside a jQuery dialog

Question

This is driving me nuts. I've been banging my head against this for a couple of days now and it seems like this should be really simple. I have a jQuery EasyUI page that I'm building and it has a datagrid that opens a dialog box when you select and click on a button for details. This is working perfectly fine. The problem is that I want to add a button link at the bottom of the dialog along with the "default" save and cancel buttons.

This new button is really just a redirect link to another page that will display all of the selections details rather than just an abbreviated bit of the information. Here is the code that opens the dialog and then below that is the code for the link button.

function editUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
    $('#dlg').dialog('open').dialog('setTitle','Prospect Details');
    $('#fm').form('load',row);
    url = 'update_user.php?id='+row.id;
    $('#dia_name').html(row.Name);
    $('#pd a').attr('href','prospect_details.php?phone=' + row.Phone);
    var phone = phoneFormat(row.Phone);
    $("#dia_phone").html(phone);
    if (row.message_duration > 0) {
        $('#hangup').hide();
        $('#message').show();
        $('#msg_txt').show();
    } else {
        $('#hangup').show();
        $('#message').hide();
        $('#msg_txt').hide();
    }
}

Now for the code of the link button.

<a id="pd" class="easyui-linkbutton" iconCls="icon-search">More Details</a>

This is really driving me crazy. I think the problem has to do with the link button not existing when the editUser function is called since that resides in the dialog window.

lol, i really don't know why easyui still exist, and REALLY REALLY don't understand why you don't just get [jQueryUI](http://jqueryui.com/) ... ya know, from the makers of jQuery? Much better documentation and even great examples of almost every scenario you can think of. Whatever isn't in docs is always on SO or their Forums. — SpYk3HH, Feb 19 '14 at 15:59
And yes, if the `` does not exist when you call `editUser`, then `$('#pd a')` would select nothing. Another problem I see, your selector.... — SpYk3HH, Feb 19 '14 at 16:03
Like said before, your selector is wrong because anyway an anchor tag cannot contains another anchor tag and ID must be unique. So instead use just ID as selector and delegate event for this dynamic element — A. Wolff, Feb 19 '14 at 16:08

SpYk3HH · Answer 1 · 2014-02-19T17:35:45.240

As I mentioned, if <a id="pd" class="easyui-linkbutton" iconCls="icon-search">More Details</a>, does not exist when you call editUser(), then the jQuery Selector will pull nothing. However, the other problem I see is with your selector.

Are you sure you meant $('#pd a')?

That would pull an Element with the ID pd and then look for inner HTML tag of <a>, such as:

<div id="pd">
    <a href="...">

If you wanted the <a> tag with the ID pd, all you would need for a selector would be $('#pd')

Possible Solutions

If your a tag already exist in the HTML before the editUser() call is made, then all you need to adjust is:

// CHANGE 
$('#pd a').attr('href','prospect_details.php?phone=' + row.Phone);
// to 
$('#pd').attr('href','prospect_details.php?phone=' + row.Phone);

Try this first. If that doesn't work, then somehow the a tag does NOT exist before the call and you should append it. Being as you're using EasyUI, there are several ways to do this, though I suspect the preceding worked. In case it didn't:

The easiest would probably be to .append() the button, then use EasyUI's linkbutton method to style it.

function editUser() {
    var row = $('#dg').datagrid('getSelected');
    if (row){
        $('#dlg').dialog('open').dialog('setTitle', 'Prospect Details');
        $('#fm').form('load',row);
        url = 'update_user.php?id='+row.id;
        $('#dia_name').html(row.Name);

        //  create variable for link
        var $href = 'prospect_details.php?phone=' + row.Phone;
        //  create the a tag
        $('<a />', { id: 'pd', class: 'easyui-linkbutton', href: $href })
        //  use jQuery Chaining to continue on and add this button to your dialog buttons
        .prependTo($('#dlg .dialog-button'))
        //  OR, IF YOU MEAN TO APPEND IT TO YOUR FORM USE:
        /*  .appendTo($('#fm')) */
        //  use EasyUI to make it a styled button matching the others
        .linkbutton({ iconCls: 'icon-search', text: 'More Details' });

        $("#dia_phone").html(phoneFormat(row.Phone));
        if (row.message_duration > 0) {
            $('#hangup').hide();
            $('#message, #msg_txt').show();
        }
        else {
            $('#hangup').show();
            $('#message, #msg_txt').hide();
        }
    }
}

OR You could create the button on creating the dialog, but you'll need to do it for all your dialog buttons, like:

function editUser() {
    var row = $('#dg').datagrid('getSelected');
    if (row){
        $('#dlg').dialog({
            buttons: [{
                iconCls: 'icon-search',
                text: 'More Details',
                handler: function(e) { /* DO WORK */ }
            }],
            title: 'Prospect Details'
        }); //  no need to call 'open', default is to open when called

So I'm still stuck as to how to create/update the link URL with a variable from the editUser function. I'm really not a Javascript guy so I'm struggling with this. — Scott Nipp, Feb 19 '14 at 16:39

Creating links inside a jQuery dialog

1 Answers1