JQueryUI Pass Dynamic Selector to Dialog
Ok so when a user clicks on Add as it relates to a record the Add is suppose to obtain and us the DIV ID related to the record. I'm pretty close to getting it to work but I just need to pass in the selector dynamically.
How would you pass in your selector dynamically though?
<tr>
<td>1/1/0001</td>
<td>SOME FName</td>
<td>SOME LNAME</td>
<td>SKIN TW</td>
<td>SOMEID</td>
<td>1/7/2009</td><td>Graph Trend View <a href="#" id="dialog_3333333" class="ui-state-default ui-corner-all">Add</a></td>
<td class="hide-cell">
<!-- ui-dialog -->
<div id="dialog_3333333_message" title="3333333 THOMAS LNAME">
<p>3333333 THOMAS LNAME, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</td>
</tr>
<tr>
<td>6/21/2010</td>
<td>EMERY</td>
<td>LNAMED</td>
<td开发者_如何学Python>RAND E</td>
<td>77777777777</td>
<td>1/7/2009</td><td>Graph Trend View <a href="#" id="dialog_77777777777" class="ui-state-default ui-corner-all">Add</a></td>
<td class="hide-cell">
<!-- ui-dialog -->
<div id="dialog_77777777777_message" title="77777777777 EMERY RANDOLPH">
<p>77777777777 EMERY LNAME, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</td>
</tr>
I'm pretty close to a solution but can't get passed this obstacle?
$(function() {
// Dialog
**// This is where the dynamic selector needs to be passed in**
$('#dialog_33333333_message').dialog({
autoOpen: false,
resizable: false,
height: 260,
modal: true,
width: 240,
buttons: {
"Compare Carriers": function() {
$(this).dialog("close");
},
"Save": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('.ui-state-default').click(function() {
var target = $(this).attr("id");
alert(target);
$('#' + target + '_message').dialog('open');
return false;
});
//hover states on the static widgets
$('.ui-state-default').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
Here is what I mean by how close I am. http://tinypic.com/r/2hs2o0i/7 Go to image, i'm to new to post image
You can use a selector which reflects the pattern that the div dialog($('div[id^="dialog_").dialog()) have and use it as below:
$(function () {
$('div[id^="dialog_").dialog({
autoOpen: false,
resizable: false,
height: 260,
modal: true,
width: 240,
buttons: {
"Compare Carriers": function () {
$(this).dialog("close");
},
"Save": function () {
$(this).dialog("close");
}
}
}); // Dialog Link
$('.ui-state-default').click(function () {
var target = $(this).attr("id");
alert(target);
$('#' + target + '_message').dialog('open');
return false;
});
//hover states on the static widgets
$('.ui-state-default').hover(function () {
$(this).addClass('ui-state-hover');
}, function () {
$(this).removeClass('ui-state-hover');
});
});
精彩评论