Rectangle 27 6

Recently had the same problem: TypeError: $(...).slick is not a function

Found an interesting solution. Hope, it might be useful to somebody.

In my particular situation there are: jQuery + WHMCS + slick. It works normal standalone, without WHMCS. But after the integration to WHMCS an error appears.

The solution was to use jQuery in noConflict mode.

$(document).ready(function() { 
  $('a').click( function(event) {
    $(this).hide();
    event.preventDefault();
  });
});

Code in noConflict mode:

var $jq = jQuery.noConflict();
$jq(document).ready(function() { 
  $jq('a').click( function(event) {
    $jq(this).hide();
    event.preventDefault();
  });
});

amazing, this is the only thing that worked for me

javascript - Slick Carousel Uncaught TypeError: $(...).slick is not a ...

javascript jquery typeerror slick.js uncaught-typeerror
Rectangle 27 210

By default when you enqueue jQuery in Wordpress you must use jQuery, and $ is not used (this is for compatibility with other libraries).

Your solution of wrapping it in function will work fine, or you can load jQuery some other way (but that's probably not a good idea in Wordpress).

If you must use document.ready, you can actually pass $ into the function call:

jQuery(function ($) { ...

or simply (function($){ // jQuery code here })(jQuery);

I tried the second version however it didn't work, the first version did but I just want to make sure I am not doubling up on calling jQuery.

@Jason you don't even need that; just exactly what I posted: jsfiddle.net/vcbYJ

wordpress - TypeError: $ is not a function when calling jQuery functio...

jquery wordpress function wrapper typeerror
Rectangle 27 6

angularjs - Uncaught TypeError: X[g].exec is not a function fb tokeniz...

angularjs twitter-bootstrap angular-ui-bootstrap typeerror toastr
Rectangle 27 2

If you see "TypeError: 'undefined' is not a function" when using preco...

because the compiler npm installed is not matching the one used by the browser. The latest stable version downloaded is v1.3.0 while if you use npm install handlebars, it will install 2.0.0-alpha4 for you.

Please check it out using

handlebars any_your_template_before_compile.handlebars | grep "compiler"
this.compiler = [5, '>=2.0.0']

With the first number stands for the version for your handlebar compiler. Type in the following code in browser console, see if the result match the version.

Handlebars.COMPILER_REVISION

If you have compiler 5 with browser revison 4, then you will have the above problem.

To fix it, install handlebar 1.3.0 with the following command

npm install handlebars@1.3.0 -g

Then try to compile it again, you will see this time, it gives you matching version info and you are good to go with the precompiled templates.

this.compilerInfo = [4, '>=1.0.0']

Firstly externalize each piece of your braced templates: event.handlebars, item.handlebars, etc... You can put them all in one folder, say "/templates"

Compile all the files and concatenate it into 1 file with the following command:

handlebars *.handlebars -f templates.js

And include handlebars.runtime, this file in your HTML

<script src="/lib/handlebars.runtime.js"></script>
<script src="templates.js"></script>

The templates will be injected into Handlebars.templates by their name. For example, event.handlebars can be accessed by Handlebars.tempaltes['event'].

Using v2.0.0-alpha.4 I had to call Handlebars.template(Handlebars.templates.MYTEMPLATE)(CONTEXT) to use my precompiled templates. Doesn't seem that elegant so either I'm missing something or it's just alpha. Either way, glad I figured it out.

javascript - Using pre-compiled templates with Handlebars.js (jQuery M...

javascript jquery-mobile handlebars.js
Rectangle 27 81

I fixed this bug by updating the html2element function to:

html2element: function(html) {
        var $template, attributes = {},
            template = html;
        $template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) {
            attributes[attr.name] = attr.value
        }), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent()
    },
/wp-content/plugins/js_composer/assets/js/backend/composer-view.js

or in wp-content/plugins/js_composer/assets/js/dist/backend.min.js`

Cannot read property 'attributes' of undefined was the error that came up after using the code above

This just made it load. But when trying to add a new element to the page, the problem still exists. TypeError: $template.get(...) is undefined

Whoah, I confirm it doesn't work... It seems working, but I can't add new elements...

Why are we changing plugin stuff - shouldn't the authors fix this? When we will update we'r in the same s*** again ... ?

javascript - Uncaught TypeError: $template.get is not a function - Sta...

javascript jquery wordpress
Rectangle 27 226

Wordpress uses jQuery in noConflict mode by default. You need to reference it using jQuery as the variable name, not $, e.g. use

jQuery(document);

instead of

$(document);

You can easily wrap this up in a self executing function so that $ refers to jQuery again (and avoids polluting the global namespace as well), e.g.

(function ($) {
   $(document);
}(jQuery));

The script is not necessary; you can just call jQuery(document) instead of $(document) wherever you want. If you do want to use $ instead, then the above script simply creates a function which takes an argument $ then executes it passing jQuery; in short, within the function, $ points to jQuery as you would expect.

Actually, what I did was place my normal $(document).ready(function() { // code }); in place of your $(document); ... that worked like a charm.

Yes, that is what I was suggesting - "within the function, $ points to jQuery as you would expect".

jquery - TypeError: 'undefined' is not a function (evaluating '$(docum...

jquery wordpress
Rectangle 27 225

Wordpress uses jQuery in noConflict mode by default. You need to reference it using jQuery as the variable name, not $, e.g. use

jQuery(document);

instead of

$(document);

You can easily wrap this up in a self executing function so that $ refers to jQuery again (and avoids polluting the global namespace as well), e.g.

(function ($) {
   $(document);
}(jQuery));

The script is not necessary; you can just call jQuery(document) instead of $(document) wherever you want. If you do want to use $ instead, then the above script simply creates a function which takes an argument $ then executes it passing jQuery; in short, within the function, $ points to jQuery as you would expect.

Actually, what I did was place my normal $(document).ready(function() { // code }); in place of your $(document); ... that worked like a charm.

Yes, that is what I was suggesting - "within the function, $ points to jQuery as you would expect".

jquery - TypeError: 'undefined' is not a function (evaluating '$(docum...

jquery wordpress
Rectangle 27 2

TypeError: $(...).accordion is not a function $("#accordion").accordion(

$('#dialog').dialog({ TypeError: $(...).dialog is not a function

It worked fine in the webforms. The problem/solution was this line in the _Layout.cshtml

@Scripts.Render("~/bundles/jquery")

Comment it out to see if the errors go away. Then fix it in the BundlesConfig:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

jquery - is not a function error - Stack Overflow

jquery function
Rectangle 27 2

TypeError: $(...).accordion is not a function $("#accordion").accordion(

$('#dialog').dialog({ TypeError: $(...).dialog is not a function

It worked fine in the webforms. The problem/solution was this line in the _Layout.cshtml

@Scripts.Render("~/bundles/jquery")

Comment it out to see if the errors go away. Then fix it in the BundlesConfig:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

jquery - is not a function error - Stack Overflow

jquery function
Rectangle 27 13

This solution worked for me

;(function($){
    // your code
})(jQuery);

Move your code inside the closure and use $ instead of jQuery

Fantastic solution. The main reason this works is because that ";" closes any other instance of jquery already active and at the same time it declares another one new locally. When you have just few seconds to implement a layout in production or lots and lots of wordpress plugins running this can do it great. But, be aware that you must fix the issue, this is just a band-aid, but if it is an info page it's OK.

wordpress - TypeError: $ is not a function when calling jQuery functio...

jquery wordpress function wrapper typeerror
Rectangle 27 49

The .map function is only available on array. It looks like data isn't in the format you are expecting it to be (it is {} but you are expecting []).

this.setState({data: data});

should be

this.setState({data: data.conversations});

Check what type "data" is being set to, and make sure that it is an array.

Modified code with a few recommendations (propType validation and clearInterval):

var converter = new Showdown.converter();

var Conversation = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="conversation panel panel-default">
        <div className="panel-heading">
          <h3 className="panel-title">
            {this.props.id}
            {this.props.last_message_snippet}
            {this.props.other_user_id}
          </h3>
        </div>
        <div className="panel-body">
          <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
        </div>
      </div>
    );
  }
});

var ConversationList = React.createClass({
 // Make sure this.props.data is an array
  propTypes: {
    data: React.PropTypes.array.isRequired
  },
  render: function() {

    window.foo            = this.props.data;
    var conversationNodes = this.props.data.map(function(conversation, index) {

      return (
        <Conversation id={conversation.id} key={index}>
          last_message_snippet={conversation.last_message_snippet}
          other_user_id={conversation.other_user_id}
        </Conversation>
      );
    });

    return (
      <div className="conversationList">
        {conversationNodes}
      </div>
    );
  }
});

var ConversationBox = React.createClass({
  loadConversationsFromServer: function() {
    return $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data.conversations});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },

 /* Taken from 
    https://facebook.github.io/react/docs/reusable-components.html#mixins
    clears all intervals after component is unmounted
  */
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.map(clearInterval);
  },

  componentDidMount: function() {
    this.loadConversationsFromServer();
    this.setInterval(this.loadConversationsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="conversationBox">
        <h1>Conversations</h1>
        <ConversationList data={this.state.data} />
      </div>
    );
  }
});

$(document).on("page:change", function() {
  var $content = $("#content");
  if ($content.length > 0) {
    React.render(
      <ConversationBox url="/conversations.json" pollInterval={20000} />,
      document.getElementById('content')
    );
  }
})

javascript - React JS - Uncaught TypeError: this.props.data.map is not...

javascript ajax json reactjs
Rectangle 27 49

The .map function is only available on array. It looks like data isn't in the format you are expecting it to be (it is {} but you are expecting []).

this.setState({data: data});

should be

this.setState({data: data.conversations});

Check what type "data" is being set to, and make sure that it is an array.

Modified code with a few recommendations (propType validation and clearInterval):

var converter = new Showdown.converter();

var Conversation = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="conversation panel panel-default">
        <div className="panel-heading">
          <h3 className="panel-title">
            {this.props.id}
            {this.props.last_message_snippet}
            {this.props.other_user_id}
          </h3>
        </div>
        <div className="panel-body">
          <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
        </div>
      </div>
    );
  }
});

var ConversationList = React.createClass({
 // Make sure this.props.data is an array
  propTypes: {
    data: React.PropTypes.array.isRequired
  },
  render: function() {

    window.foo            = this.props.data;
    var conversationNodes = this.props.data.map(function(conversation, index) {

      return (
        <Conversation id={conversation.id} key={index}>
          last_message_snippet={conversation.last_message_snippet}
          other_user_id={conversation.other_user_id}
        </Conversation>
      );
    });

    return (
      <div className="conversationList">
        {conversationNodes}
      </div>
    );
  }
});

var ConversationBox = React.createClass({
  loadConversationsFromServer: function() {
    return $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data.conversations});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },

 /* Taken from 
    https://facebook.github.io/react/docs/reusable-components.html#mixins
    clears all intervals after component is unmounted
  */
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.map(clearInterval);
  },

  componentDidMount: function() {
    this.loadConversationsFromServer();
    this.setInterval(this.loadConversationsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="conversationBox">
        <h1>Conversations</h1>
        <ConversationList data={this.state.data} />
      </div>
    );
  }
});

$(document).on("page:change", function() {
  var $content = $("#content");
  if ($content.length > 0) {
    React.render(
      <ConversationBox url="/conversations.json" pollInterval={20000} />,
      document.getElementById('content')
    );
  }
})

javascript - React JS - Uncaught TypeError: this.props.data.map is not...

javascript ajax json reactjs
Rectangle 27 29

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

The second script plugs itself into jQuery, and "adds" $(...).datepicker.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

It undoes the plugging in and therefore $(...).datepicker becomes undefined.

Although the first $(document).ready block appears before that, the anonymous callback function body is not executed until all scripts are loaded, and by then $(...) (window.$ to be precise) is referring to the most recently loaded jQuery.

You would not run into this if you called $('.dateinput').datepicker immediately rather than in $(document).ready callback, but then you'd need to make sure that the target element (with class dateinput) is already in the document before the script, and it's generally advised to use the ready callback.

If you want to use datepicker from jquery-ui, it would probably make most sense to include the jquery-ui script after bootstrap. jquery-ui 1.11.4 is compatible with jquery 1.6+ so it will work fine.

Alternatively (in particular if you are not using jquery-ui for anything else), you could try bootstrap-datepicker.

This was a great reminder. In my case I had already called jquery-ui from another php include file. So it's the same effect as you've correctly stated. Thanks!

javascript - Uncaught TypeError: $(...).datepicker is not a function(a...

javascript jquery django datepicker
Rectangle 27 35

I ran into this error when I was trying to use the slide effect that I thought was part of jQuery but was actually a jQuery UI effect. This was the output from my console:

Uncaught TypeError: Property '#<Object>' of object #<Object> is not a function

So, to me it seems like you just need to include the jquery UI library. Add this line after you include jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

In my case it was a gremlin - a hidden character!

javascript - Uncaught TypeError: Property '$' of object [object global...

javascript jquery
Rectangle 27 35

I ran into this error when I was trying to use the slide effect that I thought was part of jQuery but was actually a jQuery UI effect. This was the output from my console:

Uncaught TypeError: Property '#<Object>' of object #<Object> is not a function

So, to me it seems like you just need to include the jquery UI library. Add this line after you include jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

In my case it was a gremlin - a hidden character!

javascript - Uncaught TypeError: Property '$' of object [object global...

javascript jquery
Rectangle 27 6

var $=jQuery.noConflict();

$(document).ready(function(){
    // jQuery code is in here
});

wordpress - TypeError: $ is not a function when calling jQuery functio...

jquery wordpress function wrapper typeerror
Rectangle 27 12

If you get that error, it could be that:

RequireJS is not loaded.

This can diagnosed by opening the browser's debugger to look at network requests and seeing whether the file that defines require is asked by the browser and checking that the response indicates that the data is available (i.e. loaded from the server, loaded from cache).

RequireJS is loaded but not initializing properly.

This could happen if something is loaded before RequireJS and somehow messes with the JavaScript runtime in a way that makes RequireJS fail to initialize. For instance, if something puts in the global space a global named define of any type, or global named requirejs and which is a function, then RequireJS will silently abandon initializing.

I'd diagnose this with breakpoints in the file that contains RequireJS to see whether it completes execution or not.

RequireJS is loaded but something else redefines require.

I'd inspect the value of require just after RequireJS is loaded. If it has a config method defined at that point, then something else must be messing with it later.

javascript - TypeError: require.config is not a function - Stack Overf...

javascript node.js requirejs brunch
Rectangle 27 19

noConflict
var example=jQuery.noConflict();
example(function(){
example('div#rift_connect').click(function(){
    example('span#resultado').text("Hello, dude!");
    });
});
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

jquery - TypeError: 'undefined' is not a function (evaluating '$(docum...

jquery wordpress
Rectangle 27 19

noConflict
var example=jQuery.noConflict();
example(function(){
example('div#rift_connect').click(function(){
    example('span#resultado').text("Hello, dude!");
    });
});
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

jquery - TypeError: 'undefined' is not a function (evaluating '$(docum...

jquery wordpress
Rectangle 27 1

Error "Uncaught TypeError: $(...).datepicker is not a function"

Instead of

$(document).ready(function () {
    $("#fecha").datepicker();
});
$.noConflict();
jQuery(document).ready(function ($) {
    $("#fecha").datepicker();
});

jquery - Uncaught TypeError: $(...).datepicker is not a function - Sta...

jquery