[jQuery] Opening the corresponding Conversation in a Modal Box

If I'm not mistaken the third line is executing when the page loads, wouldn't you be better off assigning it to a variable and invoking that on click?

I suck at jquery sorry.

I don't know anything about your environment, but in client-side javascript you can normally use console.log() to dump a string, or an object to the browser javascript console. If you have Firefox it'll appear in Firebug, inside the Console tab. Chrome and safari have similar features.
So you if you do console.log(event.target) you should see the whole hierarchy of that object and it might help you in figuring out what's happening.

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...

Also, firebug is indispensable for JS debugging, so take a look at all the options available to you and use them, they'll really come in handy:

http://getfirebug.com/logging
http://getfirebug.com/wiki/index.php/Console_API#console.log.28object.5B.2C_object.2C_....5D.29

Kassem, I implemented such a box a while ago.
But I did not use a dialog box, you see I used fancybox and populated it with an inline div which loaded its content dynamically.
The way I did it was have all the html inside a div with id "container"

<div id="container">
	<div style="display:none">
		<div id="data"style="width:600px;min-height:500px;height:100%;padding-top:10px;padding-right:10px;">
			
		</div>
	</div>

... rest of the page

you see data is not displayed, I can use it when a user clicks a button to load data into it then display is as a box, for example I have a list of albums and each albums has pictures, when a user clicks on an album, I show him the list of pictures which I load from the album's ID:

function EditPictures(id)
{
	$('#container').hide();
	$.fancybox.showActivity();
	//get the articles into data:
	
	var data = { t:Math.random(), id:id};
	$.ajax({
	  type: "POST",
	  url: 'getAlbumPics.php',
	  data:data,
	  success: function(data) {
		$('#container').show();
		$('#data').html(data);
		
		$.fancybox({
			'padding'		: 0,
			'href'			: '#data',
			'width'				: 700,
			'height'				: 800,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic',
			'autoDimensions' : false
		});
	  }
	});
}

I can also have a button to close this dialog:

$.fancybox.close();
$('#container').hide();

rolf wrotePersonally I prefer building the box in HTML, then use jQuery only to hide/show it and position it if necessary.

This is the way I was using fancybox actually.
you can ignore fancybox and create the box manually and show/hide it as necessary.

You can have little js/html/css experiments here: http://jsdo.it/

ZeRaW wrote

rolf wrotePersonally I prefer building the box in HTML, then use jQuery only to hide/show it and position it if necessary.

This is the way I was using fancybox actually.
you can ignore fancybox and create the box manually and show/hide it as necessary.

Yep, I noticed that is almost what you were talking about. You gave a much more detailed solution.
It is true, you can just replace calls to fancybox by $("#myModal").show()/hide()

can't you actually do:

//do this inside the click handler:
$( "#conversationModal" ).unbind("dialogopen");
$( "#conversationModal" ).bind( "dialogopen",{id: clickedId },function(event, ui) {
   $(this).load('@Url.Action("Conversation", "Message")' + '/' + event.data.id);
});

and remove

open: function (event, ui) {
                //grab the URL to the Conversation action method and append /clickedId to it
                $(this).load('@Url.Action("Conversation", "Message")' + '/' + clickedId);
            
            }