issue with quickdlgs extension and autocomplete fields

Yii 1.1 General Discussion
1

I have a form containing a couple of links that is a competition match result entry page, you can add new players on the fly by popping up a form to add them. Code used is…




EQuickDlgs::iframeLink(

    array(

        'openButtonText' => 'Add Player(s)',

        'controllerRoute' => Yii::app()->createUrl('/compteams/admin', array('id'=>$model->awayteamid, 'openmode'=>1)),

        'dialogWidth' => 800,

        'dialogHeight' => 600,

        'hideTitleBar' => false,

        'dialogTitle' => 'Add Players to: '.$model->ateam->teamlabel,

        'closeButtonText' => 'Close', 

    )

);

Also on this main page is quite a few textfields used for autocomplete where the user can type a couple of letters in the players name then select from the dropdown list that appears.

The autocomplete function has all been working perfectly until I added the code above to open the add player form in a pop up. If I comment out the code above the autocomplete begins to work so the issue is definitely related to the code above.

When I type letters into the autocomplete field it accepts the first key input and displays my message for when you have not selected something from the list. The popup list of values matching the letters input no longer appears. Using firefox developer tools there are no errors with the jquery. I can see that the JSON response is received and contains results matching the only letter I can enter.

It seems to be that the list containing the matching rows that pops up is being stopped somehow.

Here are the libraries that load in the page:




<script type="text/javascript" src="/assets/5cbdefd4/jquery.js"></script>

<script type="text/javascript" src="/assets/cacb35fc/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" src="/assets/cacb35fc/js/bootstrap-noconflict.js"></script>

<script type="text/javascript" src="/assets/cacb35fc/bootbox/bootbox.min.js"></script>

<script type="text/javascript" src="/assets/cacb35fc/notify/notify.min.js"></script>

<script type="text/javascript" src="/js/jquery-ui-no-conflict.min.js"></script>

<script type="text/javascript" src="/js/compsettings.js?1413874974"></script>

<script type="text/javascript" src="/assets/aebe7e66/fileuploader.js"></script>

If you need to see any other code, please let me know.

Any help would be greatly appreciated.

Regards

Greg J

2

ok, ith some help I have narrowed this down. The autocomplete function as code in the select event and the change event. Here is the ajax call:




function fnGetAuto(selobj, src, dupobj)

{

    var teamid = $(src).attr("data-teamid");

    var newobj = selobj.split('_');


    var selobjid = newobj[0] + '_' + newobj[1] + '_id';

    var selobjrank = newobj[0] + '_' + newobj[1] + '_rank';

    var respdata;


    $(selobj).autocomplete("option", "source", 

        function(request, response) {

          $.ajax({

            url: "/draw/teamlist",

            type: "POST",

            dataType: "json",

            data: {

                term: request.term,

                id: teamid,

            },

            success: function (data) {

                response(data);

                respdata = data;

            }


        });

    }); 


    $(selobj).autocomplete("option", "autoFocus", true); 


    $(selobj).autocomplete("option", "minLength", 0); 


    $(selobj).autocomplete("option", "delay", 0);


    var pClass = selobj.substr(1);     // name field class

    var pName;                         // player name

    var pId;                           // player id

    var pRank;                         // player ranking


    $(selobj).autocomplete({select: function(event, ui) 

        {

            $( selobjid ).val(ui.item.value);

            $( selobj ).val(ui.item.label);

            $( selobjrank ).val(ui.item.ranking);

            

            pId = ui.item.value;

            pName = ui.item.label;

            pRank = ui.item.ranking;

            

            return false;

        }

    });


    $(selobj).autocomplete({change: function(event, ui) 

        {

            pId = $( selobjid ).val();

            var found = false;

            if ($.trim($(selobj).val()) !== '')

            {

                //check if the value entered is from the list

                $.each(respdata, function(key, player) {

                    if (pId === player.value) { 

                        if (pId > 0) {

                            found=true; 

                        }

                    }

                });


                if(!found) {

                    showDialog('Invalid Member','You must select a player from the list.  It add a player to must return to the previous screen and click on the team name to open the add player page');

                    $( selobj ).val("");

                    return false

                }

                else {

                    $( selobj ).removeClass("autogreen");

                    $( selobj ).addClass("autoblue");

                }

            }

        }


}

When the EQuickDlgs links are in the page, the response(data) line triggers the "change" event immediately.

When the EQuickDlgs links are NOT in the page, the "change" event is not triggered until I exit the field.

So the EQuickDlgs links are coding the page that somehow forces the change event to fire when the autocomplete request returns and the response(data) line runs. The focus is being moved from the autocomplete element to the document (checked with $(’:focus’))

I dont really understand exactly what "response(data)" does but I know it needs to be there for the autocomplete list to show.

Any help would be appreciated.

Greg J

3

The EQuickDlgs is only a tool to simplify the handling of Yii’s CJuiDialog.

In the case above the content of the CJuiDialog is an iframe.

Try to integrate the CJuiDialog directly without quickdlgs.

You can use the sample code from

http://demo.bsourcecode.com/yiiframework/cjuidialog

or

http://www.yiiplayground.com/index.php?r=UiModule/jui/ziiDialog

and add your iframe as content.

Please let me know if this works.

4

Hi Joblo,

Really appreciate your quick response.

No luck trying that. even the simplest CJuiDialog has the same effect in that it stops the autocomplete from working.

So it seems its more of a fundamental issue with the CJuiDialog rather than quickdlgs. The quickdlgs work perfectly. The problem is it destroys the autocomplete function on the same page.

Cheers

Greg J

5

Hi Joblo,

I tried a different way for which I have had some success although not as flexible as quickdlgs.

I am using YiiBooster so have used TbModal dialog boxes to display the popup forms and have converted all the contents of the dialogs to process via AJAX rather than the normal submit routes via controller actions.

It has taken a few days to get it all working correctly. The layers of renderPartial requests played havoc with the jquery script calls but I eventually worked that out when I found out about the 4th parameter in the renderPartial call and set it to true (to insert the registered scripts).

The main issue was that the popup form is also a normal page and I have been try to use the same code so I didnt have duplicate code (used view files where I could).

Anyways, very happy with the result. If anyone would like the details I would be happy to post how I did it.

Regards

Greg J