    if ($elem.parents(&#39;.left&#39;).length) {
    
    }

There are many ways to filter for element ancestors.


    if ($elem.closest(&#39;.parentClass&#39;).length /* &gt; 0*/) {/*...*/}
    if ($elem.parents(&#39;.parentClass&#39;).length /* &gt; 0*/) {/*...*/}
    if ($elem.parents().hasClass(&#39;parentClass&#39;)) {/*...*/}
    if ($(&#39;.parentClass&#39;).has($elem).length /* &gt; 0*/) {/*...*/}
    if ($elem.is(&#39;.parentClass *&#39;)) {/*...*/} 

**Beware**, `closest()` *method includes element itself while checking for selector.*

Alternatively, if you have a *unique selector* matching the `$elem`, e.g `#myElem`, you can use:

    if ($(&#39;.parentClass:has(#myElem)&#39;).length /* &gt; 0*/) {/*...*/}
    if(document.querySelector(&#39;.parentClass #myElem&#39;)) {/*...*/}

If you want to match an element depending any of its ancestor class    for styling purpose only, just use a *CSS rule*:

    .parentClass #myElem { /* CSS property set */ }

You can use `parents` method with specified `.class` selector and check if any of them matches it:

    if ($elem.parents(&#39;.left&#39;).length != 0) {
        //someone has this class
    }

I have a huge dataset of several thousand rows with around 10 fields each, about 2MBs of data. I need to display it in the browser. Most straightforward approach (fetch data, put it into `$scope`, let `ng-repeat=&quot;&quot;` do its job) works fine, but it freezes the browser for about half of a minute when it starts inserting nodes into DOM. How should I approach this problem?

One option is to append rows to `$scope` incrementally and wait for `ngRepeat` to finish inserting one chunk into DOM before moving to the next one. But AFAIK ngRepeat does not report back when it finishes &quot;repeating&quot;, so it&#39;s going to be ugly.

Other option is to split data on the server into pages and fetch them in multiple requests, but that&#39;s even uglier.

I looked through Angular documentation in search of something like `ng-repeat=&quot;data in dataset&quot; ng-repeat-steps=&quot;500&quot;`, but found nothing. I am fairly new to Angular ways, so it is possible that I am missing the point completely. What are the best practices at this?

How to improve performance of ngRepeat over a huge dataset (angular.js)?

I came across a discussion in which I learned that what I&#39;d been doing wasn&#39;t in fact salting passwords but peppering them, and I&#39;ve since begun doing both with a function like:

    hash_function($salt.hash_function($pepper.$password)) [multiple iterations]

Ignoring the chosen hash algorithm (I want this to be a discussion of salts &amp; peppers and not specific algorithms but I&#39;m using a secure one), is this a secure option or should I be doing something different? For those unfamiliar with the terms:

 - A **salt** is a randomly generated value usually stored with the string in the database designed to make it impossible to use hash tables to crack passwords. As each password has its own salt, they must all be brute-forced individually in order to crack them; however, as the salt is stored in the database with the password hash, a database compromise means losing both.

 - A **pepper** is a site-wide static value stored separately from the database (usually hard-coded in the application&#39;s source code) which is intended to be secret. It is used so that a compromise of the database would not cause the entire application&#39;s password table to be brute-forceable.

Is there anything I&#39;m missing and is salting &amp; peppering my passwords the best option to protect my user&#39;s security? Is there any potential security flaw to doing it this way?

*Note: Assume for the purpose of the discussion that the application &amp; database are stored on separate machines, do not share passwords etc. so a breach of the database server does not automatically mean a breach of the application server.*

Best Practices: Salting &amp; peppering passwords?

Is there any way in jQuery to check if _any_ parent, grand-parent, great-grand-parent has a class.

I have a markup structure that has left me doing this sort of thing in the code:

    $(elem).parent().parent().parent().parent().hasClass(&#39;left&#39;)

However, for code readability i&#39;d like to avoid this sort of thing. Is there any way to say &quot;any parent/grandparent/great-grand-parent has this class&quot;?

I am using jQuery 1.7.2.

Check if any ancestor has a class using jQuery

Is there any way in jQuery to check if any parent, grand-parent, great-grand-parent has a class.
I have a markup structure that has left me doing this sort of thing in the code:
<pre><code class="hljs language-scss">$(elem).parent().parent().parent().parent().hasClass('left')
</code></pre>
However, for code readability i'd like to avoid this sort of thing. Is there any way to say "any parent/grandparent/great-grand-parent has this class"?
I am using jQuery 1.7.2.

Why does Firebug say there is `No Javascript on this page` when there are clearly loads of JavaScript on the page. I even reloaded the page several time to make sure but it still show the same message.

It never used to do that before, but all of a sudden it misbehaves.

Is it because of some configuration issues or because of something else?

Firebug says &quot;No Javascript on this page&quot;, even though JavaScript does exist on the page

I want to change background dynamically in JS and my set of images is in base64 encoded.
I try:

    document.getElementById(&quot;bg_image&quot;).style.backgroundImage = 
       &quot;url(&#39;http://amigo.com/300107-2853.jpg&#39;)&quot;; 

with perfect result, 

yet I fail to do the same with:   

    document.getElementById(&quot;bg_image&quot;).style.backgroundImage = 
       &quot;url(&#39;data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...&#39;)&quot;;

nor 

    document.getElementById(&quot;bg_image&quot;).style.backgroundImage = 
       &quot;data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...&quot;;

Is there any way to do it?

Is there a way to set background-image as a base64 encoded image?

I&#39;m trying to create an iOS 7 style frosted look with HTML5, CSS3 and JavaScript which can work on webkit browsers.

Technically, given the following HTML:

    &lt;style&gt;
      #partial-overlay {
        width: 100%;
        height: 20px;
        background: rgba(255, 255, 255, .2); /* TODO frost */
        position: fixed;
        top: 0;
        left: 0;
      }
    &lt;/style&gt;
    &lt;div id=&quot;main-view&quot;&gt;
      &lt;div style=&quot;width: 50px; height: 50px; background: #f00&quot;&gt;&lt;/div&gt;
      To my left is a red box&lt;br&gt;
      Now there is just text&lt;br&gt;
      Text that goes on for a few pixels &lt;br&gt;
      or even more
    &lt;/div&gt;
    &lt;div id=&quot;partial-overlay&quot;&gt;
      Here is some content
    &lt;/div&gt;

I&#39;d like to apply something like a `-webkit-filter: blur(5px)` to the first 20px horizontally of `#main-view`.

If the CSS was modified to be `#partial-overlay { width: 20px; height: 100%; ...}` then I&#39;d need to apply the `-webkit-filter: blur(5px)` to the first 20px vertically.

The obvious solution is to use javascript to make a clone of the `#main-view`, set `overflow: hidden` and then change the width/height as appropriate but that seems to me hard to generalize to more complex pages/CSS structures.

Is there a better way to achieve this with minimal performance hit and maximal generalizability?

**EDIT**: Here is an example of what I&#39;m trying to achieve:
![Mockup][1]


  [1]: http://i.stack.imgur.com/cyKkw.png

How to use CSS (and JavaScript?) to create a blurred, &quot;frosted&quot; background?

I have this code in a function:

    tableFields = tableFields.children;
    for (item in tableFields) {
        // Do stuff
    }

According to a console.log of tableFields, I am getting an array back as I assume I need to do. A console.log of item within the loops returns undefined. What do I have to do to loop through tableFields and insert each object into a table?

console log of tableFields:

    HTMLCollection[label, input, label, input 25, label, input, input, input Remove]
		
	
    0
	label
	
    1
	input
	
    2
	label
	
    3
	input 25
	
    4
	label
	
    5
	input
	
    6
	input
	
    7 
	input Remove
	
    description[]
	input
	
    hours[]
	input
	
    invoice_number
	input
	
    getlength
	8
	
    rate[]
	input 25
	
    item
	item()
	
    iterator
	iterator()
	
    namedItem
	namedItem()
	
    __proto__
	HTMLCollectionPrototype { item=item(), namedItem=namedItem(), iterator=iterator()}



Here is the entire section of code as I have so far:

    $this-&gt;title(&quot;Test&quot;);
        $this-&gt;defaultMenu();
        $select = &quot;&quot;;
        $names = Customer::getNames();
        foreach ($names as $id =&gt; $name) {
            $select .= &#39;&lt;option value=&quot;&#39;.$id.&#39;&quot;&#39;;
            if ($this-&gt;customerid == $id) $select .= &#39; selected &#39;;
            $select .= &#39;&gt;&#39;.$name.&#39;&lt;/option&gt;&#39;;
        }
        
        $form = &#39;
    &lt;script type=&quot;text/javascript&quot;&gt;

    var counter = 0;

    function isEven(int){
    int = Number(int);
    return (int%2 == 0);
    }



    function moreLabor() {
	
        var table = document.getElementById(&quot;editTable&quot;);
        var tableFields = document.getElementById(&quot;readroot&quot;);

        tableFields = tableFields.children;
        console.log(tableFields);
        for (item in tableFields) {
            
            if (isEven(counter)) {
                var tableRow = table.insertRow(-1);
                var label = tableRow.insertCell(-1);
                console.log(tableFields[item]);
                label.appendChild(tableFields[item]);

            } else {
                var field = tableRow.insertCell(-1);
                field.innerHTML = item.innerHTML;

                
            }

            counter++;
        }

        console.log();
	var insertHere = document.getElementById(&quot;writeroot&quot;);
    }

    window.onload = function(){
        document.getElementById(\&#39;moreLabor\&#39;).onclick = function(){ moreLabor(); }
        moreLabor();
    }


    &lt;/script&gt;

    &lt;div id=&quot;readroot&quot; style=&quot;display: none&quot;&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;label for=&quot;hours&quot;&gt;Hours:&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;hours[]&quot; value=&quot;&quot; /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;label for=&quot;rate&quot;&gt;Rate:&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;rate[]&quot; value=&quot;25&quot; /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;label for=&quot;description&quot;&gt;Description:&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;description[]&quot; value=&quot;&quot; /&gt;&lt;/td&gt;
    &lt;/tr&gt;

    &lt;input type=&quot;hidden&quot; name=&quot;invoice_number&quot; value=&quot;&#39;.$this-&gt;number.&#39;&quot; /&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;input type=&quot;button&quot; value=&quot;Remove&quot;
		onclick=&quot;this.parentNode.parentNode.removeChild(this.parentNode);&quot; /&gt;&lt;/td&gt;
    &lt;/tr&gt;

    &lt;/div&gt;

    &lt;form method=&quot;POST&quot; class=&quot;invoice&quot; id=&quot;edit&quot;&gt;
    &lt;table id=&quot;editTable&quot;&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;label&gt;Work Order Number:&lt;/label&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;number&quot; value=&quot;&#39;.$this-&gt;number.&#39;&quot;/&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;label&gt;Customer:&lt;/label&gt;&lt;/td&gt;
            &lt;td&gt;&lt;select name=&quot;customerid&quot;&gt;&#39;.$select.&#39;&lt;/select&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;span id=&quot;writeroot&quot;&gt;&lt;/span&gt;

        &lt;tr&gt;
            &lt;td&gt;&lt;input type=&quot;button&quot; id=&quot;moreLabor&quot; value=&quot;Add labor&quot;/&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;submit&quot; name=&quot;Save&quot; value=&quot;Save&quot; /&gt;&lt;/td&gt;
        &lt;/tr&gt;&#39;;
        if (!is_null($this-&gt;id)) {
            $form .= &#39;&lt;input type=&quot;hidden&quot; name=&quot;id&quot; value=&quot;&#39;.$this-&gt;id.&#39;&quot;/&gt;&#39;;
        }
        $form .= &#39;&lt;/table&gt;&lt;/form&gt;&#39;;
        
        
        
        $this-&gt;component($form);

How do I loop through children objects in javascript?

Consider this example. I am using [Lodash][1]

     &#39;data&#39;: [
            {
                &#39;category&#39;: {
                    &#39;uri&#39;: &#39;/categories/0b092e7c-4d2c-4eba-8c4e-80937c9e483d&#39;,
                    &#39;parent&#39;: &#39;Food&#39;,
                    &#39;name&#39;: &#39;Costco&#39;
                },
                &#39;amount&#39;: &#39;15.0&#39;,
                &#39;debit&#39;: true
            },
            {
                &#39;category&#39;: {
                    &#39;uri&#39;: &#39;/categories/d6c10cd2-e285-4829-ad8d-c1dc1fdeea2e&#39;,
                    &#39;parent&#39;: &#39;Food&#39;,
                    &#39;name&#39;: &#39;India Bazaar&#39;
                },
                &#39;amount&#39;: &#39;10.0&#39;,
                &#39;debit&#39;: true
            },
            {
                &#39;category&#39;: {
                    &#39;uri&#39;: &#39;/categories/d6c10cd2-e285-4829-ad8d-c1dc1fdeea2e&#39;,
                    &#39;parent&#39;: &#39;Food&#39;,
                    &#39;name&#39;: &#39;Sprouts&#39;
                },
                &#39;amount&#39;: &#39;11.1&#39;,
                &#39;debit&#39;: true
            },

When I do

    _.filter(summary.data, {&#39;debit&#39;: true})
I get all the objects back.

**what I want?**   

I want all the objects where `category.parent == &#39;Food&#39;`, how can I do that?

I tried

    _.filter(summary.data, {&#39;category.parent&#39;: &#39;Food&#39;})

and got 

    []

  [1]: http://lodash.com/docs


Lodash: how do I use filter when I have nested Object?

I&#39;m having problems using a variable as the selector for a paragraph on which I want to take action.
Specifically I have several title elements and the same number of paragraphs. The desired result is that if I click on Title1 then I take an action on paragraph1. I made a simple case for development purposes whereby if I click on a title then the text of the corresponding paragraph changes color.
If I hard code the solution it works but passing in a variable as the selector fails.

The jQuery is as follows:

        jQuery(document).ready(function($){
	       $(this).click(function(){
		
			var target=(event.target.id);// Get the id of the title on which we clicked. We will extract the number from this and use it to create a new id for the section we want to open.
			alert(target);// checking that we are getting the right value.
			var openaddress=target.replace(/click/gi, &quot;section&quot;);//create the new id for the section we want to open.
			alert(&#39;&quot;#&#39;+openaddress+&#39;&quot;&#39;);//Confirm that the correct ID has been created
			$(&#39;&quot;#&#39;+openaddress+&#39;&quot;&#39;).css( &quot;color&quot;, &quot;green&quot; );//get the id of the click element and set it as a variable.
			//$(&quot;#section1&quot;).css( &quot;color&quot;, &quot;green&quot; );//Test to confirm that hard coded selector functions correctly.
			
				return false;// Suppress the action on the anchor link.
				});


		});

The alert returns the following variable
![alert returned showing the value of the variable][1]
which appears to be correct and matches the hard coded version.
I&#39;ve omitted the html since it works in the hard coded version I assume there is no problem on that side.

I&#39;d appreciate any guidance on what I&#39;m doing wrong and how to correct it.

Thanks


  [1]: http://i.stack.imgur.com/w3iYP.png

jQuery: using a variable as a selector

If I’m doing multiple animations, is it OK performance-wise to add multiple `requestAnimationFrame` callbacks? F.ex:

    function anim1() {
        // animate element 1
    }

    function anim2() {
        // animate element 2
    }

    function anim3() {
        // animate element 3
    }

    requestAnimationFrame(anim1);
    requestAnimationFrame(anim2);
    requestAnimationFrame(anim3);

Or is it proven worse than using a single callback:

    (function anim() {
        requestAnimationFrame(anim);
        anim1();
        anim2();
        anim3();
    }());

I’m asking because I don’t really know what is going on behind the scenes, is `requestAnimationFrame` queuing callbacks when you call it multiple times? 

Multiple requestAnimationFrame performance

I would like to enable caching of an ajax response in javascript/browser.

From the [jquery.ajax docs][1]:

&gt; By default, requests are always issued, but the browser may serve
&gt; results out of its cache. To disallow use of the cached results, set
&gt; cache to false. To cause the request to report failure if the asset
&gt; has not been modified since the last request, set ifModified to true.

However, neither of these address forcing caching.

**Motivation:**
I want to put `$.ajax({...})` calls in my initialisation functions, some of which request the same url. Sometimes I need to call one of these initialisation functions, sometimes I call several. 

**So, I want to minimise the requests to the server if that particular url has already been loaded.**

I could roll my own solution (with some difficulty!), but I would like to know if there is a standard way of doing this.


  [1]: http://api.jquery.com/jQuery.ajax/?rdfrom=http://docs.jquery.com/mw/index.php?title=Ajax/jQuery.ajax&amp;redirect=no#options

Caching a jquery ajax response in javascript/browser

I have this simple scenario:  

Input element which value is changed by jQuery&#39;s val() method.

I am trying to update the angular model with the value that jQuery set. I tried to write a simple directive, but it&#39;s not doing what I want. 

Here&#39;s the directive:

    var myApp = angular.module(&#39;myApp&#39;, []);
    myApp.directive(&#39;testChange&#39;, function() {
        return function(scope, element, attrs) {        
            element.bind(&#39;change&#39;, function() {
                console.log(&#39;value changed&#39;);
            })
        }
    })

this is the jQuery part:  

    $(function(){
        $(&#39;button&#39;).click(function(){
            $(&#39;input&#39;).val(&#39;xxx&#39;);
        })
    })

and html:

    &lt;div ng-app=&quot;myApp&quot;&gt;
        &lt;div ng-controller=&quot;MyCtrl&quot;&gt;
            &lt;input test-change ng-model=&quot;foo&quot; /&gt;
            &lt;span&gt;{{foo}}&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;button&gt;clickme&lt;/button&gt;

Here is the fiddle with my try:  
http://jsfiddle.net/U3pVM/743/

Can someone please point me in the right direction? 

Update Angular model after setting input value with jQuery

I have the following JavaScript object:

    var obj = {
        &quot;key1&quot; : val,
        &quot;key2&quot; : val,
        &quot;key3&quot; : val
    }

Is there a way to check if a key exists in the array, similar to this?

    testArray = jQuery.inArray(&quot;key1&quot;, obj);

does not work.

Do I have to iterate through the obj like this?

    jQuery.each(obj, function(key,val)){}

Checking if a key exists in a JS object

I am trying to create a table in HTML. I have the following design to create. I had added a `&lt;tr&gt;` inside the `&lt;td&gt;` but somehow the table is not created as per the design.

![enter image description here][1]


  [1]: http://i.stack.imgur.com/KM4oZ.png

Can anyone suggest me how I can achieve this?

**I am unable to create Name1 | Price1 sections.**

Html table tr inside td

   I was getting a problem .
     
&lt;!-- language: lang-html --&gt;

    &lt;head&gt;
      &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
      alert(document.getElementsByTagName(&quot;li&quot;).length); 
      &lt;/script&gt;
      &lt;title&gt;purchase list&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;What to buy&lt;/h1&gt;
      &lt;ul id=&quot;purchases&quot;&gt;
        &lt;li&gt; beans&lt;/li&gt;
        &lt;li&gt;Cheese&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/body&gt;

 When I put scripts in head, the result shows 0

&lt;!-- language: lang-html --&gt;

    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot;
                          &quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&quot;&gt;
    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;&gt; 
    &lt;head&gt;
      &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
      &lt;title&gt;Shopping list&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;What to buy&lt;/h1&gt;
     
      &lt;ul id=&quot;purchases&quot;&gt;
        &lt;li&gt;Cheese&lt;/li&gt; 
        &lt;li&gt;Milk&lt;/li&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
        alert(document.getElementsByTagName(&quot;li&quot;).length);
        &lt;/script&gt;
      &lt;/ul&gt;
    &lt;/body&gt;

When I tried to put scripts in body, the result shows 2. why there is such a difference?
what is the main difference?

What&#39;s the difference between putting script in head and body?

I tried to align my text to the bottom of a div from other posts and answers in Stack Overflow I learned to handle this with different CSS properties. But I can&#39;t get it done. Basically my HTML code is like this:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;div style=&#39;height:200px; float:left; border:1px solid #ff0000; position:relative;&#39;&gt;
      &lt;span style=&#39;position:absolute; bottom:0px;&#39;&gt;A Text&lt;/span&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

The effect is that in FF I just get vertical line (the div in a collapsed way) and the text is written next to it. How can I prevent the `div` collapsing but having the width fitting to the text?


Align text to the bottom of a div

I use `select` as below:

    &lt;select name=&quot;taskOption&quot;&gt;
        &lt;option&gt;First&lt;/option&gt;
        &lt;option&gt;Second&lt;/option&gt;
        &lt;option&gt;Third&lt;/option&gt;
    &lt;/select&gt;

How do I get the value from the `select` option and store it into a variable for future use, in PHP?

Using $_POST to get select option value from HTML

I have the following css:

    .pageMenu .active::after {
        content: &#39;&#39;;
        margin-top: -6px;
        display: inline-block;
        width: 0px;
        height: 0px;
        border-top: 14px solid white;
        border-left: 14px solid transparent;
        border-bottom: 14px solid white;
        position: absolute;
        right: 0;
    }
I&#39;d like to change the border-width of the top, left, and bottom border using jQuery. What selector to I use to access this element? I tried the following but it doesn&#39;t seem to be working.

    $(&#39;.pageMenu .active:after&#39;).css(
            {
                &#39;border-top-width&#39;: &#39;22px&#39;,
                &#39;border-left-width&#39;: &#39;22px&#39;,
                &#39;border-right-width&#39;: &#39;22px&#39;
            }
        )

Access the css &quot;:after&quot; selector with jQuery

I am doing the following using attribute contains selector [$(&#39;\[attribute*=value\]&#39;)][1]

    &lt;input name=&quot;man-news&quot;&gt;
    &lt;input name=&quot;milkMan&quot;&gt;

    &lt;script&gt;    
        $( &quot;input[name*=&#39;man&#39;]&quot;).css(&quot;background-color:black&quot;);
    &lt;/script&gt;

This works for the 1st input but not the second input as &quot;**Man**&quot; has a capital &quot;**M**&quot;

How can I make `$( &quot;input[name*=&#39;man&#39;]&quot;)` an case insensitive selector?


  [1]: http://api.jquery.com/attribute-contains-selector/

Case insensitive jQuery attribute selector

To get the chosen value of a `select2` I&#39;m using:
    
    var x = $(&quot;#select&quot;).select2(&#39;data&#39;);
    var select_choice = x.text

The problem is this throws an error if not value has been selected and I was wondering if there was any way to make it return the placeholder if no option is selected


How to use placeholder as default value in select2 framework

I have a set of dynamically generated checkboxes, where each of them has a `data-id` attribute corresponding to a database integer id. When i populate my html-form with an object to edit, there is a list of integers representing which checkboxes should be checked. The checkboxes are wrapped in a `div` with class `checkbox-wrapper`.

So html looks like this:

    &lt;div class=&quot;checkbox-wrapper&quot;&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;checkbox1&quot; data-id=&quot;1&quot;&gt;
        &lt;label for=&quot;checkbox1&quot;&gt;Checkbox 1&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;checkbox-wrapper&quot;&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;checkbox2&quot; data-id=&quot;2&quot;&gt;
        &lt;label for=&quot;checkbox2&quot;&gt;Checkbox 2&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;checkbox-wrapper&quot;&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;checkbox3&quot; data-id=&quot;99&quot;&gt;
        &lt;label for=&quot;checkbox3&quot;&gt;Checkbox 99&lt;/label&gt;
    &lt;/div&gt;

Note that the id runs on auto increment index numbers, while data-id might have a different id value. I want to select them by data-id.

Now, using JQuery, I know I can select the relevant checkboxes like this:

    $(&quot;.checkbox-wrapper&gt;input[data-id=&#39;99&#39;]&quot;);
    $(&quot;.checkbox-wrapper&gt;input[data-id=&#39;1&#39;]&quot;);

This works in my console, in chrome, and it returns the relevant DOM-element. Likewise, this below, sets the checkboxes to checked:

    $(&quot;.checkbox-wrapper&gt;input[data-id=&#39;99&#39;]&quot;).prop(&quot;checked&quot;, &quot;checked&quot;);
    $(&quot;.checkbox-wrapper&gt;input[data-id=&#39;1&#39;]&quot;).prop(&quot;checked&quot;, &quot;checked&quot;);


However, if I iterate through a list of integers in my javascript code (not directly in the console), and log the returned elements, based on the id values, I get some weird results:

    var ids = [1,2]
    $.each(ids, function(index, myID){
		console.log($(&quot;.checkbox-wrapper&gt;input[data-id=&#39;&quot;+myID+&quot;&#39;]&quot;));
		$(&quot;.checkbox-wrapper&gt;input[data-id=&#39;&quot;+myID+&quot;&#39;]&quot;).prop(&quot;checked&quot;, &quot;checked&quot;);	
	});	
 
First of all, no checkboxes are checked. Second, my console prints strange results:

    n.fn.init[0]
        context: document
        length: 0
        prevObject: n.fn.init[1]
        selector: &quot;.checkbox-wrapper&gt;input[data-id=&#39;1&#39;]&quot;
        __proto__: n[0]

    n.fn.init[0]
        context: document
        length: 0
        prevObject: n.fn.init[1]
        selector: &quot;.checkbox-wrapper&gt;input[data-id=&#39;2&#39;]&quot;
        __proto__: n[0]


The printed selector Strings seems perfect. The exact same selectors returns the DOM-elements, when written directly into the chrome console. Then they return objects like this:

    [&lt;input type=​&quot;checkbox&quot; id=​&quot;checkbox1&quot; data-id=​&quot;1&quot;&gt;​]

What is the n.fn.init[0], and why it is returned? Why are my two seemingly identical JQuery functions returning different things?


Why is my JQuery selector returning a n.fn.init[0], and what is it?

I have an old website with JQuery 1.7 which works correctly till two days ago. Suddenly some of my buttons do not work anymore and, after clicking on them, I get this warning in the console:

&gt; Form submission canceled because the form is not connected

The code behind the click is something like this:

     this.handleExcelExporter = function(href, cols) {
       var form = $(&#39;&lt;form method=&quot;post&quot;&gt;&lt;input type=&quot;submit&quot; /&gt;&lt;input type=&quot;hidden&quot; name=&quot;layout&quot; /&gt;&lt;/form&gt;&#39;).attr(&#39;action&#39;, href);
       $(&#39;input[name=&quot;layout&quot;]&#39;, form).val(JSON.stringify(cols));
       $(&#39;input[type=&quot;submit&quot;]&#39;, form).click();
     }

It seems that Chrome 56 doesn&#39;t support this kind of code anymore. Isn&#39;t it? If yes my question is:

 

 1. Why did this happened suddenly? Without any deprecation warning?
 2. What is the workaround for this code?
 3. Is there a way to force chrome (or other browsers) to work like before without changing any code? 

**P.S.**
It doesn&#39;t work in the latest firefox version either (without any message). Also it does not work in IE 11.0 &amp; Edge! (both without any message)

Content Type	Original Author	Original Content on Stackoverflow
Question	crmpicco	View Question on Stackoverflow
Solution 1 - Javascript	Alex	View Answer on Stackoverflow
Solution 2 - Javascript	A. Wolff	View Answer on Stackoverflow
Solution 3 - Javascript	Igor Dymov	View Answer on Stackoverflow

Check if any ancestor has a class using jQuery

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Best Practices: Salting & peppering passwords?

How to improve performance of ngRepeat over a huge dataset (angular.js)?

Attributions