Question

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 this 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! 😀

Answer 1

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’