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">
Related
I want to display a changed text value only if a Button has been clicked. The text value depends on an input field, and is dynamically bound to the input value of the text field with [(NgModel)]="textValue"...
I first enter some ID number into the input box and it directly changes my text. But I only want the text with the "ID-value" to change after I clicked the button, and called the new charts data with my function "getChartsData()".
This is how my html looks like:
<input [(ngModel)]="monatConst" placeholder="Demonstrator-ID">
<button class="btn btn-danger float-xl-right mt-1"
(click) = "getChartsData()"> Call HTTP Request
</button>
<br>
<div *ngIf="monatConst">Chart für Demonstrator mit ID: {{monatConst}} </div><br>
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="dataArray"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>
How can I best realize that the text with the ID field is only changed after clicking the button, and calling the new charts data? For the moment, I bound the ID variable two way with ngModel and put it directly into the text field with data binding {{..}}
I found a much simpler solution, it was pretty stupid from me ;) :
<div *ngIf="dataArray?.length>0; else noChartBlock">
Chart für Demonstrator mit ID: {{monatConst}}
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="dataArray"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>
</div>
<ng-template #noChartBlock>
<b>There is no data for Demonstrator with ID: {{monatConst}} !</b>
</ng-template>
I just packed my Text inside the ngIf selector so that it displays the text if something was found, otherwise it goes to the else template block... ;P
.html
<input [(ngModel)]="monatConst" placeholder="Demonstrator-ID">
<button class="btn btn-danger float-xl-right mt-1"
(click) = "getChartsData();setText(monatConst)"> Call HTTP Request
</button>
<br>
<div *ngIf="Demonstrator_ID">Chart für Demonstrator mit ID: {{Demonstrator_ID}} </div><br>
.ts
monatConst:any;
Demonstrator_ID: any;
setText(text){
this.Demonstrator_ID=text;
}
I want to fade in and out different <div> on my site. The div´s together are all one form. In every <div> I have a "go further" and a "go back" button. A go further button triggers this script:
document.getElementById("addnewjob_sitetwo").onclick = function(){
// Fade out all content
$('#newjobcontent-siteone').fadeOut(200);
function cutnewjobsitetwo(){
//Cut all content out
$('#newjobcontent-sitetwo').fadeIn(200);
$('#newjobcontent-siteone').css("display", "none");
}
setTimeout(cutnewjobsitetwo, 201);
};
And that works. Now, if I am on <div> three and i want to go back to <div> two I have a problem.
I modified the script from above like that:
document.getElementById("addnewjob_sitetwo").onclick = function(){
// Fade out all content
$('#newjobcontent-siteone').fadeOut(200);
$('#newjobcontent-sitethree').fadeOut(200);
function cutnewjobsitetwo(){
//Cut all content out
$('#newjobcontent-sitetwo').fadeIn(200);
$('#newjobcontent-siteone').css("display", "none");
$('#newjobcontent-sitethree').css("display", "none");
}
setTimeout(cutnewjobsitetwo, 201);
};
And that doesn´t work. The button does nothing if it gets clicked. Can anyone tell me why? I mean, the <div> of the first site gets faded out while it isn´t there, but is that realy the problem? - And I have to say, I`m a beginner...
Thank you
EDIT:
Here are some pictures. I hope it helps to understand what i want to do: Site one,Site two,Site three
So, the "weiter"-button on "Site one" triggers the same script as the "zurück"-button on "Site three". It fades out <div> one and three and fades in <div> two.
EDIT 2:
Here is the code of the buttons:
<button type="button" class="btn btn-default" name="addnewjob_sitetwo" id="addnewjob_sitetwo">
<span class="glyphicon glyphicon-new-window" style="font-size: 20px"></span> weiter
</button>
This is the first and here the second:
<button type="button" class="btn btn-default" name="addnewjob_sitetwo" id="addnewjob_sitetwo" style="font-size: 20px">
<span class="glyphicon glyphicon-new-window" style="font-size: 20px"></span> zurück
</button>
The code you have uploaded there for the third <div> seems to be set for the second with id
"addnewjob_sitetwo" instead of "addnewjob_sitethree"
Changing:
document.getElementById("addnewjob_sitetwo").onclick
To:
document.getElementById("addnewjob_sitethree").onclick
should do the trick.
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>
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.
a button corresponding to a prompt box,each box is different shells;Although implements the desired function, but my code is too complicated, and that there is no simple way. how can I do? This is my code
<--html button-->
button1
button2
...
button100
<--html pop box-->
<div class="note1" style="display:none;">
<img class="title-css" src="note1.png">
<p class="one">note1</p>
</div>
...
<div class="note100" style="display:none;">
<img class="title-css" src="note100.png">
<p class="one">note100</p>
</div>
<--angular js-->
$scope.showRulePop = function(index) {
for(var i=1;i<=8;i++) {
$('.note'+i).hide();
}
$('.note'+index).show();
};
Well first of all, don't use jQuery, unless your in the directive level of angular jQuery have nothing to do there.
First let's get rid of the links part using a simple ng-repeat :
<--html button-->
<div ng-repeat="button in buttons">
{{button.label[i]}}
</div>
// JS in the controller
$scope.buttons = [{
label:'button1'
},{label:'button2'}];
As you can see i declare in the javascript all your buttons and i just loop over it.
Now the "bombox" or whatever it is let's make it a simple template :
<div class="{{currentnote.class}}" ng-if="currentNote">
<img class="title-css" src="{{currentNote.img}}">
<p class="one">{{currentNote.content}}</p>
</div>
// and use ng-repeat for the eight first when there is no button selected
<!-- show 1 to 8 if note current note selected -->
<div ng-repeat="button in buttons1To8" ng-if="!currentNote">
<div class="{{button.note.class}}">
<img class="title-css" src="{{button.note.img}}">
<p class="one">{{button.note.content}}</p>
</div>
</div>
// JS
$scope.buttons = [{
label:'button1'
note:{class:'note1', img:'note1.png', content:'note1'//assuming no HTML or you' ll need something more
}},{label:'button2', note:{...}}, ...];
$scope.showRulePop = function(index){
$scope.currentNote = $scope.buttons[index].note;
}
$scope.buttons1To8 = $scope.buttons.slice(0, 8);//0 to 7 in fact
That's all, no need of jQuery.