Open greybox after post

Posted on 2010-09-16
Medium Priority
Last Modified: 2012-05-10
I use the greybox (http://orangoo.com/labs/GreyBox) and I want this:
I want a form to submit, collect some data from an SQL Server and then open a greybox popup, without having to click or post again

Thanks in advance!!
Question by:Soter13
  • 2
LVL 14

Expert Comment

by:Dhanasekaran Sengodan
ID: 33690459

Author Comment

ID: 33690841
Dear dhansmani, what you gave me is a chaos... I don't know where to search for something that may help me. In case you have not understand:
I used to use greybox to present some popups either form href or buttons (onclick). Now I want a button to call a proc first, to calculate some data and then the popup appears with a semi transparent grey background with the calculated data in it.

Accepted Solution

rhodesb earned 2000 total points
ID: 33692879
What you are looking to do is perform an AJAX request.  Greybox includes AJAX support so that part is easy.  Basically what you need to do is serialize your form into a query string first, then perform the AJAX request.  You can write your own javascript to serialize your form but its much easier to use JQuery to it.  Download the jquery library file from http://www.jquery.com and include it the same way you include your greybox javascript file.  I'm not sure exactly how you are opening your current greyboxes but this should work for what you are trying to do (the weird looking syntax is JQuery, it looks strange but greatly simplifies javascript coding once you learn it).

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">

function clickButton(url){
  // create the queryString out of the form --> replace FORMID with the ID of the form you want to submit but be sure to leave the #
  var queryString = "?" + $("#FORMID").serialize();

  // pass your form data querystring to your server side code and pop the greybox with the data that is returned
  return GB_showCenter("Greybox Title", url + queryString);

And your link will look similar to this:
<a href="#" onclick="clickButton('http://youraddress.com/serverPage.asp')">Click Here</a>


Expert Comment

ID: 33693004
What dhansmani was giving you is a link to JQueryUI.  JQuery is a very robust and popular javascript library and JQueryUI is a plugin for it that simplifies a lot of User Interface elements.  If you click on the Demos & Documentation button or the Themes button on that website you can see what it can accomplish with very little code.  What I think dhansmani was pointing you to were the modal dialog boxes that are built into it.  He didn't provide a very good explanation but if you are doing much javascript development a library like JQuery or Dojo or Prototype and Script.aculo.us can save you a lot of manual coding.

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

597 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question