I would like to display a SweetAlert popup if uploads are currently switched off, this is set by the li element having a class of "upload-off"
How can I incorporate an if Javascript condition to display the popup and just do nothing if the "upload-on" class if present of the <li>
I plan to use Vue on the page at a later date, so preferably need to use Javascript rather than jQuery (as I here of potential conflicts with Vue and jQuery)
<!-- There are two classes which toggle, upload-off and upload-on-->
<li class="uploadli upload-off">
<p>Upload Off</p>
</li>
<input value="" id="myuploadbutton" type="file" name="Uploader" placeholder="Upload here">
<!-- Sweetalert Popup - Only display popup if uploads are currently disabled
function upload_check() {
swal({
text: "Uploads are currently disabled, please apply here at http://www.example.com/apply",
icon: "error",
buttons: ['Apply Now'],
dangerMode: true
})
.then(function(value) {
console.log('returned value:', value);
});
}
-->
OVERVIEW: User click on upload button, if the class "upload-off" is present on the <li> element we get a SweetAlert popup
Here is a similar SweetAlert issue
How to show SweetAlert in JavaScript
So check to see if the element exists
document.querySelector("#myuploadbutton")
.addEventListener('click', function(evt) {
var li = document.querySelector('li.uploadli.upload-off');
if (li) {
evt.preventDefault()
swal({
text: "Uploads are currently disabled, please apply here at http://www.example.com/apply",
icon: "error",
buttons: ['cancel', 'Apply Now'],
dangerMode: true
}).then(function(value) {
console.log('returned value:', value);
if (value) {
// window.location.href = "//www.example.com/apply"
}
});
}
})
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<ul>
<li class="uploadli upload-off">
<p>Upload Off</p>
</li>
</ul>
<input value="" id="myuploadbutton" type="file" name="Uploader" placeholder="Upload here">
Try this, add the if condition for upload-off check in the click event.
Delete line event.returnValue = true; if you want to do nothing on upload-on
$("input[type=file]").on('click', function(event) {
if (document.querySelector('li.uploadli.upload-off')) {
swal({
text: "Uploads are currently disabled, please apply here at http://www.example.com/apply",
icon: "error",
buttons: ['Apply Now'],
dangerMode: true
})
.then(function(value) {
console.log('returned value:', value);
});
event.preventDefault();
//do something
} else if (document.querySelector('li.uploadli.upload-on')) {
swal({
text: "Uploads are currently disabled, please apply here at http://www.example.com/apply",
icon: "error",
buttons: ['Apply Now'],
dangerMode: true
})
.then(function(value) {
console.log('returned value:', value);
});
event.returnValue = true; //delete if you want to do nothing on upload-on
// alert("nothing is done");
} else {
alert("nothing");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<li class="uploadli upload-off">
<p>Upload Off</p>
</li>
<input value="" id="myuploadbutton" type="file" name="Uploader" placeholder="Upload here">
Related
I have a logout button in my navber.blade.php:
<a class="dropdown-item" id="logout" href="{{ route('admin.logout') }}">
{{ __('Logout') }}
</a>
I want that when I click the logout button, it will show me a confirmation message prompting whether you want to logout - (yes or no)? How to do this with jQuery or javascript?
Edit: I have add this jQuery code
<script>
$(document).on("click", "#logout", function(e) {
e.preventDefault();
var link = $(this).attr("href");
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
});
</script>
For logout it's showing message
But not logging out.
Note: I am just beginner of jQuery
I have missed to added
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
This link
I have a button here with a simple CSS. what I want is, when I hit on that button to reset my style. I use it, I need to add a sweet alert before pressing the button.
<button class="reset-option">Reset Options</button>
document.querySelector(".reset-option").onclick = function () {
localStorage.clear();
window.location.reload();
};
What I want is, add this alert to handle it with javascript.
swal({
title: "OOPS !",
text: "You Want To Resat Your Style!",
icon: "warning",
});
I tried to do this but it didn't work.
let resetOption = document.querySelector(".reset-option");
resetOption.onclick = function () {
if (resetOption.window === reload()) {
swal({
title: "OOPS !",
text: "You Want To Resat Your Style!",
icon: "warning",
});
}
}
You can have only one onclick handler per element. So here, the second overwrites the first.
Also, Swal returns a promise to handle the result. What is below is real close to the example found here.
I suggest:
document.querySelector(".reset-option").onclick = function () {
swal.fire({
title: "OOPS !",
text: "You Want To Resat Your Style!",
icon: "warning",
showCancelButton: true
}).then((result) => {
if (result.isConfirmed) {
console.log("confirmed");
//localStorage.clear();
//window.location.reload();
}else{
console.log("canceled")
}
})
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.12.5/sweetalert2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.12.5/sweetalert2.min.js"></script>
<button class="reset-option">Reset Options</button>
if you want to show an alert to user before hit the button, you can add mouse hover event to your button.
var event = new MouseEvent('mouseover', {
'view': window,
'bubbles': true,
'cancelable': true
});
document.querySelector(".reset-option").onclick = function () {
localStorage.clear();
window.location.reload();
};
var cc=document.querySelector(".reset-option")
cc.addEventListener('mouseover', function() {
//your alert code here
alert('Before hit button');
});
I'm using sweetAlert this is working fine with single button but now i want to click button with choice but I'm not able to that, What is wrong?
Now my redirection is working on both buttons but i want to click only for single button. How can i do that?
What i tried:-
function CallMessage() {
swal({
title: 'this is title',
text: 'message',
buttons: ["Finish Now", "Exit Anyway"]
}).then(function() {
window.location = 'login.aspx';
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<button onclick="CallMessage();">Button</button>
Answer will be appriciated!
The promise returned by swal() is resolved to the value of the clicked button. When using the array shorthand to set the buttons property, the first (cancel) button returns null, while the rest return true:
function CallMessage() {
swal({
title: 'this is title',
text: 'message',
buttons: [ 'Finish Now', 'Exit Anyway' ]
}).then(value => {
console.log(value);
if (value) {
console.log('Redirecting!');
// location.href = 'login.aspx';
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<button onclick="CallMessage();">Button</button>
If you have more than two buttons, you can also set custom values for each one using an object instead of an array. See the Advanced Examples section of the docs for more details.
swal({
title: "Log In to Continue",
html: true,
text: "Username: <input type='text'><br>Password: <input type='password'>",
type:"input"
});
swal({
title: 'Multiple inputs',
html:
'<input id="swal-input1" class="swal2-input" autofocus>' +
'<input id="swal-input2" class="swal2-input">',
preConfirm: function() {
return new Promise(function(resolve) {
if (result) {
resolve([
$('#swal-input1').val(),
$('#swal-input2').val()
]);
}
});
}
}).then(function(result) {
swal(JSON.stringify(result));
})
$(document).ready(function() {
swal({
title: "Error!",
text: "Here's my error message!",
type: "error",
confirmButtonText: "Cool"
});
});
type:"input" makes .sweet-alert input to display block and to enable your own inputs add Id/class name to the inputs and make them "display:block !important" using css.
Example code snippet
$("#btnShowAlert").click(function() {
sweetAlert({
title: "Log In to Continue",
text: "Username: <input id='userName' type='text'><br>Password: <input id='password' type='password'>",
html: true
});
});
.sweet-alert #userName,
.sweet-alert #password {
display: block !important;
}
<link href="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.css" rel="stylesheet"/>
<script src="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="btnShowAlert">
Show Sweet Alert
</button>
As Per your comment , I think You forgot to include jquery.js in your code try to include it in script and than try this code
<style>fieldset{
display:none;
}
<style>
$(document).ready(function() {
swal({
title: "Log In to Continue",
html: true,
text: "Username: <input type='text'><br>Password: <input type='password'>",
type:"input"
});
});
I'm facing the same work around in R, part of the solution in a work around is doing this:
sweetalert(title : "test message",
text : "Username: <input type='text'><br>Password:",
html : TRUE,
type : "input",
confirmButtonColor : '#DD6B55',
confirmButtonText : 'Yes, merge the files!',
closeOnConfirm : FALSE)
I suppose. That would give you only 2 instead of 3 input fields
I have a form that when the submit is hit i want a modal box to pop up with a YES and NO button i want the both the yes and no button to submit the form but i need to know which button they clicked.
Here is my code
<input onclick="$.msgbox('confirm text',{
buttons : [
{type: 'submit', value:'YES'},
{type: 'submit', value:'NO'}
]
}, function(buttonPressed) {
});" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />
My problem is the form is submitting when the user clicks submit.
Any help or ideas would be great
thanks
While I'm not familiar with the $.msgbox plugin but you should be opening the modal dialog on <form> submit and not on a button press, as the form can also be submitted by an enter/return on certain input fields (like text boxes <input type="text|password">)
var confirmed = false;
$('#myform').bind('submit', function() {
if (confirmed) {
return true; // confirmation received, continue form submission process
} else {
$.msgbox(
'my modal message',
{
buttons : [
{ type: 'button', value: 'YES' },
{ type: 'button', value: 'NO' }
]
},
function(buttonPressed) {
confirmed = buttonPressed.value; // Update the confirmed variable
$('#myform').submit(); // re-submit the form
}
);
return false; // cancel form submission
}
});
Add return false:
<input onclick="$.msgbox('Would you like a cash advance of up to £1000 whilst we process your loan?',{
buttons : [
{type: 'submit', value:'YES'},
{type: 'submit', value:'NO'}
]
}, function(buttonPressed) {
}); return false;" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />
Not sure about the msgbox either but some remarks about your code:
Don't attach your JS logic directly to your code, but use jQuery to attach click event to your markup (see unobtrusive javascript):
Instead of
<input onclick="$.msgbox('confirm text',{
Use
$('#btnApply').click(function(e) {
You can stop the click handling by setting as false one property of the event parameter:
$('#btnApply').click(function(e) {
e.preventDefault(); // stop click handling and so form submitting
Finally, handle the form submitting or not in the msgbox callback function:
$.msgbox("Are you sure that you want to permanently delete the selected element?", {
type: "confirm",
buttons: [
{
type: "submit",
value: "Yes"},
{
type: "submit",
value: "No"},
{
type: "cancel",
value: "Cancel"}
]
}, function(result) {
if(result == "Yes") // display the form on submit
$('form').submit();
});
jsFiddle available.