2 Replies - 6434 Views - Last Post: 17 December 2010 - 09:17 PM

#1 gymratz  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 129
  • Joined: 18-October 07

JQuery UI Dialog Box

Posted 17 December 2010 - 03:32 PM

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,

Is This A Good Question/Topic? 0
  • +

Replies To: JQuery UI Dialog Box

#2 Dogstopper  Icon User is offline

  • The Ninjaducky
  • member icon



Reputation: 2870
  • View blog
  • Posts: 11,025
  • Joined: 15-July 08

Re: JQuery UI Dialog Box

Posted 17 December 2010 - 03:34 PM

Moved to jQuery.

Javascript != Java!
Was This Post Helpful? 0
  • +
  • -

#3 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: JQuery UI Dialog Box

Posted 17 December 2010 - 09:17 PM

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

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1