Preview pop-up window using JQuery

Question

Hi,

i am doing an application like a Form builder..

I am having a design page where i am generating the Fields using JQuery and displaying them each in a Div in the Preview panel of the same page.

In my code i am saving all the Fields in the Form by iterating through all the Divs in the Preview panel.

Now i want to add a functionality to show all the Divs in the preview panel in a pop - up window like when i click the Save Form button it must show all those DIvs in the Preview panel in the Window like a Preview and then it has to save the Form .

How to include the Preview option in the Code also to show the preview in a pop-up window.??

My code to save the Form is like

    $("#fb_contentarea_col1down21 div").each(function() { 
     var checked="false";  
      var id=$(this).attr("id");

      //var fname=$("#label"+id+"").text();

      var fsize=$("#input"+id+"").width();

      var ftype=$("#input"+id+"").attr('data-attr');

      var finstr=$("#instr"+id+"").text();

                        var fname=$("#label"+id+"").clone().html().replace(/<span.*/,'');

      if($("#label"+id+"> span.req").length > 0)
      {

       checked="true";

      }

      $.ajax({
            type: "POST",
           url: "http://localhost/FormBuilder/index.php/forms/saveField",

data: "sequence_no="+id+"&name="+fname+"&type="+ftype+"&size="+fsize+"&instr="+finstr+"&formid="+getformid+"&required="+checked,

            success: function(msg){
         //alert( "Data Saved: " + msg);
          }//success
               });//ajax




   });//Loop

My fb_contentarea_col1down21 has all the Divs showing all the Fields of my Form.

I am iterating through it and saving all the Fields.

How to make all these to show like a preview in a pop-up window using JQuery....

Answer 1

You can utilise PHP and send the values you retrieve from the form (using JavaScript) using the GET method.

Now you wouldn't actually be posting anything, just opening a new pop-up window using JavaScript with your desired URL with all the parameters appended to the end of the URL:

http://mysite.com/somepage.php?param1=hello&param2=world

Have the PHP page that you open in the new pop-up windows retrieve these values:

$param1 = $_GET["param1"];
$param2 = $_GET["param2"];

And then utilise these variables to create a preview panel.

NOTE:

The spec for URL length does not dictate a minimum or maximum URL length, but implementation varies by browser. On Windows: Opera supports ~4050 characters, IE 4.0+ supports exactly 2083 characters, Netscape 3 -> 4.78 support up to 8192 characters before causing errors on shut-down, and Netscape 6 supports ~2000 before causing errors on start-up. ~ (via What is the limit on QueryString / GET / URL parameters?)

Thanks