Question

i am trying to post some data on a pop-up div using jquery , it’s suppose to be populated with data it get via an httphandler

the call to the handler it self is configured and works well .
the problem is posting that data on the UI using jquery .

the problem :

the call to the handler via script : first approach

   function GetProducts(id){                   
        $.getJSON("ProductDetails", id, function (data) {
                var div = $('#ProductDetails');  
                div.css('visibility', 'visible'); 
        } );
   }           

the css file :

         #ProductDetails 
         {
              visibility:hidden;
              border: 1px solid black;   
              position:absolute;
              left:50%;
              top:50%;
              width:150px;     
              height:150px; 
         }

this just doesn’t affect the div at all for some reason , and it does not become visible.

the second approach :

the call :

         $(document).ready(function () {
              $('#ProductDetails').addClass('hidden');
         });

         function Get_Product_Details(btn) {
              $.getJSON("ProductDetails", id, function (data) {
                    var div = $('#ProductDetails');           
                    div.removeClass('hidden');
                    div.addClass('show');            
               });
         }

css :

         .hidden
         {
              visibility:hidden;
         }
         .show
         {
              visibility:visible;   
         }  

this seams to work for a second while debugging until a post back occurs and makes the page
hidden yet again , i’m guessing due to the code performed on

         &(documnet).ready(......)

how would you go about making a pop-up div that appears on the $.getJson callback ?

Answer 1

On your hidden div, simply use:

<div id="A" style="display:none">...</div>

then you can show it using:

$('#A').show() or $('#A').hide()