We help IT Professionals succeed at work.

Jquery popUp

I need to create a modal screen when user click on the link it will
launch the modal screen with the set of drop downs. Upon clicking  the save
button I need to close the modal and pas the value back to the parent screen


Any help
Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
window.showModalDialog or jQuery UI will do just that
erikTsomikSystem Architect, CF programmer

Author

Commented:
I am using jquery UI but the close button does not work
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
erikTsomikSystem Architect, CF programmer

Author

Commented:
I did exaxctly what the example is doing still no luck.

$(document).ready( function() {
             
             
            $("#linkClick").click( function(event){
                  $( "#dialog:ui-dialog" ).dialog( "destroy" );
                  
                  event.preventDefault();
                  $("#content").load('index.html');
            
                  
                  $('#content').dialog({
                         
            resizable: true,
                  
                  modal: true,
                  closeOnEscape:false,
            draggable:true,
            scrollbars:false,
           
                  width: 660,
                  height: 400,
                  position: 'middle',
                         buttons: {
                        "OK": function() {
                                    alert('Hello');
                                $('#content').dialog("close");
                                                //$('#').dialog("close");
                                                $('#content').dialog('destroy')
                                                
                        },
                        "Cancel": function() {
                                $(this).dialog("close");
                        }
                }
            
                        
                  });
                  

                  //alert('Hello');
                  
            return false;      
                  });
            
      });
      
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Did you include jquery libraries?
erikTsomikSystem Architect, CF programmer

Author

Commented:
yes. All libraries are there it lanches the box I can even see the alert box after I clicked on the OK , but ca not close it
erikTsomikSystem Architect, CF programmer

Author

Commented:
is that because I am using   event.preventDefault(); but otherwise it will reload the parent form
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
I would need to see a page
erikTsomikSystem Architect, CF programmer

Author

Commented:
it is on the local machine
erikTsomikSystem Architect, CF programmer

Author

Commented:
<script type="text/javascript">
      $(document).ready( function() {
             
             $('#content').dialog({
            autoOpen: false
        });
            
            $("#linkClick").click( function(event){
                  $( "#dialog:ui-dialog" ).dialog( "destroy" );
                  
                  event.preventDefault();
                  $("#content").load('index2.html');
            
                  
                  $('#content').dialog({
                         
            resizable: true,
                  
                  modal: true,
                  closeOnEscape:false,
            draggable:true,
            scrollbars:false,
           
                  width: 660,
                  height: 400,
                  position: 'middle',
                         buttons: {
                        "OK": function() {
                                    alert('Hello');
                                $(this).dialog("close");
                                                //$('#').dialog("close");
                                                $('#content').dialog('destroy')
                                                
                        },
                        "Cancel": function() {
                                $(this).dialog("close");
                        } ,
                                    //close: function(ev, ui) { $(this).close(); },
                }
            
                        
                  });
                  

                  //alert('Hello');
                  
            return false;      
                  });
            
      });
      
</script>      

<form action="index.html method="post" enctype="application/x-www-form-urlencoded">
<a href="" id="linkClick" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
<div id="content" style="display: none;"></div>

</form>
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
I do not see anything special.
I'll try to do a fiddle tomorrow
erikTsomikSystem Architect, CF programmer

Author

Commented:
OK
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
I cannot test it in fiddle because I do not have your html file you load
http://jsfiddle.net/mplungjan/wkXEu/
erikTsomikSystem Architect, CF programmer

Author

Commented:
Those html only consists of 3 drop downs
IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
Remove the destroy

Here is my example

http://jsfiddle.net/mplungjan/yvXt2/
$(function() {
    $("#linkClick").click( function(event){
      event.preventDefault();
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:340,
            modal: true,
            buttons: {
                "Show all items": function() {
                    var vals = "";
                    $(this).find("select").each(function() {
                        vals+=$(this).val();
                    });
                    alert(vals);                         
                                                
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });
});

Open in new window

erikTsomikSystem Architect, CF programmer

Author

Commented:
Ok. Got it How can i pass the selected value to the parent screen
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
There is no parent screen. The popup is IN the parent screen - so where I call alert, just call a function in the page you are in

continueTheProcess(vals);    
erikTsomikSystem Architect, CF programmer

Author

Commented:
how can i pass the ID of the fileds for text and ID back. For example I have 2 links linkClick once I click on each one of them and Click OK on the dialog box I need to return the value and the text. It works Fine If I have only 1 link then i know exactly where to put it. What If I have more than 1 link then i need to dynamically specify the id of 2 elements where I want to store them
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Just set two vars AND call a  function or pass { field1:"value",field2:"value2"}
erikTsomikSystem Architect, CF programmer

Author

Commented:
can you give me an example how to do that , I never use this approach. Can it be just a name of div tat I want to write result into ?
erikTsomikSystem Architect, CF programmer

Author

Commented:
is there any update on this issue
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
"Show all items": function() {
  var result ="";
  $(this).find("select").each(function() {
    result+=$(this).attr("name") + ': '+ $(this).val()+"<br/>";
  });
  $("#resultDiv").html(result);
  $( this ).dialog( "close" );
},
erikTsomikSystem Architect, CF programmer

Author

Commented:
thank you

Explore More ContentExplore courses, solutions, and other research materials related to this topic.