This question already has answers here:
jQuery - multiple $(document).ready ...?
(6 answers)
Closed 9 years ago.
I am using jquery and new to jquery. i have below the code in section as below.
<script type="text/javascript">
$(function () {
$(".lbCriterionStep3").click(function () {
//code
});
});
$(function () {
$(".lbCriterionStep4").click(function () {
//code
});
});
</script>
Is it proper to write like this? can function contain multiple $(function () ?
Thanks!
$(function() {
is actually the shortcut of calling the dom ready handler like:
$(document).ready(function() {
and hence, you need to call it once per page like:
$(function () {
$(".lbCriterionStep3").click(function () {
//code
});
$(".lbCriterionStep4").click(function () {
//code
});
});
For more information read .ready() API documentation
or you could just call other functions in your function, so that those will be reusable (u can use them somewhere else too).
use $(function(){ }); ready event handler only once and write all other event handler function for html element inside that however your way wil not result in any error but make code huge.
So, use like this
<script type="text/javascript">
$(function () {
$(".lbCriterionStep3").click(function () {
//code
});
$(".lbCriterionStep4").click(function () {
//code
});
});
</script>
Related
I have a .NET web control that includes some JavaScript structured something like this:
<script type="text/javascript">
function doSomethingImportant() {
// Do something important here...
}
$(function () {
// A bunch of JavaScript/jQuery code here...
});
</script>
The doSomethingImportant() function is placed outside of my $(function() { ... }) block so it can be called from JavaScript on the page that hosts my web control.
But I would like this function to be able to access some code within the $(function() { ... }) block. Is this possible? Is there a better way to structure this?
If you add a code on window object in the jquery function you can call it from the outer function.
e.g.
<script type="text/javascript">
function doSomethingImportant() {
// Do something important here...
window.myfunc();
}
$(function () {
// A bunch of JavaScript/jQuery code here...
window.myfunc = function(){
}
});
</script>
below methods are working fine when I have them in razor or partial views. after them to JS from these are not at all. JS file is loading and other regular javascript methods working fine. What could be the wrong?
$('.phonelocation').on('change', function () {
$("#HdnCommunicationLocation").val(this.value); // or $(this).val()
});
$('.phonetype').on('change', function () {
$("#HdnCommunicationType").val(this.value); // or $(this).val()
$('.phoneCountry').trigger('change');
});
$('.phoneCountry').change(function () {
..
}
You must add the js after the document is loaded.
$(document).ready(function () {
$(document).on('change', '.phonelocation', function () {
$("#HdnCommunicationLocation").val(this.value); // or $(this).val()
});
$(document).on('change', '.phonetype', function () {
$("#HdnCommunicationType").val(this.value); // or $(this).val()
$('.phoneCountry').trigger('change');
});
$(document).on('change', '.phoneCountry', function () {
..
}
});
update: try adding the events to the document that way no matter when the elwments are added the events will still work
Good Day, this maybe a silly question :) how can I pass a parameter to an external javascript function using .on ?
view:
<script>
var attachedPo = 0;
$this.ready(function(){
$('.chckboxPo').on('ifChecked', addPoToBill(attachedPo));
$('.chckboxPo').on('ifUnchecked', removePoToBill(attachedPo ));
});
</script>
external script:
function addPoToBill(attachedPo){
attachedPo++;
}
function removePoToBill(attachedPo){
attachedPo--;
}
but Im getting an error! thanks for guiding :)
You need to wrap your handlers in anonymous functions:
$('.chckboxPo')
.on('ifChecked', function() {
addPoToBill(attachedPo);
})
.on('ifUnchecked', function() {
removePoToBill(attachedPo);
});
You can also chain the calls to on as they are being attached to the same element.
If your intention is to count how many boxes are checked, via passing variable indirectly to functions try using an object instead like this:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/pBkhX/
var attachedPo = {
count: 0
};
$(function () {
$('.chckboxPo')
.on('change', function () {
if ($(this).is(':checked')) {
addPoToBill(attachedPo);
} else {
removePoToBill(attachedPo);
}
$("#output").prepend("" + attachedPo.count + "<br/>");
});
});
function addPoToBill(attachedPo) {
attachedPo.count++;
}
function removePoToBill(attachedPo) {
attachedPo.count--;
}
If it is not doing anything else you can simplify the whole thing to count checked checkboxes:
$(function () {
var attachedPo = 0;
$('.chckboxPo')
.on('change', function () {
attachedPo = $(".chckboxPo:checked").length;
});
});
"DOM Ready" events:
you also needed to wrap it in a ready handler like this instead of what you have now:
$(function(){
...
});
*Note: $(function(){YOUR CODE HERE}); is just a shortcut for $(document).ready(function(){YOUR CODE HERE});
You can also do the "safer version" (that ensures a locally scoped $) like this:
jQuery(function($){
...
});
This works because jQuery passes a reference to itself through as the first parameter when your "on load" anonymous function is called.
There are other variations to avoid conflicts with other libraries (not very common as most modern libs know to leave $ to jQuery nowadays). Just look up jQuery.noConflict to find out more.
I want to call a function with a namespace based on its name.
Perhaps some background: What I want is, dynamically bind pages via $.mobile.loadPage(inStrUrl, { showLoadMsg: false }); and then, based on the current page, invoke a function within a loaded page. For example: each page has a showFilter function, the Event is attached to a main.html - page which should call the matching function in the current page.
I also tried some solutions, with jquery too, but nothing works for me.
This is my function code:
function namespace() { }
namespace.showFilter = function () {
alert("Test");
}
And want to "invoke" or "call" it via its name.
This is what i tried at least.
$(document).ready(function() {
var fn = window["namespace.showFilter"];
fn();
});
I get error TypeError: fn is not a function
Here is a fiddle http://jsfiddle.net/xBCes/1/
You can call it in the following way:
$(document).ready(function() {
window["namespace"]["showFilter"]();
});
or
$(document).ready(function() {
window["namespace"].showFilter();
});
or
$(document).ready(function() {
window.namespace.showFilter();
});
I found that I had to manually set it to window.
window.namespace = function() { }
window.namespace.showFilter = function () {
alert("Test");
};
$(document).ready(function() {
var fn = window["namespace"]["showFilter"];
fn();
});
http://jsfiddle.net/xBCes/4/
Like this:
$(function() {
window.namespace.showFilter();
});
P.S. I shortened the $(document).ready(...)
function namespace() {}
namespace.showFilter = function () {
alert("Test");
}
$(document).ready(function() {
var fn = namespace.showFilter();
fn();
});
http://jsfiddle.net/xBCes/3/
I have a function that passes through an object in its parameter, and then does something with that object.
function theFunction (theButton) {
theButton.addClass('inactive');
}
$('.button').click(function () {
theFunction($(this));
return false;
});
The problem is that it doesn't apply that class to the button. What am I missing here?
Here's a JS Fiddle with the code in.
Your code works well. You just forgot to include jquery to the fiddle. Here is the corrected one: http://jsfiddle.net/hNYmd/3/
You were not loading any jQuery
I have updated your fiddle
SEE
http://jsfiddle.net/hNYmd/4/
update your code also
$(document).ready(function(){
$('.button').click(function () {
theFunction($(this));
return false;
});
});
you should put your code on dom ready like this ,FIDDLE
function theFunction (theButton) {
theButton.addClass('inactive');
}
$(function(){
$('.button').click(function () {
theFunction($(this));
return false;
})
})