I'm going to forbid a second click on Google +1 button.
<g:plusone callback='click_callback' href="myurl.com"></g:plusone>
My click_callback function is:
function click_callback(b) {
if(b.state == "on") {
$.ajax({
type: "POST",
url: "gp1process.php",
data: "id=" + id,
cache: false,
success: function(a) {
$("#Hint").html(a);
remove(id);
click_refresh()
}
})
}
Can I use one() method of jQuery?
Since I am not actually posting to an ajax request I placed the $(this).attr("disabled", "disabled") before the ajax call but you will want it in your success function.
What this will do is add the disabled="disabled" attribute to your button after you click it. I think that is what you were looking for.
$(document).ready(function() {
$('button').click(click_callback);
});
function click_callback(b) {
id = $(this).attr('id');
if (!$(this).attr("disabled")) {
//the line below should be in your success function
//i placed it here so you can see the feature work
//since i am not really running the ajax
$(this).attr("disabled", "disabled")
$.ajax({
type: "POST",
url: "gp1process.php",
data: "id=" + id,
cache: false,
success: function(a) {
$(this).attr("disabled", "disabled")
$("#Hint").html(a);
remove(id);
click_refresh()
}
})
} else {
//the button is diabled do something else
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<g:plusone callback='click_callback' href="myurl.com"></g:plusone>
<button id="theID">+1</button>
<div id="hint"></div>
Related
Hi I have the following html code:
<li class="grey">
<div class="row">
<button id="test" style="width:50%;" class="btn btn-blue-white cartBtn">Add to Cart</button>
</div>
<div class="row">
Go To Checkout
</div>
</li>
When I load the page, I hide the checkout link button until the user clicks "add to cart". After they click add to cart my javascript looks like this:
$('.cartBtn').click(function () {
//do stuff for preprocessing
var url = "../Store/AddToCart";
$.ajax({
type: "GET",
url: url,
data: {
//add data
},
dataType: "json",
success: function (data) {
if (data.success == true) {
$(this).closest('li').find('.checkoutLink').show();
}
}
});
});
the link never shows back up. I have also tried using
$(this).parent().parent().find('.checkoutLink').show()
as well and had no luck. How do i use jquery to get this anchor tag and make it visible.
The problem is this, when called from within the success function it no longer refers to the outer this. Create a variable outside of Ajax that refers to the original this.
$('.cartBtn').click(function () {
var $this = $(this);
//do stuff for preprocessing
var url = "../Store/AddToCart";
$.ajax({
type: "GET",
url: url,
data: {
//add data
},
dataType: "json",
success: function (data) {
if (data.success == true) {
$this.closest('li').find('.checkoutLink').show();
}
}
});
});
I have an AJAX function that loads data from the database using a simple select * ... to a div. the function works fine without submit, but when I use a form, it doesn't work and the #itemContainer is empty, Am I missing something? I even tried :
$(document).ready(function() {
$("#myForm").submit(function() {
but didn't work also
My code :
<script id="source" language="javascript" type="text/javascript">
$("#myForm").submit(function() {
$.ajax({
url: 'models/fetchUsers.php', //the script to call to get data
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
$.each($(data), function(key, value) {
$('#itemContainer').append(value.user_id);
});
}
});
});
</script>
You didn't cancel form submission event.
Add preventDefault() in your submit
Like this
$("#myForm").submit(function(event) {
$.ajax({
url: 'models/fetchUsers.php', //the script to call to get data
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
$.each($(data), function(key, value) {
$('#itemContainer').append(value.user_id);
});
}
});
event.preventDefault();
});
Update:
event.preventDefault() is depricated.
try to use return false;
Like this
$("#myForm").submit(function(event) {
$.ajax({
url: 'models/fetchUsers.php', //the script to call to get data
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
$.each($(data), function(key, value) {
$('#itemContainer').append(value.user_id);
});
}
});
return false;
});
It's because page will be reloaded on form submission.
Handle the submit event and add return false.
<script id="source" language="javascript" type="text/javascript">
$("#myForm").submit(function() {
submitForm();
return false;
});
function submitForm() {
$.ajax({
url: 'models/fetchUsers.php', //the script to call to get data
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
$.each($(data), function(key, value) {
$('#itemContainer').append(value.user_id);
});
}
});
};
</script>
I m trying to create a link that when clicked won't redirect but will perform an action and then refresh the page using jquery.
Click Me
<Span id="updateMe">1</span>
Jquery
$('#btnClick').click(function(e){
url = $(this).attr('href');
$.ajax({
url: url,
success: function(){
alert("succes alert 1 worked");
}
});
$.ajax({
url: "another_url.php",
success: function(data){
$("#updateMe").html(data);
}
});
javascript:window.location.reload();
});
Do these:
Add e.preventDefault(); to stop reload.
Move reload() to the success callback.
Get rid of javascript:. You are already inside it.
Corrected Code:
$('#btnClick').click(function(e) {
e.preventDefault();
url = $(this).attr('href');
$.ajax({
url: url,
success: function() {
alert("succes alert 1 worked");
window.location.reload();
}
});
$.ajax({
url: "another_url.php",
success: function(data) {
$("#updateMe").html(data);
window.location.reload();
}
});
});
I'm working on a website and want to display or hide a div-tag depending on a parameter value I can find in an API response.
The link to the API information I need is https://api.hitbox.tv/media/status/masta where "masta" is replaced by my channel-name. The response looks like this: {"media_is_live":"0","media_views":"2"}
I prefer to only use pure javascript, but tried the code below using AJAX but didn't work. I'm not familiar with javascript, jQuery and AJAX so maybe I did some wrong code writing as well. Any suggestions?:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
type: "GET",
dataType: "json",
url: "https://api.hitbox.tv/media/status/masta",
data: "media_is_live",
success: function(data){
if(data == "0") {
document.getElementById("player").style.visibility = "hidden";
}
else {
document.getElementById("player").style.visibility = "visible";
}
}
});
});
</script>
<div id="player">[LIVESTREAM-PLAYER]</div>
Your ajax call should look like this.
The media_is_live is in the result, not in your query.
$.ajax({
type: "GET",
dataType: "json",
url: "https://api.hitbox.tv/media/status/masta",
success: function(data){
if(data.media_is_live == "0") {
//Your code here
}
else {
//Your code here
}
}
});
Try:
$(document).ready(function() {
$.ajax({
type: "GET",
dataType: "json",
url: "https://api.hitbox.tv/media/status/masta",
success: function(data){
if(data.media_is_live === "0") {
document.getElementById("player").style.visibility = "hidden";
}
else {
document.getElementById("player").style.visibility = "visible";
}
}
});
});
I have this code
$('#postinput').on('keyup',function(){
var txt=$(this).val();
$.ajax({
type: "POST",
url: "action.php",
data: 'txt='+txt,
cache: false,
context:this,
success: function(html)
{
alert(html);
}
});
});
$('#postinput2').on('keyup',function(){
var txt2=$(this).val();
$.ajax({
type: "POST",
url: "action.php",
data: 'txt2='+txt2,
cache: false,
context:this,
success: function(html)
{
alert(html);
}
});
});
Suppose user clicked on #postinput and it takes 30 seconds to process.If in the meantime user clicks on #postinput2 . I want to give him an alert "Still Processing Your Previous request" . Is there a way i can check if some ajax is still in processing?
Suppose I have lot of ajax running on the page. Is there a method to know if even a single one is in processing?
You can set a variable to true or false depending on when an AJAX call starts, example:
var ajaxInProgress = false;
$('#postinput2').on('keyup',function(){
var txt2=$(this).val();
ajaxInProgress = true;
$.ajax({
..
..
success: function(html) {
ajaxInProgress = false;
Now check it if you need to before a call:
if (ajaxInProgress)
alert("AJAX in progress!");
Or, use global AJAX events to set the variable
$( document ).ajaxStart(function() {
ajaxInProgress = true;
});
$( document ).ajaxStop(function() {
ajaxInProgress = false;
});