I am trying to use a set of textboxes to define some data within my JavaScript file. So in a textbox I enter a Team name "Team name", and the javascript file uses this textbox to store the name of a team in order to print a set of tournament brackets.
The javascript file is included in my <head> so it loads before I have actually entered the data in the text boxes. I have this code for a button in the html like so:
script(type='text/javascript')
$('#buttontest').click(function() {
$('div.bracket').show();
$('div.teamList').hide();
});
So when the button is pressed, the textboxes are all hidden, and the brackets with the user-defined team names should appear....here is the code at the end of my javascript file:
$(function() {
$('#singleElim8').bracket({
init: singleElim8Data
})
$('.bracket').hide();
});
So within div.bracket I have the class #singleElim8 which the javascript uses. But how would I change it so that this javascript to initialize the brackets only runs once the button has been clicked? That way the brackets render AFTER the textboxes have been filled in. Any help appreciated.
I am trying to use a set of textboxes to define some data within my JavaScript file. So in a textbox I enter a Team name "Team name", and the javascript file uses this textbox to store the name of a team in order to print a set of tournament brackets.
The javascript file is included in my <head> so it loads before I have actually entered the data in the text boxes. I have this code for a button in the html like so:
script(type='text/javascript')
$('#buttontest').click(function() {
$('div.bracket').show();
$('div.teamList').hide();
});
So when the button is pressed, the textboxes are all hidden, and the brackets with the user-defined team names should appear....here is the code at the end of my javascript file:
$(function() {
$('#singleElim8').bracket({
init: singleElim8Data
})
$('.bracket').hide();
});
So within div.bracket I have the class #singleElim8 which the javascript uses. But how would I change it so that this javascript to initialize the brackets only runs once the button has been clicked? That way the brackets render AFTER the textboxes have been filled in. Any help appreciated.
Share Improve this question asked Dec 21, 2012 at 16:29 germainelolgermainelol 3,33115 gold badges48 silver badges83 bronze badges 1- 1 You can wrap it in a function and call that function inside the click event.. Or move that code inside the click event – wirey00 Commented Dec 21, 2012 at 16:31
2 Answers
Reset to default 10Just use the getScript method of jQuery
It's very easy to use
$( '#buttontest' ).on( 'click', function() {
$.getScript( 'url to your js file', function( data, textStatus, jqxhr ) {
// do some stuff after script is loaded
} );
} );
When you pass a function as the parameter to jQuery it will execute that function during document.ready(). It allows your page to load all of the scripts before executing them.
$(function() {
$('#buttontest').click(function() {
$('div.bracket').show();
$('div.teamList').hide();
});
$('#singleElim8').bracket({
init: singleElim8Data
})
$('.bracket').hide();
});