So I've been trying to get a button to work on my phone (Android) running Firefox. I've tried changing from the onClick to on('click touchstart' that was recommended on other posts here without success. I also added cursor: pointer to my css file for the button. Not sure what else to do. Maybe something to do with hover?
I'm using jquery 1.12.0
$(".add-to-cart").on('click touchstart',function(event){
event.preventDefault();
var name = $(this).attr("data-name");
var price = Number($(this).attr("data-price"));
RWC_shoppingCart.addItem(name, price, 1);
RWC_shoppingCart.displayCart();
RWC_shoppingCart.saveCart();
});
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
<h2>$30</h2>
</div>
<div class="project-name">
Short Candles
</div>
<br>
<button class="add-to-cart btn btn-default btn-xl" href="#" data-name="Short Candle" data-price="30.00">Add To Cart</button>
<!--
<form paypal stuff
</form>
-->
</div>
</div>
Related
So I am using the following jQuery snippet to make a loading animation run (created in CSS) when a file is selected in an input field and then an upload button is clicked.
The form has 3 input fields with 3 upload buttons and is quite flexible. For e.g if a user selects a file in the first input field but clicks on the second upload button the loading animation should run around the first input field only. Another example is that if a user selects a file in the first input field and the second input field but clicks on the third upload button then the loading animation should run in the first and second input fields only.
$(document).ready(function() {
$(document).on("click", ".UploadBtn", function() {
$(".p").each(function(file) {
if ($(this).val()) {
$(this).next(".loader").show();
$(this).next(".loader").find(".spinner").show();
$(this).next(".loader").find(".UploadBtn").hide();
}
});
});
});
The code fails to run in the IF statement function. If i change the code (mentioned below) it will make the animation run but it ends up making the loading animation run in all 3 selection fields even if only one file was selected. This is not what is required but does tell me that the part of the code which has the IF statement breaks down in the code above;
$(document).ready(function() {
$(document).on("click", ".UploadBtn", function() {
$(".p").each(function(file) {
if ($(this).val()) {
$(".loader").show();
$(".spinner").show();
$(".UploadBtn").hide();
}
})
});
});
I am a beginner level coder and I have spent hours trying to fix this issue but nothing worked. Your help is greatly appreciated!
HTML snippet added as per recommendation
(It also has some Python code which was done by my friend) form.photo1, 2 and 3 have class = "p" ;
<div class="mtl mbl">
{{ form.photo1 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">
<div class="mtl mbl">
{{ form.photo2 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">
<div class="mtl mbl">
{{ form.photo3 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">
I am using the following snippet which allows a person to upload up to 3 files with a single upload button. While the file is being uploaded an animation runs in place of the upload button.
My requirement is that I need to prevent the user from clicking on any of the input field buttons while the file is getting uploaded. I do not wan't to use the hide() function for this. Is there a way in jQuery to stop the input field buttons from getting clicked on while the file is getting uploaded/the loading animation is running.
Recently started to use jQuery so still a beginner and hence would love to use a simple solution for this. Thanks!
<script type="text/javascript">
$(document).ready(function() {
$(document).on("click", ".UploadBtn", function(event) {
$(".p").each(function(file) {
if ($(this).val()) {
$(".loader").show();
$(".spinner").show();
$(".UploadBtn").hide();
}
})
});
});
</script>
My HTML code is below. The "p" class is used for {{ form.photo1 }}, {{ form.photo2 }} & {{ form.photo3 }} ;
<div class="mtl mbl">
{{ form.photo1 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">
<div class="mtl mbl">
{{ form.photo2 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">
<div class="mtl mbl">
{{ form.photo3 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">
When the upload button, which the red button is pointing at, is
clicked an animation starts to run in its place while the file is
getting uploaded. During this I want to prevent anyone from clicking
on the choose file (), the blue arrow is pointing at it.
Try using prop to disable upload buttons
$(document).ready(function() {
$(document).on("click", ".UploadBtn", function(event) {
$(".p").each(function(file) {
if ($(this).val()) {
$(".loader").show();
$(".spinner").show();
$(".UploadBtn").prop("disabled", "true");
}
})
});
});
In jQuery 1.6+ you can dynamically add the atrribute attr='disabled' or attr='readonly' to your input field until you confirm that your files are loaded:
// put this within the code that checks if the files are still loading
$(".UploadBtn").prop('disabled', true);
// within the code that checks if the files have successfully loaded, make sure to use the following
$(".UploadBtn").prop('disabled', false);
Also take a quick look at what prop does in this detailed answer.
I'm using VB.Net, MVC 5, razor and jQuery. I have a razor view that creates buttons I'm trying to disable on the user click. I generally accomplish this task using jQuery:
$('#id').prop("disabled", true);
My task is new to me in that my buttons are generated like this:
#For i As Integer = 0 To Model.hrmnValues.Count - 1
#<div class="col-md-3">
<a class="btn btn-primary btn-md" href="#" id="#Model.inventoryCategoryAttIDs(i)"
onclick="acceptChange('#Model.hrmnValues(i)',
#Model.inventoryCategoryAttIDs(i), #Model.uniqueItemID)">Accept Change</a>
</div>
Next
My onClick function is similar to this:
function acceptChange(newValue, categoryAttID, itemID) {
$('#categoryAttID').prop("disabled", true);
}
This obviously does not work, as it is looking for an id with the name of categoryAttID. I have also tried putting the categoryAttID into it's own variable like this:
var idToDisable = "#" + categoryAttID;
and then putting idToDisable into the jQuery call to disable the button, this did not work.
Given this situation how can I disable the button that is clicked?
There will be multiple buttons on this page making use of the function, the function actually performs an ajax call. The idea is to limit the user to performing one ajax call per button.
The html is rendered like this:
<div class="row">
<div class="col-md-3">
<font>First Name</font>
</div>
<div class="col-md-3">
<font>John</font>
</div>
<div class="col-md-3">
<font>No Record Found</font>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-md" href="#" id="2"
onclick="acceptChange('CHRISTOPHER', 2, 0)">Accept Change</a>
</div>
</div>
<div class="row">
<div class="col-md-3">
<font>Last Name</font>
</div>
<div class="col-md-3">
<font>MURRAY</font>
</div>
<div class="col-md-3">
<font>No Record Found</font>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-md" href="#" id="3"
onclick="acceptChange('MURRAY', 3, 0)">Accept Change</a>
</div>
You're already passing the button's id to your function as the second argument -
acceptChange('#Model.hrmnValues(i)',#Model.inventoryCategoryAttIDs(i), #Model.uniqueItemID)
So you can change your function to -
function acceptChange(newValue, categoryAttID, itemID) {
$('#' + categoryAttID).prop("disabled", true);
}
Also, there isn't a disabled property available for links (see - Mozilla Developer Network) if you want to disable your elements on click try using a button instead.
Since you appear to be using bootstrap after changing your links to buttons you might want to change your function to -
function acceptChange(newValue, categoryAttID, itemID) {
$('#' + categoryAttID).prop("disabled", true);
$('#' + categoryAttID).addClass("disabled");
}
I'm trying to refresh one ID of my page within the click of a button.
I've tried several ways but none of them work. Although I've created the button to refresh it, it keep the submission of the page (triggering the validation event). So, each time I click that button, he tries to submit the form, validation the inputs instead refresh that div.
Here's my code right now:
function refreshCaptcha() {
$("#captcha_code").attr('src','./inc/captcha.php');
}
<div class="form-group">
<div class="col-xs-4">
<button class="btn btn-sm btn-warning" id="refreshcap" name="refreshcap" onclick="refreshCaptcha();">
<i class="fa fa-refresh push-5-r"></i>
<img id="captcha_code" src="inc/captcha.php" />
</button>
</div>
<div class="col-xs-8">
<div class="form-material floating">
<input class="form-control" type="text" id="cap" name="cap">
<label for="cap">Captcha</label>
</div>
</div>
</div>
Can someone help me trying to get what's wrong?
Thanks.
Assuming that your button is inside the form,
add type in your button
which will stop button from submitting your form
<button type="button" class="btn btn-sm btn-warning" id="refreshcap" name="refreshcap" onclick="refreshCaptcha();">
<i class="fa fa-refresh push-5-r"></i>
<img id="captcha_code" src="inc/captcha.php" />
</button>
other than that you can use javascript return false; in your function end
with js
<script>
$(document).ready(function() {
$("#refreshcap").on("click",function(event){
event.preventDefault();
$("#captcha_code").attr('src','./inc/captcha.php');
});
});
</script>
with this you wont need to call on click event this will do it for you, no matter type is button or submit
I think your JS function should return false; in order to not submit the form.
<script>
function refreshCaptcha() {
$("#captcha_code").attr('src','./inc/captcha.php');
return false;
}
</script>
On my SP 2013 Master Page, I want to click a button and change the path to the style sheets. Not sure if it's a path issue or what... but it's not changing the style sheets.
My style sheets are stored in the Style Library/css folder.
alert($(this).attr('id') + ' clicked'); tells me that the click function are working per button.
JavaScript on Master page:
<script type="text/javascript">
$(document).ready(function(){
console.log("working...");
$('#style1').click(function (){
//alert($(this).attr('id') + ' clicked');
$('link[href="http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style2"]').attr('href',"http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style1");
});
$('#style2').click(function (){
//alert($(this).attr('id') + ' clicked');
$('link[href="http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style1"]').attr('href',"http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style2");
});
});
</script>
HTML on Master page:
<div class="row">
<div class="col-md-1 col-md-offset-5">
<button type="button" id="style1" class="btn btn-primary" data-toggle="button">
<span class="ui-button-text">Style 1</span>
</button>
</div>
<div class="col-md-1 ">
<button type="button" id="style2" class="btn btn-primary" data-toggle="button">
<span class="ui-button-text">Style 2</span>
</button>
</div>
</div>
Thanks
Try this fiddle. Use an ID on the link tag but you may need to tweak it because SP is generating a client ID from #styleSheet to #ctl00_styleSheet on my VM. You can see in the console that the href of the link is changing with the clicks.