Using Document Ready on Click Event - javascript

I am still new to javascript.
I have an application that has two buttons on the page. One is a cpu_vs_player button that displays one game and the other is a player_vs_player button that displays a different game. The problem is that all the code is located in one application.js file. There is no need to load the player_vs_player on $(document).ready(function(){}); if I were to play cpu_vs_player.
Any ideas on how I can get them to load only if I chose that game? (I am only using one route with all the information being hidden / shown based on the click).

The document.ready is nothing more than the moment after the page has rendered and the document needs to be populated with event listeners. Frankly there are multiple way of skinning this cat.
You can either do the jQuery way where you keep javascript and HTML divided:
<button id="button1">cpu_vs_player</button>
<button id="button2">player_vs_player</button>
And for JavaScript:
Assuming you have a function for each gameplay:
function cpu_vs_player() {
// start the game
}
function player_vs_player() {
// need another player
}
Add event listeners the jQuery way:
$(document).ready(function() {
$("#button1").click(function() {
cpu_vs_player();
});
$("#button1").click(function() {
player_vs_player();
});
});
OR you could use the method #Techstone shows you, though you could do it more direct. It all works though.
<button onclick="javascript:cpu_vs_player();">cpu_vs_player</button>
<button onclick="javascript:player_vs_player();">player_vs_player</button>
Adding another option you can apply
In Javascript:
var Main = {
cpu_vs_player: function() {
alert("start cpu_vs_player");
},
player_vs_player: function() {
alert("start player_vs_player");
}
}
In your HTML:
<button onclick="javascript:Main.cpu_vs_player();">cpu_vs_player</button>
<button onclick="javascript:Main.player_vs_player();">player_vs_player</button>
And yes, there is more ... ;-)

image that your two button and js definition like below
function LetsRock(Playmate) {
....
}
<input type='button' value='cpu_vs_player' id='cpu_vs_player' onclick='javascript:LetsRock(this.id);' />
<input type='button' value='player_vs_player' id='player_vs_player' onclick='javascript:LetsRock(this.id);' />

Try to use the function with parameters (i.e. 0 to cpu v/s player, 1 to player v/s player), and send from the menu page to the $(document).ready(function(){});

Related

How to pause Jssor in another class

I have a slide show program called Jssor which also uses jQuery. I have links inside the slide show which invoke Fancybox3 to display a text box describing that slide. I need the slide show to pause while the focus is on Fancybox. Jssor has a method called $Pause and $Play and I can get it to work (outside of the jQuery class) by using buttons (manually clicking.) The main issue is that I need it to work without user interaction. My plan is to put the code into Fancybox.js so it will pause/play the slide show automatically. I know almost nothing about JavaScript so please keep it simple.
I left out (below) a bunch of code thinking I would make this simple and hoping it’s not needed for this question. This code does work, I just need to know how to make/invoke the last line (using JS not HTML) without user input.
<script type="text/javascript">
jQuery(document).ready(function ($) {
// A bunch of code
//...........................
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
function Play() {
jssor_1_slider.$Play();
};
function Pause() {
jssor_1_slider.$Pause();
};
$("#playButton").click(Play);
$("#pauseButton").click(Pause);
};
</script>
// HTML
<input id="playButton" type="button" value="Play" />
<input id="pauseButton" type="button" value="Pause" />
Callbacks are designed for purposes like this. Example:
$('[data-fancybox="images"]').fancybox({
onInit : function() {
jssor_1_slider.$Pause();
},
afterClose : function() {
jssor_1_slider.$Play();
}
});
Obviously, this code should go after you have created jssor_1_slider variable.

How to set ButtonState Loading in HTML5 CSHTML Page

Here is my HTML entry that fires the GenerateBill() Javascript at the moment :
<a class="btn btn-primary" id="loading-example-btn" data-loading-text="Loading..." onclick="GenerateBill()">Generate Bill</a>
Here is the GenerateBill() method, this all works fine, all I want to do is add the button state feedback
function GenerateBill() {
var url = '/PremiseProvider/GenerateBill';
var data = {
StartDate: $('#from').val(),
EndDate: $('#to').val(),
premiseProviderId: $('#PremiseProviderId').val()
};
$("body").load(url, data);
};
Here is a code snippet from the Bootstrap 3 official Site on how to implement the button state feedback:
<script>
$('#loading-example-btn').click(function () {
var btn = $(this)
btn.button('loading')
$.ajax(...).always(function () {
btn.button('reset')
});
});
</script>
My Question is how can I implement in my GenerateBill script, the bootstrap example uses an Ajax call, can I make it work without making too many changes to what I have?
If I might make a few suggestions that will both fix your issue and improve your code.
Instead of using an onclick event, add an event listener in your javascript, and call the function from there.
Add the .button('loading') call to that same event listener.
Don't leave off the href for an <a> tag. It will cause some browsers to not show the pointer correctly on hover.
Your link will look as follows:
Generate Bill
Leaving your GenerateBill() logic alone, the listener you need to add to your javascript:
$('#loading-example-btn').click(function () {
$(this).button('loading');
GenerateBill();
});
A working example of this code (with GenerateBill() simplified) is available here: http://www.bootply.com/VTSNA1XMcm

YUI jQuery calling function on page load

is there any one who is familiar with YUI jQuery frame work ?? i need very little help
please take the look at below code
It works perfect but the inputClick() is called when i press any button left or right but i dont want button, i want to call function when page loads means automatically
please help me some one.
in short I want to call inputclick(e){......} automatically when page load
i heard about domready function which is same like JQuery's document.ready function
so how should i call inputClick(e)??
please take look at this ::
<section id="btns">
<p>
<input type="button" value="Left">
<input type="button" value="Right">
</p>
</selection>
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<script>
document.querySelector('#btns').addEventListener("click", inputClick, false);
function inputClick(e){
var a = e.target.value;
window.alert(a); // displays Left or Right button value
}
</script>
i tried inputClick(Left); and inputClick(Roght); but do nothing :(
What i need is when page load ::
rnd = random(2);
switch(rnd)
case 1:
inputClick(Left);
case 2:
inputClick(Right);
i DONT want button or eventlistener
I hope this helps. http://jsfiddle.net/Rh7Ju/1/
Know that anything in the YUI().use() will execute when the DOM is ready.
YUI().use('node', 'event', function (Y) {
function inputClick(button_value) {
alert(button_value);
}
// called when the buttons are clicked
Y.one('#btns').on('click', function (e) {
inputClick(e.target.get('value'));
}, 'input');
inputClick('Right'); // called when the dom is ready.
});
After I looked at your question again, is seems like you are trying to randomly select a button and alert its value. So, maybe this is more what you're looking for?
http://jsfiddle.net/Rh7Ju/2/
Anyway, happy coding.

Making array for click function in javascript

in my web i have many button that javascript for managing click function. Every button click has class for initial each of them. here the code
<script type="text/javascript">
$(document).ready(function(){
$(".data1").click(function(){
$("#line").val("1");
$("#pkategori").val("-Kategori Produk-");
$("#pname").val("-Nama Produk-");
$("#pnumber").val("");
$("#seri").val("");
$("#quantity").val("");
$("#ok").hide();
$("#cancel").hide();
$("#tnposisi").hide();
$("#nposisi").hide();
$("#tketp").hide();
$("#ketp").hide();
$("#tpjumlah").hide();
$("#pjumlah").hide();
$("#editsave").hide();
$("#editcancel").hide();
$("#input").hide();
$("#loading").hide();
$("#status").html("");
});
});
for my current web, i make this one by one until $(".data160").click(function(). it will be long code and not effective. My problem, How tomake this a simple code?
Give all the buttons the same class, and use data attributes for the different features.
<button class="data" data-line="1" data-kategory="-Kategori Produk-" data-name="-Nama Produk-">
Then write:
$(".data").click(function(){
$("#line").val($(this).data("line"));
$("#pkategori").val($(this).data("kategori"));
$("#pname").val($(this).data("name"));
$("#pnumber,#seri,#quantity").val("");
$("#ok,#cancel,#tnposisi,#nposisi,#tketp,#ketp,#tpjumlah,#pjumlah,#editsave,#editcancel,#input,#loading").hide();
$("#status").html("");
});
To handle them all at once.
separate it with several functions:
1、val and html together
2、hide together, you can create a function like this
function hideEl(el){
$('#'+el).hide();
}
var arrEls = ['pname','apple','msn'...];
$(arrEls).each(function(key,value){
hideEl(value);
});

execute code AFTER Recaptcha.reload() is finished

I have a function below which is called to reload a recaptcha image. It works, reloads the image but won't do anything after that. Basically the form is small that has this recaptcha on it so I've shrunk it and allowed for clicking to enlarge and all that. If the person presses "get another captcha" which calls reloadCAP() it checks to see if it has the class of being the larger image. if it does i need it to add that class and css back to the elements AFTER the new image has loaded but I can't seem to get it to work. Any ideas?
function reloadCAP() {
if($("#recaptcha_widget img").hasClass('largecap')) {
Recaptcha.reload();
$("#recaptcha_widget img").addClass('largecap');
$('#recaptcha_image').css('height', '62px');
} else {
Recaptcha.reload();
}
}
here's the html for this:
<div id="recaptcha_widget" class="formRow" style="display:none;">
<span class="f_label">Enter Words Below:</span>
<input type="text" class="setWidth" id="recaptcha_response_field" name="recaptcha_response_field" />
<div class="cantread">
<strong>Can't read this?</strong><br />
Get another CAPTCHA
</div>
<div id="recaptcha_image"></div> <!-- image loaded into this div -->
<div class="clear"></div>
<span class="smalltext">(click to enlarge)</span>
<br clear="all" />
</div>
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LfzMMwSAAAAADV6D04jDE6fKwrJ57dXwOEW-vY3&lang=en"></script>
$("#recaptcha_widget img").one('load',function(){
$("#recaptcha_widget img").addClass('largecap');
$('#recaptcha_image').css('height', '62px');
});
This will put a one time only listener on the load event of the image that you are reloading and then executes the folowing code.
I used .one() instead of .load() here because you don't want to attach a new listener every time you call reloadCAP()
Edit
Ok, so here's what I believe the issue is. When you call Recaptcha.reload() it is removing the <img /> and replacing it with a new one. So when we are trying to attach the event it is getting removed as the image gets removed.
What you need to do is place the class largecap on the recaptcha_image div and modify your css style to look like
.largecap img {
height: whatever;
width: whatever;
}
Not the ideal solution, but you could put the addClass code above Recaptcha.reload() and just delay it by a second or two.
Hope that helps.
It sounds like what you actually need is custom theming such that you can style the captcha/image/etc exactly as needed: https://developers.google.com/recaptcha/docs/customization
If you do want to stick to your current implementation, you can hook into Recaptcha's built in (and undocumented) callback functions prior to calling Recaptcha.create().
//Called after Recaptcha.reload() is finished loading
Recaptcha._alias_finish_reload = Recaptcha.finish_reload;
Recaptcha.finish_reload = function (challenge, b, c) {
//Call original function that creates the new img
Recaptcha._alias_finish_reload(challenge, b, c);
$("#recaptcha_widget img").toggleClass('largecap', true);
}
//Called when the initial challenge is received on page load
Recaptcha._alias_challenge_callback = Recaptcha.challenge_callback;
Recaptcha.challenge_callback= function () {
//Call original function that creates the new img
Recaptcha._alias_challenge_callback();
$("#recaptcha_widget img").toggleClass('largecap', true);
}
The reason you're even having this problem is because Recaptcha destroys and creates a new img everytime it reloads, so the styling you added manually will be lost.

Categories