Question

I’m using a JQgrid in one of my projects (JFiddle LINK). and would like

1.) the save & cancel button to highlight when a user tabs to it (same as on mouse over). Found this post but can’t seem to get it working

FIX: based on the answer provided by saratis

after

    <table id="theGrid" class="scroll">
    </table>
    <div id="pager" class="scroll" style="text-align: center;">
    </div>

add the following

    <script type="text/javascript">
        $(document).delegate('a', 'focus', function (event) {
            $(this).removeClass('ui-state-hover'); //Remove previous hightlights
            $(this).addClass('ui-state-hover');
        });

        $(document).delegate('a', 'focusout', function (event) {
            $(this).removeClass('ui-state-hover'); //Remove previous hightlights
        });
    </script>

2.) When the user tabs between the fields on the add modal, would it be possible to keep the focus on the modal. eg that when tabbing, the focus only loops between the controls on the modal itself

3.) I’m experiencing a weird issue with the pager not being centered, and not sure what the fix is. I see that an attribute of 106px gets added to pager_left td which is causing it, gut its a generated value, so i’m not sure how to override/disable it

FIX: #pager_left{width:30%!important;}

Would it be possible to achieve any of this?

Thank you

Answer 1

First:

$('.yourInput').bind("mouseenter focus mouseleave", 
        function(event) { 
          $('.highlight').removeClass('highlight'); //Remove previous hightlights
          $(this).addClass('highlight'); 
 }); 

I have tried to add this to the fiddle, but I think the modal dialog is written dynamically to the DOM, so the binding should occur after its being placed. And I do not know how to integrate that. Sorry.

For the second part, can be done, but it would be easier when you povided a sample, or even better, as JSDFiddle. -> Looking at it now, I wouldn’t know. I’m sure a JS jQuery Guru good do it, but this is too much for me. Again sorry.

Third:
Some good news, don’t know the cause, but: #pager_left{width:150px!important;} does the trick.

Sorry I couldn’t help more.