Javascript floating Symfony partial

I have to implement a functionality for a web application that provides an easy way to select an element between thousands of them. Now i have a select input in a form where the user selects the parent element of an object, from a pull of all objects in database. But there are too much elements to select th开发者_高级运维is way.

On the other hand i've developed a partial of list & filter, for this object, so my question is:

Is there some way to implement something like: a Javascript that creates a pop-up or similar with the partial inside, then the user can just select one parent using the filters and pagination in the partial and submit the selected one to the original form?

Thank you very much for your time! :D

You can call an action that renders the partial you want. To render a partial from an action just use:

return $this->renderPartial('module/partial', array('var_name' => $var_value));

If you like jQuery, I recommend using the jQuery Tools overlay, which can be found here:

jQuery Tools

The library is well documented and easy to use as it's written in form of a jQuery plugin. Simply speaking - it is capable of rendering nice looking popups - not in a new window which I personally find annoying, but in overlayed divs.

You can put anything in such popup, for example a form, or your partial. Then you can catch the value of the form using jQuery, for example:

$("#your-form").submit(function () {
    var selectedItemId = $("#your-select").val();
    // Do something with the id
    return false;
}); 

If you'd like more info please let me know.

I finaly solved this way: i used this javascript

    <script type="text/javascript">//script para abrir el selector de ud.org. sup.
    $(document).ready(function(){     
            $(".openDialog").click(function(e){
                e.preventDefault();
                //Get the screen height and width                    
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();
                $('.None_background').css("style","background-color:#eee");
                $('#mask').css({'width':maskWidth,'height':maskHeight});
                $('#mask').css('top',0);
                $('#mask').css('left',0);
                //$('#mask').fadeIn(1000);    
                $('#mask').fadeTo("slow",0.5);
                var winH = $(window).height();
                var winW = $(window).width();

                //Set the popup window to center
                $("#dialog").css('top',  winH/4-$(id).height()/4);
                $("#dialog").css('left', winW/4-$(id).width()/4);

                //transition effect
                $("#dialog").fadeIn(250); 


            });
            $('#mask').click(function () {
                $(this).fadeOut();
                $('.window').fadeOut(500);
            });
            $('.window .close').click(function(){
                $('#mask').fadeOut();
                $('.window').fadeOut(500);
                //saving the selected unit in the form
                var slct = document.getElementById('parent_unit');
                var text= slct.options[slct.selectedIndex].text;
                var value = slct.options[slct.selectedIndex].value;
                document.getElementById('parent').innerHTML=text
                document.getElementById('parent').href=value
                document.getElementById('parentID').value=value


            });
    });
</script>

over this html:

        <div class="None_background window" id="dialog" style="padding:5px">

             <?php include_partial('module/Partial', array('param'=>value));?>

    </div>

    <div id="mask">
    </div>

also the fields in the form are named 'parent' and 'parentID'