You are running into two issues here, both of which can easily be fixed.

1. Select2 4.0.0 no longer supports the `query` option in the slimmed down, standard build. This must be included in the full build (`select2.full.js`) as it is handled through a backwards compatibility module.

2. You are using Placecomplete and it depends on an older version of Select2. It looks like Select2 3.5.2+ can work, but I can tell from the options that it is using, it cannot work with Select2 4.0.0. [There is an open ticket](https://github.com/stephjang/placecomplete/issues/11) about this for Placecomplete.

For me, changing the `&lt;input /&gt;` tag to a `&lt;select&gt;` tag worked.


I&#39;ve had this when you have two controls on your web page with the same Id - I had a hidden control and a select (the hidden control was first).

This can also happen if you try to initialize select2 on field type that does not &quot;support&quot; select2, like a hidden field or something along those lines.

I am trying to redirect to a page I intend to implement as an object&#39;s homepage after creation of one.

Below is corresponding part of my views.py

                new_station_object.save()
                return HttpResponseRedirect(reverse(&quot;home_station&quot;, 
                                                    kwargs={&#39;pk&#39;:   new_station_object.id}
                ))
            
    class StationHome(View):
        def get(self, request):
            return HttpResponse(&quot;Created :)&quot;)

and corresponding part of my urls.py;

        url(r&#39;^station/(?P&lt;pk&gt;\d+)$&#39;, StationHome.as_view(),    name=&#39;home_station&#39;),

But I get the said error; 

    TypeError at /station/2
    get() got an unexpected keyword argument &#39;pk&#39;

Someone please help me out.

Django &quot;get() got an unexpected keyword argument &#39;pk&#39;&quot; error

Loading and saving images in OpenCV is quite limited, so... what is the preferred ways to load all images from a given folder? Should I search for files in that folder with .png or .jpg extensions, store the names and use `imread` with every file? Or is there a better way?

Loading all images using imread from a given folder

I am attempting to use the [Select2][1] library in my site to leverage `placecomplete` ([following it&#39;s rather simple configuration steps here][2]), but when I run the code I get a strange error - 

&gt;Error: No select2/compat/query`

I&#39;ve tried googling it and it really seems like no one else has encountered this?

My code in a nutshell is,

loading the files...

    &lt;link href=&quot;scripts/Select2/dist/css/select2.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
    &lt;script src=&quot;scripts/Select2/dist/js/select2.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;scripts/jquery.placecomplete.js&quot;&gt;//&lt;![CDATA[//]]&gt;&lt;/script&gt;


Tagging an input element in my body...

    &lt;input id=&quot;example123&quot; class=&quot;example123&quot; type=&quot;text&quot; /&gt;

In my document.ready function, calling the following code...

    $(&#39;#example123&#39;).placecomplete({});

and thats where it throws the error.

Any ideas where Im going wrong, and what this error means?

  [1]: https://select2.github.io/
  [2]: https://github.com/stephjang/placecomplete

Using Select2 get error - &quot;Error: No select2/compat/query&quot;

I am attempting to use the <a href="https://select2.github.io/" target="_blank" rel="noopener noreferrer">Select2</a> library in my site to leverage <code>placecomplete</code> (<a href="https://github.com/stephjang/placecomplete" target="_blank" rel="noopener noreferrer">following it's rather simple configuration steps here</a>), but when I run the code I get a strange error -
>Error: No select2/compat/query`
I've tried googling it and it really seems like no one else has encountered this?
My code in a nutshell is,
loading the files...
<pre><code class="hljs language-php-template">&#x3C;link href="scripts/Select2/dist/css/select2.min.css" rel="stylesheet" />
&#x3C;script src="scripts/Select2/dist/js/select2.min.js">&#x3C;/script>
&#x3C;script src="scripts/jquery.placecomplete.js">//&#x3C;![CDATA[//]]>&#x3C;/script>
</code></pre>
Tagging an input element in my body...
<pre><code class="hljs language-python">&#x3C;input id="example123" class="example123" type="text" />
</code></pre>
In my document.ready function, calling the following code...
<pre><code class="hljs language-javascript">$('#example123').placecomplete({});
</code></pre>
and thats where it throws the error.
Any ideas where Im going wrong, and what this error means?

I am using node.js to create a web application. When I run the application (either by opening index.html on the browser or using the command &quot;npm start&quot; on the terminal) I get two errors:    


Uncaught ReferenceError: process is not defined    


Uncaught ReferenceError: require is not defined

I solved the &quot;require is not defined&quot; error by specifically including in my index.html head tag the link to [this][1] script, where the require function is defined.
However, I cannot find something similar for the process function.

My question is doublefold:

1. Why do built-in node.js modules need to be re-defined? Why are they not recognized as they are, that is &quot;built-in modules&quot;? Doesn&#39;t the term &quot;built-in module&quot; mean that a module need not be redefined externaly/second-handedly?

2. Is there a way to solve this problem? My script is very simple, I am just trying to use a basic function of node.js, so I cannot figure out what errors I might have done.

If anyone has come about this problem and has found a way around it or a reason this happens, you would be of great help.


  [1]: http://requirejs.org/docs/release/2.1.17/r.js

Uncaught ReferenceError: process is not defined

This is the controller of the main template:

    app.controller(&#39;OverviewCtrl&#39;, [&#39;$scope&#39;, &#39;$location&#39;, &#39;$routeParams&#39;, &#39;websiteService&#39;, &#39;helperService&#39;, function($scope, $location, $routeParams, websiteService, helperService) {
        ...		
    	$scope.editWebsite = function(id) {
    		$location.path(&#39;/websites/edit/&#39; + id);
    	};
    }]);


This is the directive:

    app.directive(&#39;wdaWebsitesOverview&#39;, function() {
    	return {
    		restrict: &#39;E&#39;,
    		scope: {
    			heading: &#39;=&#39;,
    			websites: &#39;=&#39;,
    			editWebsite: &#39;&amp;&#39;
    		},
    		templateUrl: &#39;views/websites-overview.html&#39;
    	}
    });

This is how the directive is applied in main template:

    &lt;wda-websites-overview heading=&quot;&#39;All websites&#39;&quot; websites=&quot;websites&quot; edit-website=&quot;editWebsite(id)&quot;&gt;&lt;/wda-websites-overview&gt;

and this is method is called from directive template (website-overview.html):

    &lt;td data-ng-click=&quot;editWebsite(website.id)&quot;&gt;EDIT&lt;/td&gt;

QUESTION: When EDIT is clicked, this error appears in the console:

&gt; TypeError: Cannot use &#39;in&#39; operator to search for &#39;editWebsite&#39; in 1

Does anyone know what goes on here?

AngularJS Directive element method binding - TypeError: Cannot use &#39;in&#39; operator to search for &#39;functionName&#39; in 1

I am trying to Update/Insert data in a MySQL database through a PHP backend. I&#39;m building the Front End with AngularJS and using the `$http` service for communicating with the REST API.

My setup looks like this:

**I&#39;m setting the header via the $httpProvider:**

     $httpProvider.defaults.withCredentials = true;
     $httpProvider.defaults.headers = {&#39;Content-Type&#39;: &#39;application/json;charset=utf-8&#39;};

**And the POST-Call looks like this:**
 

       return $http({
          url: url,
          method: &quot;POST&quot;,
          data: campaign
        });

**The Dev Console in Chrome shows me this:**

![enter image description here][1]

When I change from POST to PUT, I&#39;m sending an OPTIONS call instead a PUT. And the content-type switches just to `content-type`.

**My  request payload is send as an object:**

![enter image description here][2]

&gt; How do I set my header properly?


----------


**EDIT:**

The PHP backend sets some headers:
  

       $e-&gt;getResponse()
                  -&gt;getHeaders()
                  -&gt;addHeaderLine(&#39;Access-Control-Allow-Methods&#39;, &#39;GET, POST, PUT, DELETE, OPTIONS&#39;);

       $e-&gt;getResponse()
                  -&gt;getHeaders()
                  -&gt;addHeaderLine(&#39;Access-Control-Allow-Origin&#39;, &#39;*&#39;);

&gt; Is there something missing?

  [1]: http://i.stack.imgur.com/awnpk.png
  [2]: http://i.stack.imgur.com/9ojcZ.png

Angular $http is sending OPTIONS instead of PUT/POST

How can I draw an vertical line at a particular point on the x-axis using Chart.js?

In particular, I want to draw a line to indicate the current day on a LineChart. Here&#39;s a mockup of the chart:
http://i.stack.imgur.com/VQDWR.png

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/VQDWR.png

Chart.js — drawing an arbitrary vertical line

I&#39;m really new to React Native and I&#39;m wondering how can I hide/show a component.   
Here&#39;s my test case:

    &lt;TextInput
        onFocus={this.showCancel()}
        onChangeText={(text) =&gt; this.doSearch({input: text})} /&gt;

    &lt;TouchableHighlight 
        onPress={this.hideCancel()}&gt;
        &lt;View&gt;
            &lt;Text style={styles.cancelButtonText}&gt;Cancel&lt;/Text&gt;
        &lt;/View&gt;
    &lt;/TouchableHighlight&gt;

I have a `TextInput` component, what I want is to show the `TouchableHighlight` when the input gets the focus, then hide the `TouchableHighlight` when the user press the cancel button.

I don&#180;t know how to &quot;access&quot; the `TouchableHighlight` component in order to hide/show it inside of my functions `showCancel/hideCancel`.  
Also, how can I hide the button from the very beginning?

Hide/Show components in react native

&gt; Uncaught TypeError: Cannot use &#39;in&#39; operator to search for &#39;length&#39; in
&gt; &quot;

This is the error I receive when I try to do a `$.each` to this JSON object :

    {&quot;type&quot;:&quot;Anuncio&quot;,&quot;textos&quot;:[&quot;Probando esto&quot;,&quot;$ 20150515&quot;],&quot;submit&quot;:&quot;codParameters?___DDSESSIONID\u003d14EA4721A904D6DD71591156996E29F7%3A%2FMobilTest&quot;}
    
I have also tried to do the same with stringify, but I receive the same error:
    
    {\&quot;type\&quot;:\&quot;Anuncio\&quot;,\&quot;textos\&quot;:[\&quot;Probando esto\&quot;,\&quot;$ 20150515\&quot;],\&quot;submit\&quot;:\&quot;codParameters?___DDSESSIONID\\u003d06CBEC9D1A53616EFF703A8C71FBC2B4%3A%2FMobilTest\&quot;}&quot;

If I remove parameters `___DDSESSIONID\\u003d06CBEC9D1A53616EFF703A8C71FBC2B4%3A%2FMobilTest` from the object the $.each works fine. 

Why might this be happening?

Uncaught TypeError: Cannot use &#39;in&#39; operator to search for &#39;length&#39; in

I&#39;m looking to make an image carousel, where a user can toggle between images, by clicking on arrows. For example:

![image of an image carousel][1]

However, I can only use HTML and CSS—no JavaScript (and, therefore, jQuery). I just need the basic setup; smooth transitions and the like are not necessary.

How can I go about accomplishing this?


[1]: http://i.stack.imgur.com/qv9ym.jpg

How can I make an image carousel with only CSS?

Is it right to say that the **AJAX** call has completed after `xhr.readystate===4`?&lt;br/&gt;
[Here][1] it says the state is `complete`. So what does this `complete` mean?

  [1]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

What is meaning of xhr.readystate===4

Can anyone tell me, how to use **jQuery** with **Angular**?


    class MyComponent {
        constructor() {
            // how to query the DOM element from here?
        }
    }

I&#39;m aware there are workarounds like manipulating the *class* or *id* of the DOM element upfront, but I&#39;m hoping for a cleaner way of doing it.

How to use jQuery with Angular?

I would like to have an alternative to a standard checkbox - basically I&#39;d like to use images and when the user clicks the image, fade it out and overlay a tick box.

In essence, I want to do something like Recaptcha 2 does when it gets you to click images that meet a certain criteria. You can [see a Recaptcha demo here][1] but it might sometimes get you to solve text questions, as opposed to the image selection. So here&#39;s a screenshot:

![Google Recaptcha screenshot][2]

When you click one of the images (in this case, containing a picture of steak), the image you click shrinks in size and the blue tick appears, indicating that you&#39;ve ticked it.

Let&#39;s say I want to reproduce this exact example.

I realise I can have 9 hidden checkboxes, and attach some jQuery so that when I click the image, it selects/deselects the hidden checkbox. But what about the shrinking of the image/overlaying the tick?

  [1]: https://www.google.com/recaptcha/api2/demo
  [2]: http://i.stack.imgur.com/d0yEE.png

Use images like checkboxes

I have a select2 v4.0.0 being populated from an Ajax array. If I set the val of the select2 I can see via javascript debugging that it has selected the correct item (#3 in my case), however this is not shown in the select box, it is still showing the placeholder.
![enter image description here][1]


Whereas I should be seeing something like this:
![enter image description here][2]

In my form fields:

    &lt;input name=&quot;creditor_id&quot; type=&quot;hidden&quot; value=&quot;3&quot;&gt;
    &lt;div class=&quot;form-group minimal form-gap-after&quot;&gt;
        &lt;span class=&quot;col-xs-3 control-label minimal&quot;&gt;
            &lt;label for=&quot;Creditor:&quot;&gt;Creditor:&lt;/label&gt;
        &lt;/span&gt;
        &lt;div class=&quot;col-xs-9&quot;&gt;
            &lt;div class=&quot;input-group col-xs-8 pull-left select2-bootstrap-prepend&quot;&gt;
                &lt;select class=&quot;creditor_select2 input-xlarge form-control minimal select2 col-xs-8&quot;&gt;
                    &lt;option&gt;&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

My javascript:

    var initial_creditor_id = &quot;3&quot;;
    $(&quot;.creditor_select2&quot;).select2({
        ajax: {
           url: &quot;/admin/api/transactions/creditorlist&quot;,
           dataType: &#39;json&#39;,
           delay: 250,
           data: function (params) {
               return {
                    q: params.term,
                    c_id: initial_creditor_id,
                    page: params.page
               };
           },
           processResults: function (data, page) {
                return {
                    results: data
                };
           },
           cache: true
       },
       placeholder: &quot;Search for a Creditor&quot;,
       width: &quot;element&quot;,
       theme: &quot;bootstrap&quot;,
       allowClear: true
       }).on(&quot;select2:select&quot;, function (e) {
          var selected = e.params.data;
          if (typeof selected !== &quot;undefined&quot;) {
               $(&quot;[name=&#39;creditor_id&#39;]&quot;).val(selected.creditor_id);
               $(&quot;#allocationsDiv&quot;).hide();
               $(&quot;[name=&#39;amount_cash&#39;]&quot;).val(&quot;&quot;);
               $(&quot;[name=&#39;amount_cheque&#39;]&quot;).val(&quot;&quot;);
               $(&quot;[name=&#39;amount_direct&#39;]&quot;).val(&quot;&quot;);
               $(&quot;[name=&#39;amount_creditcard&#39;]&quot;).val(&quot;&quot;);
            }
        }).on(&quot;select2:unselecting&quot;, function (e) {
            $(&quot;form&quot;).each(function () {
                this.reset()
            });
            (&quot;#allocationsDiv&quot;).hide();
            $(&quot;[name=&#39;creditor_id&#39;]&quot;).val(&quot;&quot;);
        }).val(initial_creditor_id);

How can I make the select box show the selected item rather than the placeholder? Should I be sending this as part of the AJAX JSON response perhaps?

In the past, Select2 required an option called initSelection that was defined whenever a custom data source was being used, allowing for the initial selection for the component to be determined. This worked fine for me in v3.5.


  [1]: http://i.stack.imgur.com/Avj4C.png
  [2]: http://i.stack.imgur.com/gwBZa.png

Content Type	Original Author	Original Content on Stackoverflow
Question	Simon	View Question on Stackoverflow
Solution 1 - Javascript	Kevin Brown-Silva	View Answer on Stackoverflow
Solution 2 - Javascript	Payam Khaninejad	View Answer on Stackoverflow
Solution 3 - Javascript	Liam	View Answer on Stackoverflow
Solution 4 - Javascript	rii	View Answer on Stackoverflow

Using Select2 get error - "Error: No select2/compat/query"

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

Loading all images using imread from a given folder

Django "get() got an unexpected keyword argument 'pk'" error

Attributions