We Keep Coding

How to call javascript function inside jQuery

We have this tag with a javascript function in our HTML,
<select name="My_Saved_Billing" onchange="Choose_My_Saved_Billing(this.selectedIndex)" >
<option>Select</option>
<option value="1714">Address line 1, QC</option>
</select>
<script type="text/javascript">
function Choose_My_Saved_Billing(arg_index) {
switch(arg_index) {
// some commands here
}
}
</script>
And I also added a jQuery to it which is below so that on windows load, it will automatically select the second option.
<script type="text/javascript">
$(window).load(function(){
$("select").val($("select option:eq(1)").val());
});
</script>
But is it possible to call javascript function using jQuery? If so, how should I call this one?
Should I use Choose_My_Saved_Billing(this.selectedIndex)or Choose_My_Saved_Billing(arg_index)or you might know something. I've tried these two but none are working. Please let me know. Just a beginner here.

The way to call a JavaScript function from a JQuery file is the same as calling a JavaScript function from a JavaScript file :) This is so because JQuery is a library based from JavaScript. Say, you want to call function foo from a JavaScript file, when the window loads.
JQuery:
$(window).on('load', function() {
foo();
});
And JavaScript:
function foo() {
alert('This works!');
}
I hope this helps!

Yes, it's possible to call functions inside a jQuery ready block. Since you've defined the function at global scope (should probably move this into the jQuery ready block or, if you want to go to the trouble, into a module), it can be called from anywhere. So inside your ready block:
$(function () {
// do stuff
Choose_My_Saved_Billing(args);
});

jQuery is JavaScript. It's just a library for JavaScript. The main jQuery global $ is a JavaScript function that takes a valid selector as an argument and provides several methods on the return value of that function.
So calling a JavaScript function inside the callback function to .load is not an issue.
It is not clear what the Choose_My_Saved_Billing function actually does.

Think about what's happening here. In your onchange event you're calling the function with the index of the selected option passed as an argument. Since JQuery is just a library of shortcuts for things you can do in JavaScript, we should easily be able to do the same thing.
So let's get the element for which we want the selected index:
// maybe think about adding an ID here for better selection
var select = $('select[name^="My_Saved_"]');
Then let's get the index with a change event, then call the function:
var index = 0;
select.change(function(){
index = select.selectedIndex || 2; // set the index to default to 2
Choose_My_Saved_billing(index);
});

Instead of using onchange="...", just use jQuery to attach a change listener:
$(window).load(function() {
$('.colors_backgroundneutral select').on('change', function () {
Choose_My_Saved_Billing(this.value);
});
});

$(document).ready(function() {
$("#Submit1").click(function() {
$("#id1").hide();
Raise1();
});
$("#Raise").click(function() {
$("#id1").show();
});
});
function Raise1() {
var value1;
alert("hi");
value1 = document.getElementById("amount").value;
alert(value1);
alert("done");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

As jQuery is a more simple and advanced JavaScript solution, my guessing is you can call you JS function like this:
$(window).load(function(){
my_js_function(arg1, arg2);
});
Now, what you want is to call the JS function named Choose_My_Saved_Billing() with argument arg_index
So, your jQuery will look like this:
$(window).load(function(){
Choose_My_Saved_Billing(arg_index);
});
This only works if the function is already declared through raw code, on via the <script type="text/javascript" src="path/to/my_file.js"> head tag.
It should work like a charm, if not, feel free to share the errors returned by your browser.

Using the dollar alias for JQuery with selenium

I am using selenium addon as well as jquery in my addon. Due to use of jquery functions with $ being used in selenium throwing function not found error. Removing the Jquery, everything works fine. Using Jquery (ajax call) is must for me. Please suggest how can I make them work together.

One recommended way to solve this kind of conflict is to wrap your javascript code inside a function, and pass jQuery as an argument to this function :
// e.g : turn this code :
$(function(){
$('.my-class').on('click', function(){
$.ajax(...);
});
...
});
// into :
(function($) { // start an anonymous function,
// whose first argument is named '$' ...
$(function(){
$('.my-class').on('click', function(){
$.ajax(...);
});
...
});
}(jQuery)); // and call this function right away,
// passing the jQuery object as first argument
Note that $ is just a shortcut for jQuery :
jQuery('.my-class') and jQuery.ajax(...)
// are exactly the same as :
$('.my-class') and jQuery.ajax(...)
You can also use your own alias :
var $j = jQuery;
If some day you need to mix jQuery with another library which defines a $ variable, you can also use jQuery.noConflict() (example taken from this use case) :
var $j = jQuery.noConflict();

How can I determine whether jQuery is fully initialized?

I'm writing a bookmarklet using jQuery. It looks like javascript:document.write('<script src="path/to/loader.js"></script>'), and loader.js does the initializing stuffs:
check_the_environment();
document.head.innerHTML='<meta charset=utf-8>';
document.body.innerHTML='(the webpage)';
var jq=document.createElement('script');
jq.src='path/to/jquery.min.js';
document.head.appendChild(jq);
function load_core() {
if(window.$)
eval('(core js code)');
else
setTimeout(load_core,50);
}
load_core();
The loader loads the core javascript code after the jQuery is available.
But sometimes I get this error in my core code:
$(...).on is not a function
It seems that jQuery was still initializing itself although $ variable is setted.
So, I need to wait for jQuery to be completely initialized before the loader loads the core code. How can I do that?
The traditional way of using $(document).ready(...) is infeasible, as jQuery is being loaded after the webpage is ready.
Here is a minimal Python code to check whether the solution is working:
import cherrypy
mod='''
var htmlroot=document.getElementsByTagName('html')[0];
function load_core() {
if(window.jQuery)
jQuery(function(){
alert($(document).on);
});
else
setTimeout(load_core,10);
}
if(!document.head)
htmlroot.appendChild(document.createElement('head'));
var jquery=document.createElement('script');
jquery.src='http://libs.useso.com/js/jquery/2.1.1/jquery.min.js';
document.head.appendChild(jquery);
load_core();
'''
class Website:
#cherrypy.expose()
def mod(self,_time):
return mod
#cherrypy.expose()
def index(self):
return '''Mod'''
cherrypy.quickstart(Website(),'/');

The right and foolproof way would be:
jQuery(function(){
// code
});
Since jQuery may be loaded in noConflict mode the $ var may not have been initialized.
For the sake of productivity the following can also be used to have access to $ var inside the jQuery scope.
jQuery(function($){
// you can use $ without worrying about conflicts now
});

You can check type of $ as below
if(typeof $ == "function"){
//Jquery loaded
}

Switch between .bind() and .on() - dynamically

I want to do this, because I am working with third-party scripts releated to Internet Marketing. Some of them may contain jQuery library included within and it interfere with recent or latest jQuery Library that is included on my website.
Hence, I'd like to switch between .on() and .bind() dynamically upon website load with a help of variable.
For example, let's say I have global variable:
var incJS = false;
And now depending of the third-party script, I know if they have older Lib included so I'd use this.
function tpNetwork ()
{
incJS = true;
startGateway('XXXXX');
$('#fancybox-outer')
.delay(1000)
.fadeTo(300, 1);
preventGTW();
widgetStyle();
}
Now as you may see there's a function at the very bottom widgetStyle()
That function contain loads of things, but important part is following:
$(window).on('resize', function () {
if ($('.widget_wrap').length) widgetCenter_horizontal();
});
It has .on() method there. That is not supported in very old jQuery that's been used by that third-party network. I'd like to switch every single .on() with .bind() but I don't know how to, without duplicating things.
I did it like this, but it's duplicate and I believe there's easier way.
if (!incJS)
{
$(window).on('resize', function () {
if ($('.widget_wrap').length) widgetCenter_horizontal();
});
}
else
{
$(window).bind('resize', function () {
if ($('.widget_wrap').length) widgetCenter_horizontal();
});
}
Any kind of tips/help is appreciated. I am really out of any ideas and by doing researches I found nothing.

What about:
$(function(){
if(!$.fn.on) $.fn.on = $.fn.bind;
});
Of course, this is excluding any delegation support.
DEMO

Well thanks to the comment of the #smerny and the answer of #roasted I have made it like this and it resolved my problem. Thank you for all tips and answers!
$.fn.onbind = function () {
if (!ajaxGateway)
$.fn.onbind = $.fn.on;
else
$.fn.onbind = $.fn.bind;
};
And now everything works as I wanted. Here's example.
$(window).onbind('resize', function () {
if ($('.widget_wrap').length) widgetTop();
});

'this' not being set correct using jQuery and CoffeeScript

I am trying to write a rather simple "select all" feature, but I am getting errors with my javascript. The code is rather straight forward, so I'll just post it:
(function() {
$(function() {
var all_check_box;
all_check_box = '#tournament_league_127';
return $(all_check_box).change(function() {
return $('.leagueCheckBox').each(function() {
return this.prop("checked", true);
});
});
});
}).call(this);
This code was generated by the following CoffeeScript:
$ ->
all_check_box = '#tournament_league_127'
$(all_check_box).change ->
$('.leagueCheckBox').each ->
this.prop("checked", true)
However, when I click #tournament_league_127, I get the following error: this.prop is not a function. I'm not really sure what I'm doing wrong. Any help would be appreciated.

this refers to the element not the jQuery object so you need,
return $(this).prop("checked", true);

It should be $(this).prop ...(assuming jQuery 1.6+, before that .prop did not exist).