We Keep Coding

Javascript not getting loaded

I added a custom jquery function to my wordpress site. The code was to open a popup window on every alternative clicks. This doesn't work if I add to my wordpress theme header.php
This is what I added <script src="/alternateclicks.js"></script>
The js file was added to the wordpress root location public_html. I don't see any popup whatsoever.
jQuery(document).ready(function( $ ){
var canClick = 2;
$("body").click(function () {
if (canClick%2==0) {
window.open("https://example.com/").blur();
window.focus();
canClick = canClick+1;
}
else {
canClick=canClick+1;}
});
});
The solutions I tried, I tried adding the code to footer.php. Didn't work. I added them using wp_enqueue. Didn't work.
UPDATE
In console am seeing that jquery is not defined. But I added the code only in footer.

Seems like, a Plugin interfered with my loading. The plugin disabled jquery.
Found that the code worked in some pages and didn't work in some pages.
Found out using the console.
Then later when disabling the plugin perfmatters, jquery worked fine.

JQueryUi Autocomplete Combobox sometimes not loading properly in Firefox

I am using JQueryUi 1.12.1 version and JQuery 3.2.1 version.
I am trying to use 2 JQueryUI Autocomplete Comboboxes in my website, so I copied Combobox code from here, changed it a little bit and added to JS file twice (with widget names 'combobox' and 'combobox2', they have diffrent logic and they are dependent on each other). In latest version of Chrome it's working as intended, but in Firefox sometimes (mostly on first loading of page after closing browser, but if I refresh page constantly something like 1 of 10 tries is ending up with error) I have an error saying:
TypeError: jQuery(...).combobox is not a function.
Here is my js file code:
jQuery(document).ready(
function ($) {
$.widget( "custom.combobox", {
//code...
});
$.widget( "custom.combobox2", {
//code...
});
jQuery('#id_substancename').combobox();
jQuery('#id_casnumber').combobox2();
//code...
});

Changing:
jQuery('#id_substancename').combobox();
jQuery('#id_casnumber').combobox2();
To:
$('#id_substancename').combobox();
$('#id_casnumber').combobox2();
Fixed the problem.

How to register a function to be run when an update panel request is complete

Library: Bootstrap 3:Collapse.js.
I have tried
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
});
function endRequestHandler(sender, args) {
//alert("this should work");
$('#collapseTwo').collapse.in();
But it throws Uncaught TypeError: undefined is not a function
The alert instead works no problem.
I thought JQuery was undefined but the page where this code is inherits all the appropriate scripts from a masterpage, so that's not the problem.
So, following this advice I went on to trying
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(endRequestHandler);
But I made no progress.
I've also tried to use the body tag, but still no joy.
Can please somebody tell me what I'm doing wrong?
Thanks.

Bootstrap and its libraries work mainly with classes and data-bindings.
There is no in() function for the collapse.js of bootstrap. If you want to reset the collapsable to be to collapse in you need to remove the class
$('#collapseTwo').removeClass('in');
This will make it reset.
If you would like the animation too you can trigger this with jquery by simulating a click (or how every your app triggers this collapse to show)
$(<selector for your button>).trigger('click')

Error on thr page jQuery(...).on is not a function

I am creating my first yii framework project. I am using cgridview in my project. When I load the page an error is showing in the console. The error is coming from a Javascript code generated by cgridview.
error is
TypeError: jQuery(...).on is not a function
jQuery(document).on('click','#items-grid a.delete',function(){
My javascript is
/*<![CDATA[*/
jQuery(function($) {
jQuery(document).on('click','#items-grid a.delete',function(){
confirmDelete(this);
return false;
});
jQuery('#items-grid').yiiGridView({'ajaxUpdate':['menuitems- grid'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'items','selectableRows':1,'enableHistory':false,'updateSelector':'{page}, {sort}','filterSelector':'{filter}','pageVar':'items_page'});
});
/*]]>*/
What Kind of issue this is. I have included jquery.js latest vertion in my header. I tried older version also but this error is same. How should I fix this error?

You may need to disable Yii's build-in JQuery and use your own version of JQuery. To disable Yii's built-in JQuery put the following lines into your view and load your own JQuery with avoiding conflicts:
Yii::app()->clientScript->scriptMap=array(
'jquery.js'=>false,
'jquery.ui.js' => false,
);

jquery autocomplete this.source is not a function error

I've implemented autocomplete on an input field, but the box does not show up and firebug returns "this.source is not a function". I've used autocomplete on other fields of the same page without any problems. (two textarea's).
I'm using the following code to debug, same effect if I run from script file or Firebug command line.
var fakedata = ['test1','test2','test3','test4','ietsanders'];
$("#omschrijving").autocomplete(fakedata);
running jquery 1.4.2 and jquery ui 1.8.2, both minified versions.
Does anyone have an idea how autocomplete works fine on the textareas but causes this malfunctioning on inputs?
Error & Stack trace:
this.source is not a function
http://facturatie.autodealers.nl/dev/resources/js/jquery-ui-1.8.2.custom.min.js
Line 570
close(Object { name="a"})jquery....min.js (regel 570)
close(Object { name="a"}, Object { name="c"})jquery....min.js (regel 570)
response()

Answer is that the first parameter of the autocomplete should be an object containing the "source" property. This works
var fakedata = ['test1','test2','test3','test4','ietsanders'];
$("#omschrijving").autocomplete({source:fakedata});

If you were trying to use autocomplete from http://www.devbridge.com/projects/autocomplete/jquery/#demo, it now collides with the autocomplete method in jQuery UI. I had the same problem and later noticed that I could just use the jQuery UI implementation.
(NOTE: It appears that this page's documentation is wrong: http://docs.jquery.com/Plugins/Autocomplete#Setup)

If you use it with jQuery UI library it also has plugin named autocomplete. In this case you can use plugin alias devbridgeAutocomplete:
$('.autocomplete').devbridgeAutocomplete({ ... });
This solve the problem with jQuery UI collision

As Shelton stated, the version from devbridge.com (1.1.3) collides with jQuery UI (1.8.4). Got it working by making sure the devbridge version loads after jQuery UI's version.

Had similar problem for tagedit/autocomplete. It seems you also want to disable the autocomplete. Setting the source to false avoids these errors.
Solution:
options.autocompleteOptions.source = false;

Search at the end of jquery.autocomplete.js the following section:
Create chainable jQuery plugin:
$.fn.devbridgeAutocomplete = function (options, args) {....
This devbridgeAutocomplete is an alternative plugin to access to the same functionality using this lines:
if (!$.fn.autocomplete) {
$.fn.autocomplete = $.fn.devbridgeAutocomplete;
}
So.. you can use devbridgeAutocomplete instead of autocomplete or any name by changing this $.fn.devbridgeAutocomplete

in my case I had a second import of jquery which I didn't realize.
Something like:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.27/jquery.autocomplete.min.js"></script>
// More code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
So be sure to import the autocomplete script after you initialized jquery.