We Keep Coding

Sweetalert 2 Issue on Icon

Anyone can help me?
I tried to used sweetalert2 on my app, but if used "question", "warning", and "info" it isn't correct.
Source from : https://sweetalert2.github.io/
enter image description here
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
<script>
function deleteConfirmation(id) {
var urlsite = "https://"+window.location.hostname+'/gudang/public/blok/d/'+id;
Swal.fire({
title: 'Peringatan',
text: "Anda yakin ingin menghapus data?",
icon: "question",
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, Hapus!'
}).then((result) => {
if (result.isConfirmed) {
// redirect to delete data
location.replace(urlsite);
// notification
Swal.fire(
'Sukses!',
'Data Anda berhasil dihapus, mohon tunggu hingga proses selesai!',
'success'
)
} else {
// cancel to deleting data
Swal.fire(
'Batal Hapus!',
'Data Anda batal dihapus!',
'error'
)
}
})
}
</script>

try with options
Swal.fire({
title: 'Batal Hapus',
text: 'Data Anda batal dihapus!',
icon: 'error',
})
as per doc https://sweetalert2.github.io/

You can use a custom class to hide one of the icons. Some icons have content in a ::before pseudo-class which doubles up.
Create a custom class
.no-before-icon::before {
display: none !important;
}
Apply it to all icons - doesn't effect success or error icons
Swal.fire({
title: "No more double icons",
icon: "info",
customClass: {
icon: "no-before-icon",
},
});

Depending on your version of Sweetalert the property that sets the icon can be called either 'icon' or 'type', try both. Can't do much more without seeing your code.

Set id for bootbox textarea

Below is code to open bootbox with textarea:
bootbox.prompt({
title: "This is title",
inputType: 'textarea',
placeholder: 'Feedback',
callback: function (result) { console.log(result); }
});
I can see textarea created like below:
<textarea class="bootbox-input bootbox-input-textarea form-control" placeholder="Feedback"></textarea>
I tried to give id like: id: "test_id", but it is giving me an error. Can anyone help please?
I am opening this bootbox on click of one button.

You can add id by jQuery in simple way .
bootbox.confirm({
message: 'message',
buttons: {
'confirm': {
title: "This is title",
inputType: 'textarea',
placeholder: 'Feedback',
label: 'OK',
className:'bootbox-input bootbox-input-textarea form-control'
}
},
callback: function(result) {
if (result) {
console.log("OK clicked");
}
}
});
$(".bootbox-input-textarea").attr('id', 'bootbox-confirm-id');
<textarea class="bootbox-input bootbox-input-textarea form-control" placeholder="Feedback"></textarea>
For more information , visit the LINK

function openBootbox () {
bootbox.prompt({
title: "This is title",
inputType: 'textarea',
placeholder: 'Feedback',
callback: function (result) { console.log(result); }
});
}
Hit this openBootbox function on any button click

Use Javascript if function to display a SweetAlert popup

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">

Codeigniter Dropdown issue

i've a problem with Dropdown pop-up.
in my Dropdown there is option "Add New" when i click on "Add New" pop should open..which can not open now !
Here Is Dropdown's Code
echo form_dropdown('Birth_Certificate_Storage_id['.$key.']', $optionstorage,"",array('class'=>'form-control roleId','id'=>'Birth_Certificate_Storage_id['.$key.']','onchange'=>'addRole(this.options[this.selectedIndex].text)'));
i have put "onchange" event in dropdown and make function "addRole()"
addRole() Function
function addRole(val)
{
//alert("test");
if (val == "ADD NEW")
{
$('#RoleModal').modal('show');
$('#form_role').validate({
rules:
{
Storage Code: { required: true},
Storage Location: { required: true},
},
messages:
{
Storage Code: {required: "This field is Required"},
Storage Location: {required: "This field is Required"}
}
});
}
}
Function isn't working,i can not alert in that function
any help would be appreciated

updated:
The forth parameter of form_dropdown function should be a string not an array, like:
echo form_dropdown('Birth_Certificate_Storage_id[' . $key . ']', $optionstorage, "", 'class="form-control roleId" id="Birth_Certificate_Storage_id[' . $key . ']"');
If you use jQuery you can bind the change event in your javascript code/file instead of set it inline:
$(document).ready(function () {
$('.form-control.roleId').on('change', function () {
var val = $(this).find("option:selected").text();
if (val == "ADD NEW") {
$('#RoleModal').modal('show');
$('#form_role').validate({
rules : {
'Storage Code' : {required: true},
'Storage Location': {required: true}
},
messages: {
'Storage Code' : {required: "This field is Required"},
'Storage Location': {required: "This field is Required"}
}
});
}
});
});
Please notice I fixed some problems in your JS!

simple jquery dialog box can't create input

may any one help me create a input box inside my dialog box? i am using the jquery-ui.js. this is my code:
$(document).on("click",".savebtn",function(). {
var id = $(this).attr("id");
$.dialog({
title: "Activation date ",
content:"Activation date ",
create: function() {
$("#inputBox").val();
},
closeBack:function(){
$.dialog.message({
content: "The id is "+ id
});
},
buttons:[
{
text:"Click me"
}
]
});
});

You can try this:
Fiddle
HTML:
<div id='dialog' style='display: none;'>
<input type="text" />
</div>
<button>
Click Me!
</button>
Jquery:
$(document).ready(function() {
$("button").click(function() {
$("#dialog").dialog({
resizable: false,
modal: true,
title: "My Awesome Title",
buttons: {
"Do Something": function() {
alert("Do something if I was clicked.");
},
Cancel: function() {
alert("Dialog Canceled");
$(this).dialog("close");
}
}
});
});
});