I haven't used jquery in a while, but I hope this will help clear some things up:
Kassem wroteCompiler Error Message: event.target.attr('id') is not a function
//I also tried ui.attr('id') and got the same error
The error is a good starting point, your problem is clearly with the "id" attribute of your event's target. Since it didn't complain that target is undefined, we know we have an event and a target, but for some reason this target doesn't have an id attribute. Makes you wonder what the target is, since it is clearly not a dom node...
You assume that the event here is the event of the onclick... and so you assume the target is the domnode that was clicked. In fact the event is that of the "open" on the dialog [
http://docs.jquery.com/UI/Dialog#event-open] which isn't associated with your clicked dom node.
Kassem wrote$(".openConversationLink").click(function () {
$("#conversationModal").dialog('open');
});
See your event is generated from the onclick here, but you don't pass it to the dialog method, so when dialog.open gets called, it isn't aware of the onclick event/target anymore.
While your solution works, I would offer the following criticisms:
1- You have associated the initialization of the dialog with the onclick of the node. This is unnecessarily expensive, you just need to init the dialog once and open it on each click.
I would suggest revisiting your initial structure where the dialog gets initialized independent of the openConversationLink click:
$(function () {
var clickedId = null;
$("#conversationModal").dialog({
autoOpen: false,
width: 850,
height: 600,
resizable: false,
draggable: false,
modal: true,
open: function (event, ui) {
$(this).load('Message/Conversation/' + clickedId);
}
});
$(".openConversationLink").click(function () {
clickedId = parseInt($(this).attr('id'));
$("#conversationModal").dialog('open');
});
});
2- You are storing your clickedId in a scope larger than needed. If clickedId is only needed within the open of the dialog, then it would be preferable to pass it to it rather than define it externally and access it. I'm not sure if the dialog plugin will allow setting of custom options, but if so then something like this should work:
$(function () {
$("#conversationModal").dialog({
autoOpen: false,
width: 850,
height: 600,
resizable: false,
draggable: false,
modal: true,
clickedId: null,
open: function (event, ui) {
$(this).load('Message/Conversation/' + clickedId);
}
});
$(".openConversationLink").click(function () {
var clickedId = parseInt($(this).attr('id'));
$("#conversationModal").dialog('option', 'clickedId', clickedId);
$("#conversationModal").dialog('open');
});
});
disclaimer: totally untested code... and I haven't worked with jquery in quite some time...