How to add fontawesome spinner inside onclick? - javascript

So I have this code inside my php echo;
<input type="submit" value="Send Love" class="btn btn-primary" onclick="this.form.submit(); this.disabled=true; this.value=\'Sending Love…\';" />
As you can see the text will change onclick and the button will be disabled and the form will be submitted. But what i'm trying to do is add a fontawesome spinner besides Sending so the button will have a spinner when its being submitted. I tried adding it but it doesn't show up and it breaks the output of the code; I also tried using '\'\ like with the Sending but it still doesn't show up and the onclick functions are broken.
<input type="submit" value="Send Love" class="btn btn-primary" onclick="this.form.submit(); this.disabled=true; this.value=\'<i class="fa fa-spinner fa-spin"></i> Sending Love…\';" />
So anyone could help me fix this thing? Really want to add that spinner. Thanks in advance!

You have to take <button ... > for that. Try this:
<button type="submit" class="btn btn-primary" onclick="sendLove(this);" > Send Love</button>
<script>
function sendLove(this1)
{
//alert('asdasd');
this1.disabled=true;
this1.innerHTML='<i class="fa fa-spinner fa-spin"></i> Sending Love…';
}
</script>
Hello, here is full-fledged working example..
https://jsbin.com/bezomapeba/edit?html,js,console,output

Made it to work using Chay22's suggestion of using jquery click
Button:
<button type="submit" id="sendbtn" class="btn btn-primary">Send Love</button>`
Script:
$('#sendbtn').click(function(){
this.form.submit();
this.disabled=true;
this.innerHTML='<i class="fa fa-spinner fa-spin"></i> Sending Love…';
});

the problem is of browser's part, cos he think it html and handle it, try to do that with js, echo '<input type="submit" value="Send Love" class="btn btn-primary" onclick="this.form.submit(); this.disabled=true; this.value=\'<i class="fa fa-spinner fa-spin">Sending Love…</i>\';>';
JavaScript's way

Hope this is helpful and better. Add a div above your submit button
<div class="loading" style="display: none;"><i class="fa fa-spinner fa-spin"></i> Progressing …</div>
or add button like below
<button type="submit" class="btn btn-primary"><i style="display:none" class="fa fa-spinner fa-spin loading"></i> Send Love</button>
$(document).ready(function(){
$("#sendbtn").click(function(){ // your submit button id
var isValid = document.querySelector('#myform')
if (isValid.checkValidity())
$(".loading").show();
});
});

Smallest, lightweight, and reusable
We made a custom jQuery.fn:
jQuery.fn.extend({
spin: function () {
this.data("original-html", this.html());
var i = '<i class="fa fa-spinner fa-pulse fa-3x fa-fw" style="font-size:16px; margin-right:10px"></i>';
this.html(i + this.html());
this.attr("disabled", "disabled");
},
reset: function () {
this.html(this.data("original-html"));
this.attr("disabled", null);
}
});
This can be used as follows:
$("button").click(function () {
var b = $(this);
b.spin();
$.ajax({
url: "",
button: b,
success: function (result) {
// do something
b.reset();
}
});
});

Related

Cancel action after cancel button on alert is clicked

Please, help me. I want to display confirmation box for delete action. If the user click okay then it will proceed. But if the user click cancel, it cancel the delete operation or go back to the same page. I did the code in javascript but it's not working. when I clicked on cancel on confirmation alert it still proceed to delete action.
function confirmation() {
if (confirm("Are you sure you want to delete the reservation?"))
return true;
else
return false;
}
<td>
<a href="updateStaffServlet?action=update&sID=<c:out value=" ${staff.staffID} "/>"class="btn btn-icons btn-rounded btn-light">
<i class="fa fa-pencil"></i>
</a>
<a onclick="confirmation()" href="deleteStaffServlet?action=delete&sID=<c:out value=" ${staff.staffID} "/>" id="dltbtn" class="btn btn-icons btn-rounded btn-light">
<i class="fa fa-user-times"></i>
</a>
</td>
this is not the best way but you can pass url to your confirmation function and if user confirmed, redirect him.
function confirmation(url) {
if (confirm("Are you sure you want to delete the reservation?"))
location.replace(url);
}
<td>
<a href="updateStaffServlet?action=update&sID=<c:out" value=" ${staff.staffID} " class="btn btn-icons btn-rounded btn-light">
<i class="fa fa-pencil"></i>
update link
</a>
<a onclick="confirmation('deleteStaffServlet?action=delete&sID=<c:out')" value=" ${staff.staffID} " id="dltbtn" class="btn btn-icons btn-rounded btn-light">
<i class="fa fa-user-times"></i>
delete link
</a>
</td>
but i recommend you learn basics about ajax and send delete request without redirecting page.

How to get multiple values using JSTL tags?

I have this button:
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="${usr.idUser}" onclick="deleteUser(this.value)">Delete</button>
That calls the function deleteUser once the button is clicked.
I would like to know how to send more than one value at the same time.
For example, if I want to send the idUser and the userName, how can I do it?.
I tried this but it's not working:
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="${usr.idUser, usr.userName}" onclick="deleteUser(this.value)">Delete</button>
I expect to receive the values in the same jsp page:
function deleteUser(val1, val2) {
alert(val1);
alert(val2);
}
You can simply pass your values under your function under '' quotes else it will give you error not defined.So your button code will look like below :
<button type="button" class="btn btn-danger" value="something" id="deleteuserbtn" onclick="deleteUser(this.value ,'${usr.idUser}','${usr.userName}')">
Delete</button>
Demo Code :
function deleteUser(val1,val2,val3){
alert("val :"+val1 +" "+val2+" "+val3);
}
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="something" onclick="deleteUser(this.value,'${usr.idUser}','${usr.userName}')">
Delete</button>

Disable/enable button using jquery

I have a button that will disable if a certain condition occurs. Its like when the order_status is Accepted then the button for Accept is disabled. Its same in the other buttons when the order_status is Pending then the Send button is disabled. How can I achieve that?
Whats happening right now is I can disable the button for ASD but when I change the #asd to #submitAccept it didn't disable the Accept button, how that's possible?
But for now, help me how can I achieve when the order_status is Accepted the Button for Accept is disabled. I hope you can help me guys with my prob, I don't know what to do. Really appreciate any help from you guys, Thanks!
Heres my code right now.
function viewOrder(order_id, order_id, user_id, order_date, order_time, order_deliveryCharge, order_totalAmount, address, coordinates, driver_number, order_status) {
document.getElementById("t_order_id").setAttribute("value", order_id);
document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
document.getElementById("t_user_id").setAttribute("value", user_id);
document.getElementById("t_order_date").setAttribute("value", order_date);
document.getElementById("t_order_time").setAttribute("value", order_time);
document.getElementById("t_order_deliveryCharge").setAttribute("value", order_deliveryCharge);
document.getElementById("t_order_totalAmount").setAttribute("value", order_totalAmount);
document.getElementById("t_address").setAttribute("value", address);
document.getElementById("t_coordinates").setAttribute("value", coordinates);
document.getElementById("t_drivers_number").setAttribute("value", driver_number);
document.getElementById("t_order_status").setAttribute("value", order_status);
document.getElementById("ORDER_MODAL_ACCEPT").setAttribute("value", order_id);
document.getElementById("ORDER_MODAL_DELIVER").setAttribute("value", order_id);
document.getElementById("ORDER_MODAL_CANCEL").setAttribute("value", order_id);
$(document).on("click", "#asd", function () { // MY JQUERY
if ($("#t_order_status").val() == "Accepted") {
$("#asd").prop("disabled", true);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="form-group">
<label for="order_status" class="col-sm-2 control-label" style="width:20%;">Order Status</label>
<input type="text" class="form-control" name="order_status" id="t_order_status" style="width:80%;" placeholder="" value="" required="required" readonly>
</div>
<button type="button" input style="background-color:#4CAF50;color:white;border-color:#000000;" name="submitDelivered" id="submitDelivered" class="btn btn-success" data-toggle="modal" data-target="#myDeliverModal" onclick="deliver('<?= $_POST['order_id'] ?>')" > Delivered </button>
<button type="button" input style="background-color:#0000FF;color:white;border-color:#000000;" name="submitAccept" id="submitAccept" class="btn btn-success" data-toggle="modal" data-target="#myAcceptModal" onclick="accept('<?= $_POST['order_id'] ?>')" > Accept </button>
<button type="button" style="background-color:#FFFF00;color:black;border-color:#000000;" class="btn btn-success" data-toggle="modal" data-target="#myDropdown" onclick="send('<?= $_POST['order_id'] ?>')"> Send </button>
<button type="button" input style="background-color:#f44336;color:white;border-color:#000000;" name="submitCancel" id="submitCancel" class="btn btn-success" data-toggle="modal" data-target="#myCancelModal" onclick="cancel('<?= $_POST['order_id'] ?>')">Cancel</button>
<button type="button" name="asd" id="asd" class="btn btn-primary" onclick="asd"> ASD </button>
Use the .disabled method and set it to true.
window.onload = function() {
if(document.getElementById("t_order_status").value == "Accepted") {
document.getElementById("asd").disabled = true;
}
}

Ajax refreshes the whole page instead of a particular part

Net web services. The following code is attached to my master page using a JS. When I run the ajax call, it seems like at the end of success function, it refreshes the whole page. Rather than some particular part. I have tried using both ways, form + input submit, and normal button with click function.
$.ajax({
url: 'service url',
data: { LookupParameter: somevariable },
method: 'POST',
dataType: 'xml',
asynch: false,
cache: false,
success: function (data) {
var xmldata = $(data);
//dom manipulation code
},
error: function (e) {
}
});
Master Page
following code is embedded inside body tag. but not in content placeholder.
<form itemscope itemtype="http://schema.org/LocalBusiness" id="form1" runat="server">
<span class="input-group-addon borderRadiusZero" id="basic-addon1">
<span class="glyphicon glyphicon-question-sign"></span>
</span>
<Input ID="txt_lookup_pincode" type="number" class="form-control" min="111111" max="999999" placeholder="Enter Your Pincode" />
<span class="input-group-btn ">
<button id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas();" style="height:100%;">Submit</button>
<input id="LookupServices" class="btn btn-primary borderRadiusZero" style="height:100%;" type="submit" value="submitM" />
</span>
The issue may be because of this line
<button id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas();" style="height:100%;">Submit</button>
The button type is not defined here. In this case the default type that is submit will be applied.
Define the button type as button
<button type = "button" id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas();" style="height:100%;">Submit</button>
If your JavaScript function with the Ajax call is included in the onclick handler of your button, it should return false to prevent the default action of the button:
<button id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas(); return false;" style="height:100%;">Submit</button>
You can add to the button the type "button" to suppress the default behavior
<button type="button" id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas();" style="height:100%;">Submit</button
put the dom elements which you want to refresh after the ajax success in another div which is outside the form and do the manipulations to that div. Hope this helps!

Using $(this) with css class selectors in Jquery

I have below HTML to display and download tracks . What i need is to hide Play button , Download button and the share button when user clicks share button(what i really need is to show social media buttons after hiding the default buttons) .
<form action="index.php" method="post">
<div id="53">
Track Name :- <b>Get Low</b>
<br />By :- DJ perera
<br />
<button class="playback btn btn-primary btn-sm weezy"><i class="fa fa-play"></i> Play</button>
<audio src="../members/memberfiles/16/Get Low.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success weezy" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
<button class="sharer btn btn-sm btn-danger weezy" type="button"><span class="fa fa-share-alt"></span> Share</button>
<br />
<input type="hidden" value="Get Low.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvR2V0IExvdy5tcDM=" name="link">
</div>
</form>
<br>
<form action="index.php" method="post">
<div id="52">
Track Name :- <b>Eclips - Hardwell</b>
<br />By :- DJ perera
<br />
<button class="playback btn btn-primary btn-sm weezy"><i class="fa fa-play"></i> Play</button>
<audio src="../members/memberfiles/16/Eclips - Hardwell.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success weezy" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
<button class="sharer btn btn-sm btn-danger weezy" type="button"><span class="fa fa-share-alt"></span> Share</button>
<br />
<input type="hidden" value="Eclips - Hardwell.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvRWNsaXBzIC0gSGFyZHdlbGwubXAz" name="link">
</div>
</form>
<br>
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$('.weezy').slideUp();
});
});
</script>
i already have above js code to hide play , download and share buttons when a user clicks share button . The Problem is since im using css class selectors , when user press Share button it hide all the play buttons , download buttons and share buttons from the webpage . what i need to achieve is that when a user click share button i need to hide only buttons that belong into that form only .
i have already tried doing this . but it won't work
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$(this).$('.weezy').slideUp();
});
});
</script>
and
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$(this).find('.weezy').slideUp();
});
});
</script>
and this
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$('.weezy',this).slideUp();
});
});
</script>
Kindly point out what went wrong since im new to javascript . Thanks
Use .closest() to select the closest parent form element of the clicked element. From there, select the desired element within that form.
Example Here
$('.sharer').on('click', function () {
$(this).closest('form').find('.weezy').slideUp();
});

Categories

Resources