jQuery Forum

1. var htmlRow = "<div id='GridRow_" + rowIndex + "' class='GridRow' data-player='" + JSON.stringify(player) + "'>\n</div>";

1. var row = $(this).closest('.GridRow');
   var player = $(row).data('player');

1. $(row).data('player', "'" + JSON.stringify(player) + "'");
   

1. <script type="text/javascript">
       $(document).ready(function () {
           $('div[class^="ResidentItem"]').mousemove(function () {
               var tooltipSpan = document.getElementById('tooltiptext');
               var x = e.clientX;
               var y = e.clientY;
               tooltipSpan.style.top = (y + 20) + 'px';
               tooltipSpan.style.left = (x + 20) + 'px';
           });
       });
   </script>

1. $('#UncroppedImage').Jcrop({
       setSelect: [0, 0, 100, 100],
       minSize: [100, 100],
       maxSize: [640, 640],
       onChange: updateOriginal,
       onSelect: updateOriginal,
       aspectRatio: 1 / 1,
       boxWidth: 640,
       boxHeight: 640
   });
   

When the dialog shows it fades all right but when I close the dialog it doesn't fade.  It disappears immediately.  Is there something anyone of you can see ?

In JSFiddle it works but not in my project so I can't see what in my project I could possibly have that makes the dialog not fading out on close.

Hi Jake :),

Sorry if I can't provide a JSFiddle but it doesn't accept HTML injection in the document and that's the point here.  I show a JQuery UI Dialog and in this dialog I have a button to seek data on the server but I have to show a busy indicator which I create dynamically and inject into the dom which in theory goes at the end of the stack.

The problem is that this busy indicator is shown behind the dialog.  Now here's what I already tried.

1) Set zIndex of the JQuery dialog ...}).zIndex(100);
2) The busy indicator has a z-index of 38500

Any ideas ?

Here's the code of the dialog followed by the code that creates the busy indicator :

1. $('#TakesDialog').dialog({
       modal: true,
       opacity: .75,
       width: window.innerWidth - 80,
       height: window.innerHeight - 80,
       draggable: false,
       resizable: false,
       show: 'fade',
       hide: 'fade',
       showAnim: 'slow',
       title: (IsFrench ? 'Prises pour ' : 'Takes for ') + PatientName.toCapitalize(),
       closeOnEscape: true,
       position: { my: 'center', at: 'center', of: window },
       dialogClass: 'dialogWithDropShadow',
       buttons: { "OK": function () { $(this).dialog("close"); } },
       open: function () {
           $('.ui-widget-overlay').hide().fadeIn('fast');
       },
       close: function (event, ui) {
           $('#TakesDialog').empty();
           $('#TakesDialog').dialog('destroy');
       },
       closeText: 'Fermer'
   }).zIndex(100);

1. function ShowBusyIndicator(Text, showOverlay, IsTextWhite, Container)
   {
       document.body.style.cursor = 'wait';
2.     if (SelectedLanguage != null && Text == null) {
           if (SelectedLanguage == 0)
               Text = "Un instant s.v.p...";
3.         if (SelectedLanguage == 1)
               Text = "One moment please";
4.         if (SelectedLanguage == 0)
               Text = "Un momento por favor";
       }
       else
           Text == null ? Text : "Un instant s.v.p / One moment please / Un momento porfavor";
5.     showOverlay = typeof showOverlay !== 'undefined' ? showOverlay : true;
6.     if (Text == null)
           Text = "";
7.     var HTMLMessage = '<div id="BusyIndicator" style="z-index:38500">' +
                         '    <div id="BusyOverlay" style="position:absolute;left:0;top:0;bottom:0;right:0;background:black;opacity: 0.88;"></div>' +
                         '    <div id="BusyContent" style="position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;">' +
                         '        <table id="MessageLayout" style="top:50%;text-align:center">' +
                         '            <tr>' +
                         '                <td>' +
                         '                    <img width="100" height="100" src="../Images/Busy.gif" />' +
                         '                </td>' +
                         '            </tr>' +
                         '            <tr>' +
                         '                <td>' +
                         '                    <a id="BusyText" style="color:' + (showOverlay ? "white" : (IsTextWhite != null ? (IsTextWhite ? "white" : "white") : "white")) + ';font-size:18px">Un instant s.v.p...</a>' +
                         '                </td>' +
                         '            </tr>' +
                         '        </table>' +
                         '    </div>' +
                         '</div>';
8.     if (Container != null)
           $(Container).append(HTMLMessage);
       else
           $('body').append(HTMLMessage);
9.     $('#BusyText').text(Text);
10.     if (showOverlay)
            $('#BusyOverlay').css('opacity', 0.8);
        else
            $('#BusyOverlay').css('opacity', 0);
    }
    

1. <!DOCTYPE html>
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <title></title>
       <meta name="viewport" content="width=device-width, initial-scale=1">
2.     <link href="/Content/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
       <link href="/Content/jquery.mobile.datepicker.css" rel="stylesheet" />
       <link href="/Content/jquery.mobile.datepicker.theme.css" rel="stylesheet" />
3.     <script src="/Scripts/jquery-2.1.4.min.js"></script>
       <script src="/Scripts/jquery-ui-1.11.4.min.js"></script>
       <script src="/Scripts/jquery.mobile-1.4.5.min.js"></script>
       <script>
           $(document).ready(function () {
               $('#datepicker').datepicker();
           });
       </script>
       <style>
       </style>
   </head>
   <body>
       <div>
           <div data-role="page">
               <div data-role="ui-header">
               </div>
               <div class="ui-content">
                   <input type="text" id="datepicker" data-inline="false" data-role="date" style="width:140px !important" >
               </div>
               <div class="ui-footer">
               </div>
           </div>
       </div>
   </body>
   </html>

1. $("#CalendarId").animate({ scrollLeft: $("#CalendarId").position().left }, 0); // This is necessary to go at the first element in the collection before going where we want below
   $("#CalendarId").animate({ scrollLeft: $("#" + Today).position().left - $("#CalendarId").width() / 2 + 80 }, 0); // Small calcul to put the today in the middle of the calendar

Hi,

I'm trying to iterate a simple array of string with something like $(MyArray).each but it gives me the error Syntax error, unrecognized expression.  Who knows what I'm doing wrong ?  See image below

See attached image

1. $( '.SelectedProducts' ).click( function () {

   if ($( this ).is( ':checked' ))

        $( this ).closest( 'tr' ).eq(0).find( 'td.CellStyle.Product' ).eq(0).css( 'color' , 'white' );

   else

        $( this ).closest( 'tr' ).eq(0).find( 'td.CellStyle.Product' ).eq(0).css( 'color' , 'rgb(120, 120, 120)' );

   });

Hi,

I have this piece of code which works in IE 11 but not in Chrome.  Any advise on how to make it cross browser ?

1. $(oTbl).find('thead tr th button').each(function (index, item) {
       $(item).remove();
   });
   

Hi,

I create dynamically a busy indicator so no real need for the entire code.  I do show the indicator before doing a long running process for populating lists.  The piece of code you see here is at the bottom of the function that creates the busy indicator and I'm calling the callback to say ok the busy is there so go on and do your long running process but instead of seeing the indicator before the long running process, the process runs before and then I see the indicator after the process is finished huh ? If I put the callback(); line in comment, I see the busy indicator all right so it does the right thing but why I don't see it before this long running process baffles me specially when the work is in the callback so in theory it should show the busy indicator before the long running process or there's something I don't understand and I need guidelines.

1. $(BusyContainer).appendTo('body').promise().done(function () {
       if (callback && typeof (callback) === "function") {
           callback();
       }
   });
   

Hi,

This isn't working in IE11 in fact, after selecting a day the calendar closes itself in Chrome but not in IE11 so I tried the hide in onSelelect but no success.

hide()Returns: jQuery (plugin only)

• This method does not accept any arguments.

$( ".selector" ).datepicker( "hide" );

I'm using 2.1.3 on IE 11 and the dialog doesn't center itself  Here's the actual code.  Just one thing does it's to put the initialization of the dialog in a setTimeout of 500 then it works.  How can I make sure it is centered without the setTimeout ?

1. $('#GenericDialog').dialog(
   {
       position: { my: 'center', at: 'center', of: window },
       width: 'auto',
      show: 'fade',
       hide: 'fade',
       showAnim: 'slow',
       title: 'Information de la prise',
       closeOnEscape: true,
       dialogClass: 'dialogWithDropShadow',
       close: function (event, ui) {
           $('#GenericDialog').empty();
       },
       open: function (event, ui) {
           $('#GenericDialog').dialog('option', 'position', 'center');
       }
   });
2. $('#GenericDialog').html(HTMLPopup).promise().done(function () {
       $('#GenericDialog').find('#TakeInformationHeader').css('background', TakeDetail.HourIndicatorColor);
       $('#GenericDialog').find('#TakeInformationHeaderProductName').css('color', TakeDetail.Color);
       $('#GenericDialog').find('#TakeInformationHeaderQuantity').css('color', TakeDetail.Color);
3.     $('#GenericDialog').find('#TakeInformationHeaderProductName').text(TakeDetail.ProductFullName);
       $('#GenericDialog').find('#TakeInformationHeaderQuantity').text('x ' + TakeDetail.ProductQuantity);
       $('#GenericDialog').find('#TakeInformationRegisteredHour').text('Administré à ' + TakeDetail.RegisteredHour);
       $('#GenericDialog').find('#TakeInformationAdministeredBy').text('par ' + TakeDetail.AdministeredBy);
       $('#GenericDialog').find('#TakeInformationAbreviation').text(TakeDetail.Abreviation + ' : ');
4.     $(TakeDetail.IncidentDetailInfos).each(function (index, item) {
           if (item.Selected) {
               var HTMLIncident = '<p style="margin-top:0;margin-bottom:0;width:40px;float:left">' + item.Abreviation + ' : </p>' +
                                   '<p style="margin-top:0;margin-bottom:0">' + item.Description + '</p>'
5.             $('#GenericDialog').find('#TakeInformationReactions').append(HTMLIncident);
           }
       });
   });
   

Hi guys,

I have the following and it positions the dialog at 0,0 of the viewport.  Any idea what is incorrect ?

1. $('#GenericDialog').dialog(
   {
       position: [500, 500],
       width: 'auto',
       collision: 'fit',
       show: 'fade',
       hide: 'fade',
       showAnim: 'slow',
       title: 'Information de la prise',
       closeOnEscape: true,
       dialogClass: 'dialogWithDropShadow'
   });
   

Hi,

I have the following code and despite all my attempts it doesn't sort.  I've console.log before and after and it's the same.  When I debug the comparison it returns the right value.  I'm wondering what I'm doing wrong

1. var Elements = $('#tablecontent tr');
2. $(Elements).sort(function (a, b) {
       var contentA = $(a).data(SelectedSORT == 'ROOM' ? 'appartment' : 'fullname');
       var contentB = $(b).data(SelectedSORT == 'ROOM' ? 'appartment' : 'fullname');
3.     return (contentA < contentB ? 1 : 0);
   });
4. $('#tablecontent').empty
   $('#tablecontent').append(Elements);
   

Hi,

I'm trying to figure out which method of jQuery is used to find an object based on a property value of an object in a collection that comes from an Ajax call.  Here's what the collection looks like :

Hi,

I got a hidden input with a value = "vendredi le 20 mars 2015".  I debugged and it is really that string in the input and with the following line I get only the first word "vendredi"

var newdate = $(result).find( "input[type = 'hidden']" ).val();

1. function WireScrollForMorePatients() {
       $('#CalendarId').unbind('scroll');
       $('#CalendarId').bind('scroll', function () {
           var elem = $('#CalendarId');
2.         if (elem.scrollLeft() + elem.innerWidth() >= elem[0].scrollWidth - 1) {
               alert('End reached') // This is hit more than once in IE and Chrome and FireBox ask to stop popping the same alert !
               return false;
           }
       });
   }

Also there's a different behavior if I scroll with the cursor of the scrolled or if I hit the right button.  If I use the button, it pops #1 time but if I scroll by holding the cursor of the scrolled and scroll to the end it pops multiple time.  Weird no ?

Hi,

http://jsfiddle.net/GearWorld/z0qzs54q/

The code on jsfiddle isn't working as well as in Chrome 41 but works fine in IE.  Could someone shed some light on this problem ?

Thank you

If you go to this site http://jqueryui.com/selectable/ as an example since any component selected there do the same thing, you'll find a VIEW SOURCE link for every component.  Now when you look at the source and want to copy this source you end up with extra line feed between each line when pasted anywhere VS, Notepad++, Word, anywhere I paste what I copied from there has an extra line feed between each line.  Could someone point me in the right direction to advise the site master that this is wrong ?

I never found any link on that site to post about issues for the site.

Thank you !

Hi,

Why on the face of the earth this does nothing when pressing the button ?

1. <!DOCTYPE html>
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <title></title>
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
       <script>
           $("#btFadeIn").click(function () {
               $('PictureHolder').fadeIn('slow');
           });
       </script>
   </head>
   <body>
       <div id="PictureHolder" style="background-color:red;width:300px;height:200px;" >
           <img id="img" class=".img" src="Images/LeverDeSoleil.jpg" style="padding-left:5px;padding-top:5px;width:290px;height:190px" />
       </div>
       <br />
       <button id="btFadeIn">Fade in</button>
   </body>
   </html>