Monday, August 16, 2010

How to display information from database in pop up using AJAX in asp.net ?

hi .. i have a GridView control having employee imformation ,i wanted to display more imformation in pop up when mouse is over the employee code field in GridView, ?i am working in ASP.NET Enviroment plse help me it's urgent requirementHow to display information from database in pop up using AJAX in asp.net ?
For AJAX (as was said before being the client side code) to be able to get the info and display it you will need server side script to process AJAX request, get the info, format it in XML format and send it back to the client...How to display information from database in pop up using AJAX in asp.net ?
Hello,





A lot of 'modern' browsers block out popups, or put them behind the active window. Also, you'd have to be careful to avoid multiple window.opens every time the user moves the mouse...





You can make popup menus without any Javascript (using CSS)... but they only work well in those 'modern' browsers already mentioned.





If using Javascript, look at moving and hiding/showing some 'menu HTML', or if appropriate, creating such a menu dynamically..





The code below is gratuitously commented, and has been tested on Opera 9, Firefox 2, and IE6. It will let you assign different menus to multiple objects; but the menus don't disappear very cleanly... You can hack the Javascript around to do things like, alter the position of the popup relatively, so it appears 'from' the parent element rather than over it; or even at the position of the mouse exactly. You also might want to make the popups disappear automatically when the user mouses out of the vicinity of the popup... I'll leave that to you to research:





%26lt;!DOCTYPE html PUBLIC ';-//W3C//DTD XHTML 1.0 Transitional//EN'; ';http://www.w3.org/TR/xhtml1/DTD/xhtml1-鈥?br>

%26lt;html%26gt;


%26lt;head%26gt;


%26lt;title%26gt;Simple PopupMenu%26lt;/title%26gt;





%26lt;style type=';text/css';%26gt;


/*Important style definition is 'position:absolute'. Means the element can


be placed at an arbitrary position without affecting the flow of surrounding


elements*/


.popup


{


position:absolute;


border:solid 1px black;


background-color:white;


padding:4px;


}


%26lt;/style%26gt;





%26lt;script type=';text/javascript';%26gt;


//findPos function is from http://www.quirksmode.org/js/findpos.htm鈥?/a>


//where its workings are explained in more detail.


function findPos(obj) {


var curleft = curtop = 0;


if (obj.offsetParent) {


curleft = obj.offsetLeft


curtop = obj.offsetTop


while (obj = obj.offsetParent) {


curleft += obj.offsetLeft


curtop += obj.offsetTop


}


}


return [curleft,curtop];


}





//Display a named menu, at the position of another object


function display_menu(parent,named)


{


//get the named menu


var menu_element = document.getElementById(named);


//override the 'display:none;' style attribute


menu_element.style.display = ';';;


//get the placement of the element that invoked the menu...


var placement = findPos(parent);


//...and put the menu there


menu_element.style.left = placement[0] + ';px';;


menu_element.style.top = placement[1] + ';px';;


}





//Hide a named menu


function hide_menu(named)


{


//get the named menu


var menu_element = document.getElementById(named);


//hide it with a style attribute


menu_element.style.display = ';none';;


}


%26lt;/script%26gt;


%26lt;/head%26gt;


%26lt;body%26gt;





%26lt;!--Define the menu's contents. It's important to put the display:none style attribute


here rather than in a %26lt;style%26gt; block, because it can be overriden easily if it's assigned here--%26gt;


%26lt;div class=';popup'; id=';menu1'; style=';display:none;';%26gt;


%26lt;ul%26gt;


%26lt;li%26gt;%26lt;a href=';#';%26gt;Menu 1%26lt;/a%26gt;%26lt;/li%26gt;


%26lt;li%26gt;%26lt;a href=';#';%26gt;Menu 2%26lt;/a%26gt;%26lt;/li%26gt;


%26lt;li%26gt;%26lt;a href=';#';%26gt;Menu 3%26lt;/a%26gt;%26lt;/li%26gt;


%26lt;/ul%26gt;


%26lt;!--Hide the menu when the text (Close popup) is clicked--%26gt;


%26lt;span onclick=';hide_menu('menu1');';%26gt;(Close popup)%26lt;/span%26gt;


%26lt;/div%26gt;





%26lt;!--Mouseovering on this element will show the menu with id 'menu1', at the position of {this}, that is


this element--%26gt;


%26lt;a href=';#'; onmouseover=';display_menu(this,'menu1');鈥?on hover%26lt;/a%26gt;


%26lt;p%26gt;


Other text here, should not be obscured on pops.


%26lt;/p%26gt;


%26lt;p%26gt;


Other text here, should not be obscured on pops.


%26lt;/p%26gt;


%26lt;p%26gt;


Other text here, should not be obscured on pops.


%26lt;/p%26gt;


%26lt;a href=';#'; onmouseover=';display_menu(this,'menu1')';鈥?on hover%26lt;/a%26gt;





%26lt;/body%26gt;


%26lt;/html%26gt;





This should hopefully answer your question. Good Luck!





Sean Colicchio


Server Engineer


Host My Site


http://www.hostmysite.com/?utm_source=bb
AJAX is client code.

No comments:

Post a Comment