I want to databind a gridview on a button click event. so that i am going to add a jQuery function for databind. but that function should be called inside a JavaScript function.
like this,
function btnclick() {
//code
//here i want to call the databind function
}
$(function () {
//code
}
this is just my assumption. i don't know how to combine jQuery function and JavaScript function. any suggestion?
You can simply call the function as you call in javascript function. its quiet simple.
$(document).ready(function() {
$("#btn").click(function() {
databind();
});
});
function databind(){
//your code
}
you can bind the jquery event or use jquery inside a javascript function like this:
function btnClick(){
$("yourelement").bind("eventyouchoose",function(e){
//task to do in when the event is called
});
//perform actions using jquery in the similar way
}
Hope this helps
jQuery is simply a library written in JavaScript, so you can freely call JS/jQuery methods in any scope where they are loaded.
I'm not sure what you meant with your code sample, but a common way to perform an action on click would be with the jQuery click() method like so:
function databind() {
// some kinda magic
}
// pass your previously defined databind function as the callback
$('some-selector').click(databind);
You need to specify a selector to target the clickable button.
Related
I am just wondering what I need to do to pass the clickAssistanceToggle function to my jQuery click event, I have taken a look at some of the answers on here and can't find a simple solution to this.
So far I have this code:
function clickAssistanceToggle() {
$('.car-hub-header-help, #assistance-overlay, .assistance-close-btn').click(function(){
$('#new-car-hub, #new-car-offer').toggleClass('assistance-active');
$('#pulman-assistance').toggleClass('pulman-assistance-active').css("top", fixedPositionCalculator);
$('#assistance-overlay').toggleClass('assistance-overlay-active');
$('#new-car').toggleClass('assistance-active-body');
$('#new-car-offer-cta').toggleClass('assistance-active-cta');
});
};
$('.new-car-general-enquiry-btn').click(function(){
clickAssistanceToggle();
});
As you can see the function wont run like this because it hasn't been passed as a parameter, I have tried passing the function like so:
$('.new-car-general-enquiry-btn').click(function(clickAssistanceToggle){
clickAssistanceToggle();
});
However this does not seem to work, any idea how I can pass that function to the click event? Thanks
You can call like this,
$('.new-car-general-enquiry-btn').click(clickAssistanceToggle);
Or
$('.new-car-general-enquiry-btn').click(function(){
clickAssistanceToggle();
});
Also there is a chance that, .new-car-general-enquiry-btn element is not being rendered at the time of binding the event. If so you need to wrap the code inside dom ready event.
$(document).ready(function() {
$('.new-car-general-enquiry-btn').click(function() {
clickAssistanceToggle();
});
});
Instead of
$('.new-car-general-enquiry-btn').click(function(clickAssistanceToggle){
clickAssistanceToggle();
});
You need to use
$('.new-car-general-enquiry-btn').click(clickAssistanceToggle);
Basically you need to pass the function to be executed when a click is performed on a .new-car-general-enquiry-btn element.
This works:
$(".logo").click(doSomething)
This does not:
$('.popular').on '.logo', 'click', doSomething
I need the latter because some .logo elements are loaded using AJAX after the page is done loading.
What can I do to fix it?
You can write
$('.popular').on('click','.logo', function() {
// do something
topServiceClicked();});
The problem I am encountering is that I just want to access the alert command inside window onload. The purpose of this code is that I want to wrap 5 different diagrams in methods like (table1(), table2(), table3(), table4(), table5()), then I wish to use JQuery event to enable the user too select which diagram they want to see once a time.
Below is a JavaScript file, keep in mind that the alert command is not accessible..
(function table4(){
$(window).on("load", function() {
alert('Test');
});
}());
$(window).load(function(){}) is only called if it's bound before the event.
Try to use the $(document).ready function:
(function table4(){
$(document).ready(function() {
alert('Test');
});
}())
http://jsfiddle.net/z5jy7pu1/
Dont "hide" in table4 function
$(document).ready(function() {
alert('Test');
}
I have some code called on jQuery document.ready() which is used in multiple HTML files. Now the difference is each of these HTMLs uses a different div id.
I know one option is to just check for hardcode div ids inside $(document).ready() . But I wanted to write a generic code which would take the div Ids based on the currrent/calling HTML page?
So is there any way or workaround for passing parameter to jQuery ready() ?
$(document).ready() just wants a function as an argument so you can write a function that takes your ID as an argument and returns a function for $(document).ready(). For example, instead of this:
$(document).ready(function() {
$('#some_id').click(/*...*/);
});
you could do this:
function make_ready(id) {
return function() {
$('#' + id).click(/*...*/);
};
}
$(document).ready(make_ready('some_id'));
Then you could put your make_ready in some common location and use it to build the functions for your $(document).ready() calls.
document ready just takes in an handler function as a parameter.
You can still define a generic code in you document ready function, by storing the current div id for each html.
<input type="hidden" id="current_div" value="div1" />
$(document).ready(function() {
var div_id = $('#current_div').val();
// generic code
});
I have 2 questions
I am using the hashchange plugin .... so I want to know would a function as below, be called everytime a hashchange occurs... because I have something like that in my code and the code function apparently doesnt seems to be called
$(document).ready(function()
{
// function here
});
On the other have if I remove the hashchange as in If i make http://abc.com/a.htm#http://abc.com/b.htm as http://abc.com/b.htm
the code works fine
the problem is the structure of my pages is a bit different .... here is the fiddle with the page structure that explains on a higher level what I am trying to achieve jsfiddle.net/vBKWd/9 ... on hash change jus the div c on my page 1 gets replaced by page 2 and vice versa .... and the js function that I have shown below is getting called only once and not after hashchange
Or is therre any way I can bind the function with the div so that whenever the div is replace the function get called?
No, a ready handler is only called on document ready, not on hash change. You should use the hashchange event for that, instead:
$(window).hashchange(function () {
// function here
});
Sample: http://jsfiddle.net/vBKWd/2/
In document ready wirte code below
$(window).bind('hashchange', function () {
//code here
});
use live in this case
$(document).ready(function()
{
$(selector).live(hashchange, function(){
// your code goes here
});
});