     root/
       assets/
          lib/-------------------------libraries--------------------
              bootstrap/--------------Libraries can have js/css/images------------
                  css/
                  js/
                  images/  
              jquery/
                  js/
              font-awesome/
                  css/
                  images/
         common/--------------------common section will have application level resources             
              css/
              js/
              img/
         
     index.html

This is how I organized my application&#39;s static resources. 

I&#39;m trying to use Swift to make a GET call to a REST API, and have tried to follow numerous tutorials, but can&#39;t figure it out.  Either because I cannot figure out how to translate all the Obj-C to Swift, or because half of the methods n&#39; such are deprecated.  Does anyone know how to make the call, and parse returned JSON data?

Make REST API call in Swift

I&#39;m presenting a `UIAlertView` to the user and I can&#39;t figure out how to write the handler. This is my attempt:

    let alert = UIAlertController(title: &quot;Title&quot;,
                                message: &quot;Message&quot;,
                         preferredStyle: UIAlertControllerStyle.Alert)

    alert.addAction(UIAlertAction(title: &quot;Okay&quot;,
                                  style: UIAlertActionStyle.Default,
                                handler: {self in println(&quot;Foo&quot;)})

I get a bunch of issues in Xcode.

The documentation says `convenience init(title title: String!, style style: UIAlertActionStyle, handler handler: ((UIAlertAction!) -&gt; Void)!)`

The whole blocks/closures is a little over my head at the moment. Any suggestion are much appreciated.

Writing handler for UIAlertAction

How do you organize your js &amp; css folder in your web application?

My current project structure is like this one:

    root/
    ├── assets/
    │   ├── js/
    │   │   └──lib/
    │   ├── css/
    │   └── img/
    └── index.html

But it&#39;s more complicated when I use many javascript library &amp; css plugin. Javascript plugin comes with its own .js file and sometimes with  its own .css file.

For example, when I use JQuery with JQueryUI plugin, I put the jquery.js and jquery-ui.js inside js/lib directory. But JQueryUI comes with its own css file. 
Where should I put the css from javascript plugin for best practice? Should I put them inside lib folder, to distinguish my css and javascript css plugin? Or somewhere else?

I know it&#39;s a personal preferences, but I just wanna know how you guys organize your project folder. 

Thanks in advance :)

Best Practice to Organize Javascript Library &amp; CSS Folder Structure

How do you organize your js &#x26; css folder in your web application?
My current project structure is like this one:
<pre><code class="hljs language-css">root/
├── assets/
│ ├── js/
│ │ └──lib/
│ ├── css/
│ └── img/
└── index.html
</code></pre>
But it's more complicated when I use many javascript library &#x26; css plugin. Javascript plugin comes with its own .js file and sometimes with its own .css file.
For example, when I use JQuery with JQueryUI plugin, I put the jquery.js and jquery-ui.js inside js/lib directory. But JQueryUI comes with its own css file.
Where should I put the css from javascript plugin for best practice? Should I put them inside lib folder, to distinguish my css and javascript css plugin? Or somewhere else?
I know it's a personal preferences, but I just wanna know how you guys organize your project folder.
Thanks in advance :)

I have a web application which uses Bootstrap (2.3.2 - corporate policy, we cannot upgrade to 3.0 without lots of testing across several web applications). We have several long pages within this application that require validation of forms and tables - however due to practical and aesthetic reasons we need to have an alert message appear as a floating div at the top of the page.

This will be a fixed floating div, that can be shown and hidden using javascript as and when needed. This part works and I can control this div, whenever I need to flash some information to the user or some error takes place.

The layout is like so:

    &lt;div id=&quot;message&quot;&gt;
        &lt;div id=&quot;inner-message&quot; class=&quot;alert alert-error&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot;&gt;&amp;times;&lt;/button&gt;
            test error message
        &lt;/div&gt;
    &lt;/div&gt;

The styling is below:

    #message {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    #inner-message {
        margin: 0 auto;
    }


The #message div behaves all well and good, but when I try and add some padding to the #message div (to try and get some space between the edge of the page and the div i.e. padding: 5px), the div only gets padding on the left and top and the rest of the div is pushed out too far to the right of the page (hiding part of the &#39;x&#39; inside the bootstrap alert).

Has anyone experienced this before? It seems like a simple enough issue, so am I overlooking something?

Bootstrap alert in a fixed floating div at the top of page

I&#39;ve spent quite a while scouring the internet looking for the best way to properly document callbacks with jsdoc, but unfortunately, I haven&#39;t found a great one yet.

Here&#39;s my question:

I&#39;m writing a Node.js library for developers. This library provides multiple classes, functions, and methods that developers will be working with.

In order to make my code clear and understandable, as well as to (hopefully) auto-generate some API documentation in the future, I&#39;ve started using [jsdoc][1] in my code to self-document what&#39;s happening.

Let&#39;s say I define a function like the following:

    function addStuff(x, y, callback) {
      callback(x+y);
    });

Using jsdoc, I&#39;m currently documenting this function as follows:

    /**
      * Add two numbers together, then pass the results to a callback function.
      *
      * @function addStuff
      * @param {int} x - An integer.
      * @param {int} y - An integer.
      * @param {function} callback - A callback to run whose signature is (sum), where
      *  sum is an integer.
      */
    function addStuff(x, y, callback) {
      callback(x+y);
    });

I feel like the above solution is kinda hack-ish, since there&#39;s no way for me to specify in absolute terms what the callback function should accept.

Ideally, I&#39;d like to do something like:

    /**
      * Add two numbers together, then pass the results to a callback function.
      *
      * @function addStuff
      * @param {int} x - An integer.
      * @param {int} y - An integer.
      * @param {callback} callback - A callback to run.
      * @param {int} callback.sum - An integer.
      */
    function addStuff(x, y, callback) {
      callback(x+y);
    });

The above seems like it&#39;d allow me to more simply convey what my callback needs to accept.  Does that make sense?

I guess my question is simple: what&#39;s the best way to clearly document my callback functions with jsdoc?

Thank you for your time.

  [1]: http://usejsdoc.org/

What&#39;s the proper way to document callbacks with jsdoc?

I am coding a page where the first time the user scrolls, it doesn&#39;t actually scroll the page down, instead it adds a class with a transition. 
I&#39;d like to detect when the user is scrolling down, because if he scrolls up, I want it to do something else.
All the methods that I&#39;ve found are based on defining the current body ScrollTop, and then comparing with the body scrollTop after the page scrolls, defining the direction, but since the page doesn&#39;t actually scroll, the body scrollTop() doesn&#39;t change.


	animationIsDone = false;

	function preventScroll(e) {

	    e.preventDefault();
	    e.stopPropagation();
	}

	$(&#39;body&#39;).on(&#39;mousewheel&#39;, function(e) {

	    if (animationIsDone === false) {
	        $(&quot;#main-header&quot;).removeClass(&quot;yellow-overlay&quot;).addClass(&quot;yellow-overlay-darker&quot;);
	        $(&quot;.site-info&quot;).first().addClass(&quot;is-description-visible&quot;);
	        preventScroll(e);

	        setTimeout(function() {
	            animationIsDone = true;
	        }, 1000);

	    }


	});

This is what I have come with, but that way it doesn&#39;t matter the direction I scroll it triggers the event

How to determine scroll direction without actually scrolling

I am using a Bootstrap dropdown menu. The problem is that it never drops down upon the first click; I need to click 2 times for it to be toggled. I guess the click event is somehow getting stuck somewhere before propagating down...

Is there any way to fix that?

Avoid having to double-click to toggle Bootstrap dropdown

In [my JSFiddle][1], I’m simply trying to iterate over an array of elements. The array is non-empty, as the log statements prove. Yet the call to `forEach` gives me the (not so helpful) “Uncaught `TypeError`: `undefined` is not a function” error.

I must be doing something stupid; what am I doing wrong?

My code:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    var arr = document.getElementsByClassName(&#39;myClass&#39;);
    console.log(arr);
    console.log(arr[0]);
    arr.forEach(function(v, i, a) {
      console.log(v);
    });

&lt;!-- language: lang-css --&gt;

    .myClass {
      background-color: #FF0000;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;myClass&quot;&gt;Hello&lt;/div&gt;

&lt;!-- end snippet --&gt;


  [1]: http://jsfiddle.net/jer2/zcrh9/3/

Using forEach on an array from getElementsByClassName results in “TypeError: undefined is not a function”

Hello I cannot seem to figure out why the debounce function works as expected when passed directly to a keyup event; but it does not work if I wrap it inside an anonymous function.

I have fiddle of the problem: http://jsfiddle.net/6hg95/1/

EDIT: Added all the things I tried.

**HTML**

    &lt;input id=&#39;anonFunction&#39;/&gt;
    &lt;input id=&#39;noReturnAnonFunction&#39;/&gt;
    &lt;input id=&#39;exeDebouncedFunc&#39;/&gt;
    &lt;input id=&#39;function&#39;/&gt;
    &lt;div id=&#39;output&#39;&gt;&lt;/div&gt;

**JAVASCRIPT**

    $(document).ready(function(){
        $(&#39;#anonFunction&#39;).on(&#39;keyup&#39;, function () {
            return _.debounce(debounceIt, 500, false); //Why does this differ from #function
        });
        $(&#39;#noReturnAnonFunction&#39;).on(&#39;keyup&#39;, function () {
            _.debounce(debounceIt, 500, false); //Not being executed
        });
        $(&#39;#exeDebouncedFunc&#39;).on(&#39;keyup&#39;, function () {
            _.debounce(debounceIt, 500, false)(); //Executing the debounced function results in wrong behaviour
        });
        $(&#39;#function&#39;).on(&#39;keyup&#39;, _.debounce(debounceIt, 500, false)); //This is working.
    });
    
    function debounceIt(){
        $(&#39;#output&#39;).append(&#39;debounced&#39;);
    }

`anonFunction` and `noReturnAnonFunction` does not fire the debounce function; but the last `function` does fire. I do not understand why this is. Can anybody please help me understand this?

**EDIT**
Ok, so the reason that the debounce does not happen in #exeDebouncedFunc (the one you refer) is because the function is executed in the scope of the anonymous function and another keyup event will create a new function in another anonymous scope; thus firing the debounced function as many times as you type something (instead of firing once which would be the expected behaviour; see beviour of `#function`)?

Can you please explain the difference between `#anonFunction` and the `#function`. Is this again a matter of scoping why one of them works and the other does not?

**EDIT**
Ok, so now I understand why this is happening. And here is why I needed to wrap it inside an anonymous function:

Fiddle: http://jsfiddle.net/6hg95/5/

**HTML**

    &lt;input id=&#39;anonFunction&#39;/&gt;
    &lt;div id=&#39;output&#39;&gt;&lt;/div&gt;

**JAVASCRIPT**

    (function(){
        var debounce = _.debounce(fireServerEvent, 500, false);
        
        $(&#39;#anonFunction&#39;).on(&#39;keyup&#39;, function () {
            //clear textfield
            $(&#39;#output&#39;).append(&#39;clearNotifications&lt;br/&gt;&#39;);
            debounce();
        });
        
        function fireServerEvent(){
            $(&#39;#output&#39;).append(&#39;serverEvent&lt;br/&gt;&#39;);
        }
    })();




lodash debounce not working in anonymous function

I&#39;ve got an event listener on a checkbox:

    &lt;input type=&quot;checkbox&quot; name=&quot;something&quot;&gt;

My event listener:

    $(&#39;input[type=&quot;checkbox&quot;][name=&quot;something&quot;]&#39;).change(function() { 
        //DO SOMETHING 
    });

I have another event listener that changes `.prop` of the checkbox:

    $(&#39;#button&#39;).click(function() { 
        $(&#39;input[type=&quot;checkbox&quot;][name=&quot;something&quot;]&#39;).prop(&quot;checked&quot;, false);
    });

When I check the checkbox `DO SOMETHING` triggers. When I click on the `#button`, the `.prop` changes and I see the checkbox visually uncheck, but `DO SOMETHING` doesn&#39;t get triggered...

Something I&#39;m overlooking?

Changing .prop using jQuery does not trigger .change event

I&#39;m trying to use event.stopPropagation() within a ReactJS component to stop a click event from bubbling up and triggering a click event that was attached with JQuery in legacy code, but it seems like React&#39;s stopPropagation() only stops propagation to events also attached in React, and JQuery&#39;s stopPropagation() doesn&#39;t stop propagation to events attached with React.

Is there any way to make stopPropagation() work across these events?  I wrote a simple [JSFiddle][1] to demonstrate these behaviors:

    /** @jsx React.DOM */
    var Propagation = React.createClass({
        alert: function(){
            alert(&#39;React Alert&#39;);
        },
        stopPropagation: function(e){
            e.stopPropagation();
        },
        render: function(){
            return (
                &lt;div&gt;
                    &lt;div onClick={this.alert}&gt;
                        &lt;a href=&quot;#&quot; onClick={this.stopPropagation}&gt;React Stop Propagation on React Event&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div className=&quot;alert&quot;&gt;
                        &lt;a href=&quot;#&quot; onClick={this.stopPropagation}&gt;React Stop Propagation on JQuery Event&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div onClick={this.alert}&gt;
                        &lt;a href=&quot;#&quot; className=&quot;stop-propagation&quot;&gt;JQuery Stop Propagation on React Event&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div className=&quot;alert&quot;&gt;
                        &lt;a href=&quot;#&quot; className=&quot;stop-propagation&quot;&gt;JQuery Stop Propagation on JQuery Event&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            );
        }
    });
    
    React.renderComponent(&lt;Propagation /&gt;, document.body);
    
    $(function(){    
        $(document).on(&#39;click&#39;, &#39;.alert&#39;, function(e){
            alert(&#39;Jquery Alert&#39;);
        });
        
        $(document).on(&#39;click&#39;, &#39;.stop-propagation&#39;, function(e){
            e.stopPropagation();
        });
    });


  [1]: http://jsfiddle.net/7LEDT/3/

ReactJS SyntheticEvent stopPropagation() only works with React events?

Here is my html input elements

    &lt;input type=&quot;text&quot; name=&quot;pname[]&quot; value=&quot;&quot; /&gt;
    &lt;input type=&quot;text&quot; name=&quot;pname[]&quot; value=&quot;&quot; /&gt;
    &lt;input type=&quot;text&quot; name=&quot;pname[]&quot; value=&quot;&quot; /&gt;
    &lt;input type=&quot;text&quot; name=&quot;pname[]&quot; value=&quot;&quot; /&gt;
    &lt;input type=&quot;text&quot; name=&quot;pname[]&quot; value=&quot;&quot; /&gt;
    &lt;input type=&quot;text&quot; name=&quot;pname[]&quot; value=&quot;&quot; /&gt;


How can I get all the values of `pname` array using Jquery

How to get all the values of input array element jquery

I&#39;m using Bootstrap 3 in my project, and I want to use Bootstrap Glyphicons in ASP.net buttons.

Here is the code I used, though it didn&#39;t work out (I got a sample which uses Twitter Bootstrap `&lt;span&gt;` tags instead of `&lt;i&gt;` tags):

    &lt;asp:Button ID=&quot;btnRandom&quot;
        runat=&quot;server&quot;
        Text=&quot;&lt;span aria-hidden=&#39;true&#39;
            class=&#39;glyphicon glyphicon-refresh&#39;&gt;
            &lt;/span&gt;&quot;
        onclick=&quot;btnRandom_Click&quot; /&gt;

Maybe something extra should be done.

How can I get it to work? Thanks in advance for the replies.

How do I put a Bootstrap Glyphicon inside an asp:Button in ASP.Net?

Let&#39;s say you have something like:

    &lt;div class=&quot;parent&quot;&gt;
        &lt;input class=&quot;childInput&quot; type=&quot;text&quot; /&gt;
        &lt;div class=&quot;sibling&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;


I want to change the appearance of the parent/siblings when the child receives focus. Are there any CSS tricks for doing stuff like this?

&lt;b&gt;Edit:&lt;/b&gt;

The reason for my question is as follows:

I&#39;m creating an Angular app which needs editable text fields. It should look like a label until it is clicked, at which point it should look like a normal text input. I styled the text field based on :focus to achieve this effect, but the text is cut off by text input&#39;s boundaries. I also used ng-show, ng-hide, ng-blur, ng-keypress and ng-click to switch between the label and the text input based on blurs, key presses and clicks. This worked fine except for one thing: After the label&#39;s ng-click=&quot;setEdit(this, $event)&quot; changes the edit boolean used by ng-show and ng-hide to true, it uses a jQuery call to .select() the text input. However, it isn&#39;t until after the completion of the ng-click that everything is $digest&#39;d, so the text input loses focus again. Since the text input never actually receives focus, using ng-blur to revert back to showing the label is buggy: The user has to click in the text input and then click out of it again to revert back to showing the label.

&lt;b&gt;Edit:&lt;/b&gt;

Here&#39;s an example plunk of the issue: http://plnkr.co/edit/synSIP?p=preview

CSS: Change parent on focus of child

I try to style checkbox background color, but it won&#39;t change whatever I do. I am using firefox 29 latest.

Is there some rule changes in css or may be in the browser?

**CSS:**

    input[type=&quot;checkbox&quot;] {
        background: #990000;    
    }
    
    .chk {
       background-color: #990000;  
        
    }

Here is a demo http://jsfiddle.net/6KXRg/


Why cannot change checkbox color whatever I do?

I have hosted a single static HTML page using GitHub Pages. I need to add a &quot;Send Feedback&quot; feature to my static page where a user can type in his name, email, comments and click the SUBMIT button. This will send an email with the contents to my email address. Can this somehow work in a static HTML page on GitHub? Does GitHub Pages support this mailing feature?  

I also want to know what features/plugins etc can GitHub Pages server support based on the underlying web server it uses?

Send email from static page hosted on GitHub Pages

This seems like a trivial problem, but I can&#39;t figure it out.

On Bootstraps own website they have the Select example. 

![bootstrap select][1]



&lt;br &gt;&lt;br &gt;
Looking at the code it looks like there&#39;s a border-radius of 4 on that select element. 
![enter image description here][2]

&lt;br&gt;&lt;br&gt;
My hope would be that changing that border-radius to 0 would then remove the border-radius from the select element, however, that&#39;s not the case - as seen in the picture below.

![enter image description here][3]


&lt;br&gt;&lt;br&gt;
I&#39;ve explored all the CSS that is changing that select element but none of it seems to remove the border radius.

  [1]: http://i.stack.imgur.com/la7Tg.png
  [2]: http://i.stack.imgur.com/le9qQ.png
  [3]: http://i.stack.imgur.com/8dVrY.png

Remove border radius from Select tag in bootstrap 3

I have a colored png image with transparency. I would like to use css filter to make the whole image white but leave the transparency as it is.
Is that possible in CSS?

CSS filter: make color image with transparency white

I&#39;m trying to use the `:not()` property to exclude a pair of classes from a rule, e.g.:

    *:not(.class1, class2) { display: none; }

However, it looks like the `not()` property doesn&#39;t support comma separated classes, as show in [this fiddle](http://jsfiddle.net/Wt9LR/).

HTML:

    &lt;div class=&#39;one&#39;&gt;
      foo
    &lt;/div&gt;
    &lt;div class=&#39;two&#39;&gt;
      foo
    &lt;/div&gt;
    &lt;div class=&#39;three&#39;&gt;
      foo
    &lt;/div&gt;
    &lt;div class=&#39;four&#39;&gt;
      foo
    &lt;/div&gt;

CSS:

    div {
      background-color: #CBA;
    }

    div:not(.one) {
      background-color: #ABC;
    }

    div:not(.one, .three) {
      color: #F00;
    }

The first and second rules get applied, but the third doesn&#39;t.

I can&#39;t do `*:not(.class1), *:not(.class2)` because any element which has `class2` will be selected by `*:not(.class1)` and vice versa.

I don&#39;t want to do

    * { display: none;}
    .class1, .class2 { display: inline; }

because not all `.class1` and `.class2` elements have the same original display property, and I want them to retain it.

How can I exclude multiple classes from a rule, either with the `not()` property or otherwise?

Multiple classes inside :not()

Using jQuery 2.1.0 and jQuery.ui 1.11.0 Tested in iOS 7. iPhone and iPad Mini. Works on android and regular browsers.


The problem
-----------------
We recently upgraded from jQuery UI 1.10.0 to 1.11.0 and now, when clicking an item in an autocomplete results list, you only get a hover, you have to click the same element again to get a click event. This used to work fine with version 1.10.0.

*(JSFiddle link in comments)*



What does not work
-----------------
using css `{cursor: pointer}` does not work

using `onclick=&quot;&quot;` does not work

*(JSFiddle link in comments)*



The weird part
-----------------
But here comes the fun/weird part. It works in JSFiddle *edit* view, but not on the JSFiddle &quot;/show&quot; page.

**JSFiddles:** *(type a letter to show results &quot;s&quot; is a good one)*

- [Html view](http://jsfiddle.net/35rmk2p6/4/show) (does not work)

- [Edit view](http://jsfiddle.net/35rmk2p6/4/) (works)

I&#39;ve been working on this for days, but hadn&#39;t been able to reproduce it in JSFiddle before testing only the html view. So now I turn to you. I can&#39;t for the life of me figure out why the one page triggers a click event, and the other does not.

I am using the most basic function of jQuery autocomplete. In fact, using the exact same code that is presented on jQuery UI&#39;s home page.



The question
-----------------
So, how do I get autocomplete to work with one click in iOS on the /show page?

*(I will post additional links in comments because I don&#39;t have 10 rep yet. Unless I don&#39;t have enough rep to comment...)*

Autocomplete requires you to click twice in iOS after update to 1.11.0

any idea how to deal with that ? I mean jquery-ui seems not to be amd and I don&#39;t know how to manage that , any idea ?

jquery-ui and webpack, how to manage it into module?

I see from here https://github.com/jquery/jquery-ui that jquery-ui&#39;s latest release is 1.11.4.  However, when I use &quot;npm install jquery-ui&quot;, it&#39;s only 1.10.3.  I checked this version in `node_modules/jquery-ui/jquery-ui.js`.

Is there any way for me to install the latest version?

Using &quot;npm install&quot; to install jquery-ui

I am trying to use some jQuery UI functionality in my reactJS/Redux application. I&#39;ve imported both jQuery and jQuery UI using:

    npm install jquery jquery-ui

And then I&#39;ve tried:

    import $ from &#39;jquery&#39;;
    import jQuery from &#39;query&#39;;
    import jQuery-ui from &#39;jquery-ui&#39;;

However jQuery UI does not seem to be imported when I try to do something like:

    componentDidMount() {
      $(&#39;ol#myList&#39;).selectable();
    }

I believe the issue is with jQuery UI. What am I doing wrong? How can I get jQuery UI to work with this stack?

Thank you!

How to import jQuery UI using ES6/ES7 syntax?

I&#39;m trying to make jQuery UI work, but it doesn&#39;t. Here&#39;s what happens. 

I&#39;m loading dependencies:

    &lt;script src=&quot;assets/src/js/angular/angular.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/src/js/angular-animate/angular-animate.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/src/js/angular-route/angular-route.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/src/js/jquery/dist/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/src/js/jquery-ui/jquery-ui.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/src/js/app.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/src/js/main.js&quot;&gt;&lt;/script&gt;

That&#39;s my **main.js** file:

    $(function () {
        $(&quot;input[type=submit]&quot;)
            .button()
            .click(function (event) {
                event.preventDefault();
            });
    });


    $(function () {
        $(&quot;#circum&quot;).buttonset();
    });

    $(function () {
        $(&quot;#dialog-message&quot;).dialog({
            modal: true,
            buttons: {
                Ok: function () {
                    $(this).dialog(&quot;close&quot;);
                }
            }
        });
    });

When I run the code in Brackets jQuery UI is loaded but doesn&#39;t work, however, when I comment my *main.js* file out and then bring it back that&#39;s the error I get in the console and UI is suddenly working. It&#39;s extremely weird.

    jQuery.Deferred exception: elem.getClientRects is not a function TypeError: elem.getClientRects is not a function
    at jQuery.offset (http://127.0.0.1:27530/assets/src/js/jquery/dist/jquery.js:9779:14)
    at Object.getWithinInfo (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1157:26)
    at jQuery.$.fn.position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1179:23)
    at _position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8709:17)
    at ._position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
    at open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8334:8)
    at .open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
    at _init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8210:9)
    at ._init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
    at _createWidget (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:587:8) undefined

I&#39;ve found this thread discussing the issue, but still wasn&#39;t able to fix it.

[Github][1]

Cheers.


  [1]: https://github.com/jquery/jquery/issues/2804

Content Type	Original Author	Original Content on Stackoverflow
Question	Willy Lazuardi	View Question on Stackoverflow
Solution 1 - Javascript	Akhlesh	View Answer on Stackoverflow

Best Practice to Organize Javascript Library & CSS Folder Structure

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Writing handler for UIAlertAction

Make REST API call in Swift

Attributions