Groups > comp.lang.javascript > #32785 > unrolled thread

Alternative and fast option to some very useful jQuery features?

Started by	justaguy <lichunshen84@gmail.com>
First post	2017-03-16 18:09 -0700
Last post	2017-03-19 17:39 +0800
Articles	5 on this page of 25 — 7 participants

Back to article view | Back to comp.lang.javascript

Page 2 of 2 — ← Prev page 1 [2]

#32825

From	Ben Bacarisse <ben.usenet@bsb.me.uk>
Date	2017-03-21 01:33 +0000
Message-ID	<871strpg5j.fsf@bsb.me.uk>
In reply to	#32824

justaguy <lichunshen84@gmail.com> writes:

> On Monday, March 20, 2017 at 6:41:24 AM UTC-4, Ben Bacarisse wrote:
>> justaguy writes:
>> 
>> > On Sunday, March 19, 2017 at 6:53:34 AM UTC-4, Ben Bacarisse wrote:
>> <snip>
>> >> Sure, but the idea is that the browser will simply suggest possible
>> >> items from the list when the user types.  Support for this is not
>> >> universal, of course.
>> >
>> > Quick update.  I tried it with Chrome (ver 56) and Firefox (ver 52).
>> > And I pass the selected value to a js function for further process
>> > with Event of "onInput", both seems to work.  So far Chrome hasn't
>> > crashed but FF just crashed.  Fyi, it's not my js function's problem,
>> > several persons including myself has been testing it for about a week,
>> > browser never crashed.
>> 
>> What does "crash" mean in this case?
>
> Browser: FF (ver 52)
> Err msg:
> "
> Gah. Your tab just crashed.
>
> We can help you!
>
> Choose Restore This Tab to reload page content.
> ...
> "
>
> Condition:
> I changed the event from onInput to onSelect.  I then changed it back,
> however, it still exhibited the same behavior (maybe because of
> cache).  Today, I changed it to onSelect, expectedly it crashed again,
> I changed it back to onInput but it did not crash this time.
>
>> 
>> > It raised concern in me if HTML5 "list" INPUT attribute is ready for
>> > production...
>> 
>> Does it go wrong when there are no scripts at all?  
>
> Well. I have a few js functions.  But as mentioned in my previous,
> these functions have been working perfectly fine for some time.
> Hence, they are not likely the culprit.

I suspect that list attributes have worked perfectly for some time too
(I've used them a lot and not seen an issues so far) so this is not a
compelling argument.  The reason to remove the scripts is to get the
smallest error case you can.

>>If not, why do you
>> think it's the list attribute?  If it does, have you filed a bug?  This
>> would be a significant help to the community.
> Do we still need to file a bug?

I'd argue that nothing should cause that message to appear so it's a bug
one way or another, but if it's due to using nothing but the list
attribute then it's a very important one.

If your test case involves a complex document with lots of scripts, it's
going to take much more effort to track down than a small test case.  It
would be helpful if you can gradually reduce the complexity of the
document until you get as small a test case as you can that still
triggers the crash.  I know this is non-trivial, but it helps everyone.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#32830

From	justaguy <lichunshen84@gmail.com>
Date	2017-03-21 20:09 -0700
Message-ID	<c566c669-41c8-41bb-b932-90adcb54c010@googlegroups.com>
In reply to	#32825

On Monday, March 20, 2017 at 9:33:48 PM UTC-4, Ben Bacarisse wrote:
> justaguy writes:
> 
> > On Monday, March 20, 2017 at 6:41:24 AM UTC-4, Ben Bacarisse wrote:
> >> justaguy writes:
> >> 
> >> > On Sunday, March 19, 2017 at 6:53:34 AM UTC-4, Ben Bacarisse wrote:
> >> <snip>
> >> >> Sure, but the idea is that the browser will simply suggest possible
> >> >> items from the list when the user types.  Support for this is not
> >> >> universal, of course.
> >> >
> >> > Quick update.  I tried it with Chrome (ver 56) and Firefox (ver 52).
> >> > And I pass the selected value to a js function for further process
> >> > with Event of "onInput", both seems to work.  So far Chrome hasn't
> >> > crashed but FF just crashed.  Fyi, it's not my js function's problem,
> >> > several persons including myself has been testing it for about a week,
> >> > browser never crashed.
> >> 
> >> What does "crash" mean in this case?
> >
> > Browser: FF (ver 52)
> > Err msg:
> > "
> > Gah. Your tab just crashed.
> >
> > We can help you!
> >
> > Choose Restore This Tab to reload page content.
> > ...
> > "
> >
> > Condition:
> > I changed the event from onInput to onSelect.  I then changed it back,
> > however, it still exhibited the same behavior (maybe because of
> > cache).  Today, I changed it to onSelect, expectedly it crashed again,
> > I changed it back to onInput but it did not crash this time.
> >
> >> 
> >> > It raised concern in me if HTML5 "list" INPUT attribute is ready for
> >> > production...
> >> 
> >> Does it go wrong when there are no scripts at all?  
> >
> > Well. I have a few js functions.  But as mentioned in my previous,
> > these functions have been working perfectly fine for some time.
> > Hence, they are not likely the culprit.
> 
> I suspect that list attributes have worked perfectly for some time too
> (I've used them a lot and not seen an issues so far) so this is not a
> compelling argument.  The reason to remove the scripts is to get the
> smallest error case you can.
> 
> >>If not, why do you
> >> think it's the list attribute?  If it does, have you filed a bug?  This
> >> would be a significant help to the community.
> > Do we still need to file a bug?
> 
> I'd argue that nothing should cause that message to appear so it's a bug
> one way or another, but if it's due to using nothing but the list
> attribute then it's a very important one.
> 
> If your test case involves a complex document with lots of scripts, it's
> going to take much more effort to track down than a small test case.  It
> would be helpful if you can gradually reduce the complexity of the
> document until you get as small a test case as you can that still
> triggers the crash.  I know this is non-trivial, but it helps everyone.
> 
> -- 
> Ben.

Here's my program flow in regard to the INPUT element select.
(1) Produce a list of values via jQuery UI autocomplete or HTML5 "List" attribute.
(2) Upon select of an element pass the element to a JavaScript function to take next step.

And here's my observation about use experience, the jQuery seems to provide better user experience whereas HTML5 "List" seems a bit clumsy or was it because I'm new to it and this kind of nascence creates some strange feel about it?

Cheers

[toc] | [prev] | [next] | [standalone]

#32791

From	Richard Maher <maher_rjSPAMLESS@hotmail.com>
Date	2017-03-17 20:11 +0800
Message-ID	<oagjpe$1s27$1@gioia.aioe.org>
In reply to	#32785

On 17-Mar-17 9:09 AM, justaguy wrote:
> Hi,
>
> jQuery is neat

No it's not! Now I have to learn React for some reason after the fads of 
Angular, bootstrap, et al :-(

>
> Doable?  With pure JS, how do we go about doing this?
>

I do it this way: -

/**
  * Copyright (c) Richard Maher. All rights reserved.
  *
  * Generic predictive text utility for Text and Select elements.
  */
     function Tier3Suggest(
              targetElement,
              lovDetent,
              divClass,
              selClass,
              maxRows,
              dataFetch,
              singleton)
     {
       var lovTarget              = targetElement;

       if (arguments.length < 7)
         throw new Error("Insufficient arguments for Tier3Suggest");

       if (!lovTarget.id)
         throw new Error('"id" attribute must be defined for element');

       if (Tier3Suggest.LOV[lovTarget.id])
         throw new Error("A list of values is already defined for this 
element");

       var lovDetent              = lovDetent || 0;
       var stagger                = null;
       var currVintage            = 0;
       var lastSearch             = "";
       var lastSelected           = -1;
       var dataFetch              = dataFetch;
       var singleton              = singleton;
       var lovMax                 = maxRows || 10;
       var targetStyle            = getStyle(targetElement);
       var selClass               = selClass || "";

       var targetDiv              = document.createElement("div");
       targetDiv.className        = divClass || lovTarget.className;
       targetDiv.style.visibility = "hidden";
       targetDiv.style.position   = "absolute";
       targetDiv.style.width      = "auto";
       targetDiv.style.height     = "0px";
       targetDiv.style.overflowY  = "auto";
       targetDiv.style.overflowX  = "hidden";
       targetDiv.style.padding    = targetStyle.padding;
       targetDiv.style.whiteSpace = "nowrap";

       var dimTarget  = lovTarget;
       var offsetTop  = dimTarget.offsetTop  + dimTarget.offsetHeight;
       var offsetLeft = dimTarget.offsetLeft;

       while(dimTarget = dimTarget.offsetParent){
         offsetTop  += dimTarget.offsetTop;
         offsetLeft += dimTarget.offsetLeft;
       }

       targetDiv.style.top        = offsetTop  + "px";
       targetDiv.style.left       = offsetLeft + "px";

       document.body.appendChild(targetDiv);
       var divStyle               = getStyle(targetDiv);

       var suggestList            = document.createElement("ul");
       suggestList.style.padding  = "0px";
       suggestList.style.margin   = "0px";
       suggestList.style.listStyleType
                                  = "none";

       var getLOV =
         function()
           {
           var lovVintage  = ++currVintage;
           var rowCnt      = 0;
           targetDiv.style.height     = "0px";
           targetDiv.style.visibility = "hidden";
           return function(rowKey, rowData)
                  {
                    if (lovVintage != currVintage)
                      return;

                    var listItem = document.createElement("li");
                    var listData = document.createTextNode(rowData.rTrim());

                    listItem.appendChild(listData);
                    listItem._key = rowKey;

                    suggestList.appendChild(listItem);
                    rowCnt++;

                    if (rowCnt == 1) {
                      targetDiv.style.height     = "auto";
                      targetDiv.style.visibility = "visible";
                    }

                    if (rowCnt == lovMax)
                      targetDiv.style.height = targetDiv.clientHeight + 
"px";

                    if (targetDiv.clientWidth < targetDiv.scrollWidth)
                      targetDiv.style.width = (targetDiv.scrollWidth
                                            + (targetDiv.scrollWidth - 
targetDiv.clientWidth)) + "px";
                  }
         }

       var clickHandler =
         function(evt)
         {
           var lclTarget = evt.target || evt.srcElement;

           if (lclTarget.tagName.toLowerCase() == "option")
             lclTarget = lclTarget.parentNode;

           if (lclTarget.tagName.toLowerCase() != "select")
             return;

           if (lclTarget.selectedIndex == lastSelected) {
             lclTarget.selectedIndex = -1;
             lastSelected = -1;
             targetDiv.style.height    = "0px";
             targetDiv.style.visibility="hidden";
             return;
           }

           lastSelected = lovTarget.selectedIndex;

           newLOV();
        }

       var keyHandler =
         function()
         {
           if (falseAlarm())
             return;

           if (stagger)
             clearTimeout(stagger);

           stagger = setTimeout(newKey, lovDetent);
        };

        function newKey()
        {
           stagger = null;

           if (falseAlarm())
             return;

           lastSearch = lovTarget.value;

           newLOV();
        }

        function falseAlarm()
        {
           if (lovTarget.value == lastSearch &&
               targetDiv.style.visibility == "visible")
             return true;

           if (lovTarget.value.length == 0) {
             targetDiv.style.height    = "0px";
             targetDiv.style.visibility="hidden";
             lastSearch = "";
             return true;
           }

           return false;
        }

        function newLOV()
        {
           targetDiv.style.height = "auto";
           targetDiv.style.width  = "auto";

           while (suggestList.lastChild) {
             suggestList.removeChild(suggestList.lastChild);
           }

           rowCallback = getLOV();
           dataFetch.call(this, lovTarget, rowCallback);

         };

       var listHandler =
         function(evt) {
           var lclTarget = evt.target || evt.srcElement;
           if (lclTarget.nodeType == 3)
             lcltarget = lclTarget.parentNode;

           if (lclTarget.tagName.toLowerCase() == "li") {
             if (evt.type == "mouseover") {
               if (selClass != "") {
                 lclTarget.className = selClass;
               }else{
                 lclTarget.style.color           = divStyle.backgroundColor;
                 lclTarget.style.backgroundColor = divStyle.color;
               }
             }
             if (evt.type == "mouseout") {
               if (selClass != "") {
                 lclTarget.className = "";
               }else{
                 lclTarget.style.color           = "";
                 lclTarget.style.backgroundColor = "";
               }
             }
             if (evt.type == "click") {
               singleton.call(this, lovTarget, lclTarget._key, 
lclTarget.firstChild.nodeValue);
               lovTarget.focus();
               if (lovTarget.type.toLowerCase() == "text")
                 lovTarget.value = lovTarget.value;
             }
           }
         }

       var hideLOV =
         function(e) {
           var evt = e || window.event;
           var lclTarget = evt.target || evt.srcElement;
           if (lclTarget.nodeType != 1)
             return;

           if (lclTarget != lovTarget &&
               lclTarget != targetDiv &&
               targetDiv.style.visibility == "visible") {
             targetDiv.style.height     = "0px";
             targetDiv.style.visibility = "hidden";
             currVintage++;
             resetCriteria();
           }
         }

       listenerRegistry.checkIn(suggestList,"mouseover",listHandler);
       listenerRegistry.checkIn(suggestList,"mouseout", listHandler);
       listenerRegistry.checkIn(suggestList,"click",    listHandler);

       if (window.addEventListener) {
         document.addEventListener("focus", hideLOV, true);
       } else {
         if (!document.attachEvent('onfocusin', hideLOV))
           throw new Error("Unable to focusin listener");
       }

       switch (lovTarget.type.toLowerCase())
       {
         case "text":
              listenerRegistry.checkIn(lovTarget,"keyup",keyHandler);
              var resetCriteria =
                  function() {
                    lovTarget.value = "";
                    lastSearch      = "";
                  }
              break;
         case "select-one":
              listenerRegistry.checkIn(lovTarget,"click",clickHandler);
              var resetCriteria =
                  function() {
                    lovTarget.selectedIndex = -1;
                    lastSelected            = -1;
                  }
              break;
         default:
              throw new Error("Unsupported field type for LOV");
       }

       targetDiv.appendChild(suggestList);

       Tier3Suggest.LOV[lovTarget.id] = this;

       return this;
     }

Tier3Suggest.LOV = {};

[toc] | [prev] | [next] | [standalone]

#32812

From	justaguy <lichunshen84@gmail.com>
Date	2017-03-18 21:26 -0700
Message-ID	<39bf4c42-f0cf-4416-a44a-7756ec41201e@googlegroups.com>
In reply to	#32791

On Friday, March 17, 2017 at 8:11:36 AM UTC-4, Richard Maher wrote:
> On 17-Mar-17 9:09 AM, justaguy wrote:
> > Hi,
> >
> > jQuery is neat
> 
> No it's not! Now I have to learn React for some reason after the fads of 
> Angular, bootstrap, et al :-(
> 
> >
> > Doable?  With pure JS, how do we go about doing this?
> >
> 
> I do it this way: -
> 
> /**
>   * Copyright (c) Richard Maher. All rights reserved.
>   *
>   * Generic predictive text utility for Text and Select elements.
>   */
>      function Tier3Suggest(
>               targetElement,
>               lovDetent,
>               divClass,
>               selClass,
>               maxRows,
>               dataFetch,
>               singleton)
>      {
>        var lovTarget              = targetElement;
> 
>        if (arguments.length < 7)
>          throw new Error("Insufficient arguments for Tier3Suggest");
> 
>        if (!lovTarget.id)
>          throw new Error('"id" attribute must be defined for element');
> 
>        if (Tier3Suggest.LOV[lovTarget.id])
>          throw new Error("A list of values is already defined for this 
> element");
> 
>        var lovDetent              = lovDetent || 0;
>        var stagger                = null;
>        var currVintage            = 0;
>        var lastSearch             = "";
>        var lastSelected           = -1;
>        var dataFetch              = dataFetch;
>        var singleton              = singleton;
>        var lovMax                 = maxRows || 10;
>        var targetStyle            = getStyle(targetElement);
>        var selClass               = selClass || "";
> 
>        var targetDiv              = document.createElement("div");
>        targetDiv.className        = divClass || lovTarget.className;
>        targetDiv.style.visibility = "hidden";
>        targetDiv.style.position   = "absolute";
>        targetDiv.style.width      = "auto";
>        targetDiv.style.height     = "0px";
>        targetDiv.style.overflowY  = "auto";
>        targetDiv.style.overflowX  = "hidden";
>        targetDiv.style.padding    = targetStyle.padding;
>        targetDiv.style.whiteSpace = "nowrap";
> 
>        var dimTarget  = lovTarget;
>        var offsetTop  = dimTarget.offsetTop  + dimTarget.offsetHeight;
>        var offsetLeft = dimTarget.offsetLeft;
> 
>        while(dimTarget = dimTarget.offsetParent){
>          offsetTop  += dimTarget.offsetTop;
>          offsetLeft += dimTarget.offsetLeft;
>        }
> 
>        targetDiv.style.top        = offsetTop  + "px";
>        targetDiv.style.left       = offsetLeft + "px";
> 
>        document.body.appendChild(targetDiv);
>        var divStyle               = getStyle(targetDiv);
> 
>        var suggestList            = document.createElement("ul");
>        suggestList.style.padding  = "0px";
>        suggestList.style.margin   = "0px";
>        suggestList.style.listStyleType
>                                   = "none";
> 
>        var getLOV =
>          function()
>            {
>            var lovVintage  = ++currVintage;
>            var rowCnt      = 0;
>            targetDiv.style.height     = "0px";
>            targetDiv.style.visibility = "hidden";
>            return function(rowKey, rowData)
>                   {
>                     if (lovVintage != currVintage)
>                       return;
> 
>                     var listItem = document.createElement("li");
>                     var listData = document.createTextNode(rowData.rTrim());
> 
>                     listItem.appendChild(listData);
>                     listItem._key = rowKey;
> 
>                     suggestList.appendChild(listItem);
>                     rowCnt++;
> 
>                     if (rowCnt == 1) {
>                       targetDiv.style.height     = "auto";
>                       targetDiv.style.visibility = "visible";
>                     }
> 
>                     if (rowCnt == lovMax)
>                       targetDiv.style.height = targetDiv.clientHeight + 
> "px";
> 
>                     if (targetDiv.clientWidth < targetDiv.scrollWidth)
>                       targetDiv.style.width = (targetDiv.scrollWidth
>                                             + (targetDiv.scrollWidth - 
> targetDiv.clientWidth)) + "px";
>                   }
>          }
> 
>        var clickHandler =
>          function(evt)
>          {
>            var lclTarget = evt.target || evt.srcElement;
> 
>            if (lclTarget.tagName.toLowerCase() == "option")
>              lclTarget = lclTarget.parentNode;
> 
>            if (lclTarget.tagName.toLowerCase() != "select")
>              return;
> 
>            if (lclTarget.selectedIndex == lastSelected) {
>              lclTarget.selectedIndex = -1;
>              lastSelected = -1;
>              targetDiv.style.height    = "0px";
>              targetDiv.style.visibility="hidden";
>              return;
>            }
> 
>            lastSelected = lovTarget.selectedIndex;
> 
>            newLOV();
>         }
> 
>        var keyHandler =
>          function()
>          {
>            if (falseAlarm())
>              return;
> 
>            if (stagger)
>              clearTimeout(stagger);
> 
>            stagger = setTimeout(newKey, lovDetent);
>         };
> 
>         function newKey()
>         {
>            stagger = null;
> 
>            if (falseAlarm())
>              return;
> 
>            lastSearch = lovTarget.value;
> 
>            newLOV();
>         }
> 
>         function falseAlarm()
>         {
>            if (lovTarget.value == lastSearch &&
>                targetDiv.style.visibility == "visible")
>              return true;
> 
>            if (lovTarget.value.length == 0) {
>              targetDiv.style.height    = "0px";
>              targetDiv.style.visibility="hidden";
>              lastSearch = "";
>              return true;
>            }
> 
>            return false;
>         }
> 
>         function newLOV()
>         {
>            targetDiv.style.height = "auto";
>            targetDiv.style.width  = "auto";
> 
>            while (suggestList.lastChild) {
>              suggestList.removeChild(suggestList.lastChild);
>            }
> 
>            rowCallback = getLOV();
>            dataFetch.call(this, lovTarget, rowCallback);
> 
>          };
> 
>        var listHandler =
>          function(evt) {
>            var lclTarget = evt.target || evt.srcElement;
>            if (lclTarget.nodeType == 3)
>              lcltarget = lclTarget.parentNode;
> 
>            if (lclTarget.tagName.toLowerCase() == "li") {
>              if (evt.type == "mouseover") {
>                if (selClass != "") {
>                  lclTarget.className = selClass;
>                }else{
>                  lclTarget.style.color           = divStyle.backgroundColor;
>                  lclTarget.style.backgroundColor = divStyle.color;
>                }
>              }
>              if (evt.type == "mouseout") {
>                if (selClass != "") {
>                  lclTarget.className = "";
>                }else{
>                  lclTarget.style.color           = "";
>                  lclTarget.style.backgroundColor = "";
>                }
>              }
>              if (evt.type == "click") {
>                singleton.call(this, lovTarget, lclTarget._key, 
> lclTarget.firstChild.nodeValue);
>                lovTarget.focus();
>                if (lovTarget.type.toLowerCase() == "text")
>                  lovTarget.value = lovTarget.value;
>              }
>            }
>          }
> 
>        var hideLOV =
>          function(e) {
>            var evt = e || window.event;
>            var lclTarget = evt.target || evt.srcElement;
>            if (lclTarget.nodeType != 1)
>              return;
> 
>            if (lclTarget != lovTarget &&
>                lclTarget != targetDiv &&
>                targetDiv.style.visibility == "visible") {
>              targetDiv.style.height     = "0px";
>              targetDiv.style.visibility = "hidden";
>              currVintage++;
>              resetCriteria();
>            }
>          }
> 
>        listenerRegistry.checkIn(suggestList,"mouseover",listHandler);
>        listenerRegistry.checkIn(suggestList,"mouseout", listHandler);
>        listenerRegistry.checkIn(suggestList,"click",    listHandler);
> 
>        if (window.addEventListener) {
>          document.addEventListener("focus", hideLOV, true);
>        } else {
>          if (!document.attachEvent('onfocusin', hideLOV))
>            throw new Error("Unable to focusin listener");
>        }
> 
>        switch (lovTarget.type.toLowerCase())
>        {
>          case "text":
>               listenerRegistry.checkIn(lovTarget,"keyup",keyHandler);
>               var resetCriteria =
>                   function() {
>                     lovTarget.value = "";
>                     lastSearch      = "";
>                   }
>               break;
>          case "select-one":
>               listenerRegistry.checkIn(lovTarget,"click",clickHandler);
>               var resetCriteria =
>                   function() {
>                     lovTarget.selectedIndex = -1;
>                     lastSelected            = -1;
>                   }
>               break;
>          default:
>               throw new Error("Unsupported field type for LOV");
>        }
> 
>        targetDiv.appendChild(suggestList);
> 
>        Tier3Suggest.LOV[lovTarget.id] = this;
> 
>        return this;
>      }
> 
> Tier3Suggest.LOV = {};

Long.  Thanks tho.

[toc] | [prev] | [next] | [standalone]

#32815

From	Richard Maher <maher_rjSPAMLESS@hotmail.com>
Date	2017-03-19 17:39 +0800
Message-ID	<oaljl1$7c0$1@gioia.aioe.org>
In reply to	#32812

On 19-Mar-17 12:26 PM, justaguy wrote:
> On Friday, March 17, 2017 at 8:11:36 AM UTC-4, Richard Maher wrote:
>> Pearls

TL;DR :-(

>
> Long.  Thanks tho.
>

Look forward to seeing your "solution" when you post it - sigh

[toc] | [prev] | [standalone]

Page 2 of 2 — ← Prev page 1 [2]

csiph-web

Alternative and fast option to some very useful jQuery features?

Contents

#32825

#32830

#32791

#32812

#32815