Apparently you can just pass a boolean to the `toggle` function

    $element.toggle(shouldElementBeVisible)

Yes there is!


    $element.toggle();

Without any parameters, `toggle` just toggles the elements visibility (I don&#39;t mean the `visibility` property) and depends on the current state of the element.

    $element.toggle(display);

If you call `toggle` with a boolean parameter, element is shown if it is `true` and `hidden` if it is `false`

[source][1]


  [1]: https://api.jquery.com/toggle/#toggle-display

jQuery has `toggle`:  http://api.jquery.com/toggle/

`$element.toggle();`

This will show the element if it&#39;s hidden, and hide it if it&#39;s shown.

```
$element[ shouldElementBeVisible?&#39;show&#39;:&#39;hide&#39; ]()
```

I&#39;m curious about how spring injection handles calling methods with the `@Bean` annotation. If I put a `@Bean` annotation on a method, and return an instance, I understand that that tells spring to create a bean by calling the method and getting the returned instance. However, sometimes that bean has to be used to wire other beans or setup other code. The usual way this is done is to call the `@Bean` annotated method to get an instance. My question is, why doesn&#39;t this cause there to be multiple instances of the bean floating around?

For example, see the code below (taken from another question). The `entryPoint()` method is annotated with `@Bean`, so I would imagine spring will create a new instance of `BasicAuthenticationEntryPoint` as a bean. Then, we call `entryPoint()` again in the configure block, but it seems like `entryPoint()` returns the bean instance, and isn&#39;t called multiple times (I tried logging, and only got one log entry). Potentially we could call `entryPoint()` multiple times in other parts of the configuration, and we would always get the same instance. Is my understanding of this correct? Does spring do some magical rewriting of methods annotated with `@Bean`?

    @Bean
    public BasicAuthenticationEntryPoint entryPoint() {
        BasicAuthenticationEntryPoint basicAuthEntryPoint = new BasicAuthenticationEntryPoint();
        basicAuthEntryPoint.setRealmName(&quot;My Realm&quot;);
        return basicAuthEntryPoint;
    }
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
    
        http
            .exceptionHandling()
                .authenticationEntryPoint(entryPoint())
                .and()
            .authorizeUrls()
                .anyRequest().authenticated()
                .and()
            .httpBasic();       
    }

Calling a @Bean annotated method in Spring java configuration

Hi I am trying to find out how to set environment variable with Ansible.

something that a simple shell command like this:

    EXPORT LC_ALL=C

tried as shell command and got an error
tried using the environment module and nothing happend.

what am I missing

How to set Linux environment variables with Ansible

I tend to have a lot of these in my code

    if(shouldElementBeVisible)
        $element.show()
    else
        $element.hide()

Is there any more elegant way packaged with javascript, jquery, or underscore? Ideally I want something that looks like this

    $element.showOrHideDependingOn(shouldElementBeVisible)

Hide/show element with a boolean

I tend to have a lot of these in my code
<pre><code class="hljs language-scss">if(shouldElementBeVisible)
 $element.show()
else
 $element.hide()
</code></pre>
Is there any more elegant way packaged with javascript, jquery, or underscore? Ideally I want something that looks like this
<pre><code class="hljs language-bash">$element.showOrHideDependingOn(shouldElementBeVisible)
</code></pre>

I have successfully done code to display a PDF file in the browser instead of the &quot;Open/Save&quot; dialog. Now, I&#39;m stuck trying to display a Word document in the browser. I want to display a Word document in Firefox, IE7+, Chrome etc.

Can any one help? I am always getting the &quot;Open/Save&quot; dialog while displaying the Word doc in browser. I want to implement this functionality using JavaScript.


How do I render a Word document (.doc, .docx) in the browser using JavaScript?

I want to log to stdout (the config environment) when a [gulp][1] task is running or has run.

Something like this:

    gulp.task(&#39;scripts&#39;, function () {
      var enviroment = argv.env || &#39;development&#39;;
      var config = gulp.src(&#39;config/&#39; + enviroment + &#39;.json&#39;)
          .pipe(ngConstant({name: &#39;app.config&#39;}));
      var scripts = gulp.src(&#39;js/*&#39;);
    
      return es.merge(config, scripts)
        .pipe(concat(&#39;app.js&#39;))
        .pipe(gulp.dest(&#39;app/dist&#39;))
        .on(&#39;success&#39;, function() { 
          console.log(&#39;Configured environment: &#39; + environment);
        });
    });

I am not sure what event I should be responding to or where to find a list of these. Any pointers? Many thanks.


  [1]: http://gulpjs.com

console.log to stdout on gulp events

I have a function that I am trying to convert to the new arrow syntax in **ES6**.  It is a named function:

    function sayHello(name) {
        console.log(name + &#39; says hello&#39;);
    }
Is there a way to give it a name without a var statement:

    var sayHello = (name) =&gt; {
        console.log(name + &#39; says hello&#39;);
    }

Obviously, I can only use this function after I have defined it.  Something like following:

    sayHello = (name) =&gt; {
            console.log(name + &#39; says hello&#39;);
        }


Is there a new way to do this in **ES6**?



How do I write a named arrow function in ES2015?

How do i extract the time using moment.js?
    
    &quot;2015-01-16T12:00:00&quot;

It should return &quot;12:00:00 pm&quot;.
The string return will be passed to the timepicker control below.

    http://jdewit.github.com/bootstrap-timepicker 

Any idea? 

Extract time from moment js object

I was watching a Pluralsight course on React and the instructor stated that props should not be changed. I&#39;m now reading [an article (uberVU/react-guide)][1] on props vs. state and it says 

&gt; Both props and state changes trigger a render update.

Later in the article it says:

&gt; Props (short for properties) are a Component&#39;s configuration, its options if you may. They are received from above and immutable.

- So props can change but they should be immutable?
- When should you use props and when should you use state? 
- If you have data that a React component needs, should it be passed through props or setup in the React component via `getInitialState`?


  [1]: https://github.com/uberVU/react-guide/blob/master/props-vs-state.md

What is the difference between state and props in React?

I have a modal and within that modal, there is a dropdown that displays large hidden content, which is working.

Now when you open the next modal, stacked on top of the first modal and dismiss it, the scrolling on modal underneath becomes disabled. 

I have created a full example, including the steps to replicate the issue I am facing. You can see it [here][2].

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
        &lt;link href=&quot;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style&gt;

        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;


        &lt;input type=&quot;button&quot; data-toggle=&quot;modal&quot; data-target=&quot;#modal_1&quot; class=&quot;btn btn-lg btn-primary&quot; value=&quot;Open Modal 1&quot; &gt;

        &lt;div class=&quot;modal fade&quot; id=&quot;modal_1&quot;&gt;
            &lt;div class=&quot;modal-dialog modal-sm&quot;&gt;
                &lt;div class=&quot;modal-content&quot;&gt;
                    &lt;div class=&quot;modal-header&quot;&gt;
                        &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;&lt;span class=&quot;sr-only&quot;&gt;Close&lt;/span&gt;&lt;/button&gt;
                        &lt;h4 class=&quot;modal-title&quot;&gt;First Modal&lt;/h4&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;modal-body&quot;&gt;



                        &lt;form class=&quot;form&quot;&gt;

                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;label&gt;1) Open This First: &lt;/label&gt;
                                &lt;input type=&quot;button&quot; data-toggle=&quot;modal&quot; data-target=&quot;#modal_2&quot; class=&quot;btn btn-primary&quot; value=&quot;Open Modal 2&quot; &gt;
                            &lt;/div&gt;

                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;label&gt;2) Change this once you have opened the modal above.&lt;/label&gt;
                                &lt;select id=&quot;change&quot; class=&quot;form-control&quot;&gt;
                                    &lt;option value=&quot;small&quot;&gt;Show Small Content&lt;/option&gt;
                                    &lt;option value=&quot;large&quot;&gt;Show Large Content&lt;/option&gt;
                                &lt;/select&gt;
                            &lt;/div&gt; 

                            &lt;div id=&quot;large&quot; class=&#39;content-div&#39;&gt;
                                &lt;label&gt;Large Textarea Content.. Try and scroll to the bottom..&lt;/label&gt;
                                &lt;textarea rows=&quot;30&quot; class=&quot;form-control&quot;&gt;&lt;/textarea&gt;

                            &lt;/div&gt;

                            &lt;div id=&quot;small&quot; class=&#39;content-div&#39;&gt;
                                &lt;label&gt; Example Text Box&lt;/label&gt; 
                                &lt;input type=&quot;text&quot; class=&quot;form-control&quot;&gt;
                            &lt;/div&gt;  


                        &lt;/form&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;modal-footer&quot;&gt;
                        &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;


        &lt;div class=&quot;modal fade&quot; id=&quot;modal_2&quot;&gt;
            &lt;div class=&quot;modal-dialog modal-sm&quot;&gt;
                &lt;div class=&quot;modal-content&quot;&gt;
                    &lt;div class=&quot;modal-header&quot;&gt;
                        &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;&lt;span class=&quot;sr-only&quot;&gt;Close&lt;/span&gt;&lt;/button&gt;
                        &lt;h4 class=&quot;modal-title&quot;&gt;Second Modal&lt;/h4&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;modal-body&quot;&gt;

                        &lt;hp&gt;This is the stacked modal.. Close this modal, then chenge the dropdown menu, you cannot scroll... &lt;/h5&gt;

                    &lt;/div&gt;
                    &lt;div class=&quot;modal-footer&quot;&gt;
                        &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;


    &lt;/body&gt;
    &lt;script src=&quot;http://code.jquery.com/jquery-1.11.0.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script&gt;

        $(document).ready(function() {


            $(&quot;.content-div&quot;).hide();
            $(&quot;#change&quot;).change(function() {
                $(&quot;.content-div&quot;).hide();
                $(&quot;#&quot; + $(this).val()).show();
            });


        });

    &lt;/script&gt;
    &lt;/html&gt;

Here&#39;s a Bootply to show the behaviour in action:

[Bootply][1]

  [1]: http://www.bootply.com/GBbtwkQMTf
  [2]: http://lazybots.com/modal_error.php

Bootstrap Modal Issue - Scrolling Gets Disabled

For many reasons I need to disable clicking on certain content within a `div` element. Due to clicking ads attacks, for example.
I still want it to be visible tho.

Consider the following snippet :-

    &lt;div class=&quot;ads&quot;&gt;
    something should be here, i do not want to be clicked
    &lt;/div&gt;

how to disable the abilities of left-clicking whithin that `div`?

How to disable clicking inside div

I am trying to grab a webpage and load into a bootstrap 2.3.2 popover. So far I have:

    $.ajax({
      type: &quot;POST&quot;,
      url: &quot;AjaxUpdate/getHtml&quot;,
      data: {
        u: &#39;http://stackoverflow.com&#39;
      },
      dataType: &#39;html&#39;,
      error: function(jqXHR, textStatus, errorThrown) {
        console.log(&#39;error&#39;);
        console.log(jqXHR, textStatus, errorThrown);
      }
    }).done(function(html) {
        console.log(&#39; here is the html &#39; + html);

        $link = $(&#39;&lt;a href=&quot;myreference.html&quot; data-html=&quot;true&quot; data-bind=&quot;popover&quot;&#39; 
                + &#39; data-content=&quot;&#39; + html + &#39;&quot;&gt;&#39;);
        console.log(&#39;$link&#39;, $link);
        $(this).html($link);

        // Trigger the popover to open
        $link = $(this).find(&#39;a&#39;);
        $link.popover(&quot;show&quot;);


When I activate this code I get the error:

&gt; Uncaught TypeError: Cannot read property &#39;createDocumentFragment&#39; of undefined

What is the problem here and how can I fix it?

&lt;kbd&gt;**[jsfiddle][1]**&lt;/kbd&gt;


[1]: http://jsfiddle.net/kc11/q3vr5t00/2/

Uncaught TypeError: Cannot read property &#39;createDocumentFragment&#39; of undefined

Here is my modal html code:

	&lt;div class=&quot;modal fade&quot; id=&quot;delete-file-modal&quot; role=&quot;dialog&quot;&gt;
		&lt;div class=&quot;modal-dialog&quot;&gt;
			&lt;div class=&quot;modal-content&quot;&gt;
				&lt;form class=&quot;form-horizontal&quot; method=&quot;post&quot; id=&quot;delete_file_form&quot;&gt;
				
					&lt;div class=&quot;modal-body&quot;&gt;
						Are you sure you want to delete this file?	
					&lt;/div&gt;	
					
					&lt;div class=&quot;modal-footer&quot;&gt;
						&lt;button data-dismiss=&quot;modal&quot; class=&quot;btn btn-danger&quot; name=&quot;in_confirm_insert&quot; id=&quot;confirm-delete-button&quot;&gt;Delete&lt;/button&gt;
						&lt;button data-dismiss=&quot;modal&quot; class=&quot;btn btn-default&quot; name=&quot;in_confirm_insert&quot; id=&quot;cancel-delete-button&quot;&gt;Cancel&lt;/button&gt;
					&lt;/div&gt;
					
				&lt;/form&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;

and here is my javascript code:

    $(&#39;#delete-file-modal&#39;).on(&#39;hidden.bs.modal&#39;, function (e) {
	
	    var delete_button = $(e.target).is(&quot;#confirm-delete-button&quot;);
	    	
	    if(delete_button === true) {
            //delete file
	    	alert(&quot;file deleted.&quot;);
		} else {
			alert(&quot;delete failed.&quot;);
		};
    });

I need to be able to check if the delete button is clicked when the delete-file-modal is closed. Is there something else missing in my javascript code?

How do I know which button is clicked when the bootstrap modal closes?

I have a requirement to execute a script in document.ready function if viewbag property is null or not exists. Below is the code I wrote to check if viewbag property not exists.

I used recommned approached where you `@ViewBag.Property!=null` but when I do that I get an error saying name property does not exist in current context,


    @section scripts {
   
    @if ((bool)ViewData.ContainsKey(&quot;FormSubmitFlag&quot;) == false)
    {
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(document).ready(function () {

                var pageVisitCount = sessionStorage.getItem(&quot;personalDetailsVisitCount&quot;);
                if (pageVisitCount == null) {
                    $(&quot;#personal-details-form&quot;).trigger(&#39;reset&#39;);
                    sessionStorage.setItem(&quot;personalDetailsVisitCount&quot;, &quot;1&quot;);
                }
                else {
                    var validator = $(&quot;#personal-details-form&quot;).validate();
                    validator.form();
                    cat.personaldetails.validate();
                }
            });
        &lt;/script&gt;
    }
     
    }


Thank you

How to check if ViewBag property is null or not exists

I create a debounced version of a function with underscore:

    var debouncedThing = _.debounce(thing, 1000);

Once debouncedThing is called...

    debouncedThing();

...is there any way to cancel it, during the wait period before it actually executes?


How to cancel a debounced function after it is called and before it executes?

here is my use case in JavaScript:

I have two arrays of objects which have properties that match (id &amp; name).

    var result1 = [
        {id:1, name:&#39;Sandra&#39;, type:&#39;user&#39;, username:&#39;sandra&#39;},
        {id:2, name:&#39;John&#39;, type:&#39;admin&#39;, username:&#39;johnny2&#39;},
        {id:3, name:&#39;Peter&#39;, type:&#39;user&#39;, username:&#39;pete&#39;},
        {id:4, name:&#39;Bobby&#39;, type:&#39;user&#39;, username:&#39;be_bob&#39;}
    ];

    var result2 = [
        {id:2, name:&#39;John&#39;, email:&#39;johnny@example.com&#39;},
        {id:4, name:&#39;Bobby&#39;, email:&#39;bobby@example.com&#39;}
    ];

    var props = [&#39;id&#39;, &#39;name&#39;];

My goal is to have another array of objects containing only the elements which did not match. Like this:

    var result = [
        {id:1, name:&#39;Sandra&#39;},
        {id:3, name:&#39;Peter&#39;}
    ];

I know that there is a way of doing this by going from result1 compare each object with the objects of result2, then compare their keys, and if did&#39;n match, put the values in another object then push it in new array, but I wonder is there any more elegant way, like using lo-dash or underscore or something similar.

Thank you!

Comparing two arrays of objects, and exclude the elements who match values into new array in JS

I need to flatten a nested object. Need a one liner. Not sure what the correct term for this process is.
I can use pure Javascript or libraries, I particularly like underscore.

I&#39;ve got ...

    {
      a:2,
      b: {
        c:3
      }
    }

And I want ...

    {
      a:2,
      c:3
    }

I&#39;ve tried ...

    var obj = {&quot;fred&quot;:2,&quot;jill&quot;:4,&quot;obby&quot;:{&quot;john&quot;:5}};
    var resultObj = _.pick(obj, &quot;fred&quot;)
    alert(JSON.stringify(resultObj));

Which works but I also need this to work ...

    var obj = {&quot;fred&quot;:2,&quot;jill&quot;:4,&quot;obby&quot;:{&quot;john&quot;:5}};
    var resultObj = _.pick(obj, &quot;john&quot;)
    alert(JSON.stringify(resultObj));


One liner to flatten nested object

I am using Grunt as my Build Tool and ESLint as my linting tool for an app I am working on. I am also using the Underscore Node package, and have made use of it in my app. Unfortunately, when I run ESLint on my code, it thinks that _ is an undefined variable in the following line:

```return _.pluck(objects, nameColumn);```

This is the error it is giving me:

```  78:21  error  &quot;_&quot; is not defined  no-undef ```

I would prefer not to disable the no-undef rule for ESLint, and I have tried installing the Underscore plugin, but I am still receiving this error. If anyone else has any ideas for what to try with this, I would be very appreciative!

If there is any further information I can give that would help anyone with helping me get this figured out, just let me know!

ESLint&#39;s &quot;no-undef&quot; rule is calling my use of Underscore an undefined variable

I would like to use the `reduce` function instead of doing this:

	var result = &#39;&#39;;
	authors.forEach(
		function(author) {
			result += author.name + &#39;, &#39;;
		}
	);
	console.log(result);

So in the array `authors` there are several names. Now I want to build a string with this names, separated by comma (except the last one).

	var result = authors.reduce(function (author, index) {
		return author + &#39; &#39;;
	}, &#39;&#39;);
	console.log(result);

Reduce array to a single string

In Java, we have the package protected (default) modifier for classes, which allows us to have many classes in a single package but exposes only a few and keeps the logic encapsulated.

With Kotlin this doesn&#39;t seem to be the case. If I want a few classes to be visible to each other but no further, I have to use a private modifier which limits visibility to a single file. 

So if you want 10 classes in a package but only one of them to be public, you&#39;d have to have one huge file with all the classes in it (and `private` all over the place).

Is this normal practice or there is a way to achieve some similar modularity in Kotlin?

I don&#39;t understand: if they have the notion of a package, why did they get rid of package protected access?

**Update: We might have package protected visibility after all**       
[see the discussion here][1]


  [1]: https://discuss.kotlinlang.org/t/kotlin-to-support-package-protected-visibility/1544

**Update: If you read through the discussion and still think this is a must-have feature for the language, please vote [here](https://youtrack.jetbrains.com/issue/KT-29227)** 

Package protected alternative in Kotlin

Probably similar to the question, https://stackoverflow.com/questions/1801718/why-can-outer-java-classes-access-inner-class-private-members or https://stackoverflow.com/questions/31478718/access-to-superclass-private-fields-using-the-super-keyword-in-a-subclass .

But there are some differences: the children class can access the private members of their parent (and **only the nearest parent**) class.

Given the sample code below:
        
	public class T {

		private int t;

		class T1 {
			private int t1;

			public void test() {
				System.out.println(t);
			}
		}

		class T2 extends T1 {

			private int t2;

			public void test() {
				System.out.println(t);
				System.out.println(super.t1);
				System.out.println(this.t2);
			}
		}

		class T3 extends T2 {

			public void test() {
				System.out.println(t);
				System.out.println(super.t1); // NG: t1 Compile error! Why?
				System.out.println(super.t2); // OK: t2 OK
			}
		}
	}


Why can nested child classes access private members of their parent class, but grandchildren cannot?

In Java it&#39;s possible to hide a class&#39; main constructor by making it `private` and then accessing it via a `public` `static` method inside that class:

    public final class Foo {
    	/* Public static method */
    	public static final Foo constructorA() {
    		// do stuff
    		
    		return new Foo(someData);
    	}
    	
    	private final Data someData;
    	
    	/* Main constructor */
    	private Foo(final Data someData) {
    		Objects.requireNonNull(someData);
    		
    		this.someData = someData;
    	}
    	
    	// ...
    }

How can the same be reached with Kotlin without separating the class into a `public` interface and a `private` implementation? Making a constructor `private` leads to it not being accessible from outside the class, not even from the same file.

Content Type	Original Author	Original Content on Stackoverflow
Question	Aakil Fernandes	View Question on Stackoverflow
Solution 1 - Javascript	Aakil Fernandes	View Answer on Stackoverflow
Solution 2 - Javascript	Zach Spencer	View Answer on Stackoverflow
Solution 3 - Javascript	Mike	View Answer on Stackoverflow
Solution 4 - Javascript	Christian Eduardo	View Answer on Stackoverflow

Hide/show element with a boolean

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

How to set Linux environment variables with Ansible

Calling a @Bean annotated method in Spring java configuration

Attributions