[gymratz]

What I currently have:
Full server-side programming to create a "light box" such that when a person clicks "Select" on a gridview item, I query my database for more information and display it in the light box.

What I'd like:
Something a little smoother looking, without a full postback if possible.

What I've tried:
Jquery UI Dialog object.
But, I can't even seem to get my foot in the door with this one!

<script type="text/javascript" src="/jquery/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/jquery/js/jquery-ui-1.8.7.custom.min.js"></script>
        $(document).ready(function () {
            var $dialog = $('<div></div>')
		.html('This dialog will show every time!')
		.dialog({
		    modal: true,
		    //autoOpen: false,
            title: 'Basic Dialog',
		    buttons: {
		        Ok: function () {
		            $(this).dialog("close");
		        }
		    }
		});

            $('#btn_Open').onclick(function () {
                $dialog.dialog('open');
                // prevent the default action, e.g., following a link
                return false;
            });
        });

The above works - kind of.
But as soon as I uncomment out the "autoOpen" so that it doesn't automatically open - clicking my button also stops opening the dialog box.

Once I get this working - my next 'requirement' will be figuring out how to make the .html portion dynamic such that it pulls the right information depending on what they've selected.

Any advice?

Thanks,

[Dogstopper]

Moved to jQuery.

Javascript != Java!

[Jstall]

Hi,

You are using incorrect syntax for your click event. Use :

$('#btn_Open').click(function () {

instead of onclick to fix your button issue.

For the next part I am gathering you want to use AJAX to display an item in the dialog when a user clicks on it. I don't know the structure of what you are working with but you could attach event listeners to them and use them to pass a bit of information to your dialog before opening it. Upon opening the dialog could do an AJAX call hitting a file that does the query and returns the results as JSON. The results are then used to dynamically populate your dialog.

For example lets say your structure had elements with the class name item and the id of the item they represented. You could do something like :

$(".item").click(function(){
   $dialog.data("id",$(this).attr("id")).
    dialog('open');
});

Then on in your dialogs open event:

   open:function(){
       //create data variable and store the id that was just given to it
       var data = "id=" + $(this).data("id");
       //do a call to your file that will query the database
       $ajax({
           type:"GET",
           url:"path_to_file",
           data:data,
           dataType:"json",
           success:function(data){
              // this is what is returned from the server, use it to change your html
              $("#item_pic").attr("src",data.img_src);
              $("#item_desc").text(data.description);
           }
       }); 
   }

I'm sure there are better ways to do something like this, I am far from an expert on the subject, but that is one way you could do it. Hope this helps.

This post has been edited by Jstall: 17 December 2010 - 09:19 PM