We Keep Coding

SweetAlert open another alert with prevent closing previous alert

I want to open another alert along with the previous alert and prevent closing the previous alert, But the previous alert closes and new open.
I used iziToast and I can do this but I want to use SweetAlert.
SweetAlert Example:
const swalToast = Swal.mixin({
toast: true,
iconColor: "white",
customClass: { popup: "colored-toast" },
showConfirmButton: false,
timerProgressBar: true,
});
swalToast.fire({
title: "One",
position: "bottom",
timer: 5000,
icon: "info",
});
setTimeout(() => {
swalToast.fire({
title: "Two",
position: "bottom",
timer: 1500,
icon: "info",
});
}, 2000);
iziToast Example:
iziToast.info({
position: "bottomCenter",
title: "One",
message: "",
timeout: 5000,
});
setTimeout(() => {
iziToast.info({
position: "bottomCenter",
title: "Two",
message: "",
timeout: 1500,
});
}, 2000);

It is not possible to show more than one modal at a time, by design.
SweetAlert open another alert with prevent closing previous alert
Show two swal at same time
2 or more modals at the same time

How to use div.load properly when calling for a partial view in another controller?

So i have this code that calls a popup dialog that contains a partial view. The problem is that whenever i call the dialog div.load appends the entire string block to the address of the home controller.
function OpenSendMessagePopUp() {
var div = $("#DivAppendToPartialView");
div.load("#Url.Content(~/Resend/_SendMessage.cshtml)", function () {
div.dialog({
modal: true,
width: 500,
height: 420,
show: 'blind',
hide: 'blind',
title: "Send Message",
draggable: false,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
}
function SaveMessage() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Resend/_SendMessage.cshtml")',
data: {
smsContentId: smsContentId,
comments: comments
},
});
The MobileNumberUpload is the home controller for the project while Resend is the controller for the Partial View. Note that I cannot combine the two controllers as per the constraints of the project.
Error Message for when i click the button
This is the dialog that pops up when i click the button

Try below changes :
function OpenSendMessagePopUp() {
var div = $("#DivAppendToPartialView");
div.load('#Url.Content("~/Resend/_SendMessage.cshtml")', function () {
div.dialog({
modal: true,
width: 500,
height: 420,
show: 'blind',
hide: 'blind',
title: "Send Message",
draggable: false,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
}
function SaveMessage() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Resend/_SendMessage.cshtml")',
data: {
"smsContentId": smsContentId,
"comments": comments
},
});
}
Also make sure smsContentId and comments should be declared in JS.

Passing a variable from onclick to ajax

i am trying to passing a variable (region) from an onclick element to an ajax-function.
I am using PHP, SQL and the plugin http://t4t5.github.io/sweetalert/
Here is my Code in the head of an index.php
<script type"text/javascript">
function save(){
$.ajax({
type: "POST",
url: "addlandtovisited.php",
data: {region: region},
success: function(data) {
alert("Ajax save executed!");
}
});
}
</script>
<script>
jQuery(document).ready(function () {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#333333',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
scaleColors: ['#C8EEFF', '#006491'],
values: sample_data,
normalizeFunction: 'polynomial',
onRegionClick: function (element, code, region) {
var boton = "button";
swal({
title: ''+region,
showCancelButton: true,
showConfirmButton: false,
text: 'test',
html: true
});
}
});
});
</script>
The addlandtovisited.php:
<?php
if(isset($_POST['region'])){
?>
When i set a string to the ajax-function and delete the region from save(region), it works fine:
data: {region: "TEST"},
text: 'test',

As this thread suggests, there are some issues with the sweetalert repo. For example, I could not make the swal render html text in the body. Switching to sweetalert2 and applying the patch the thread mentions might be a good idea.
I would suggest you use the confirm button instead of creating your own link inside the body of the swal. For example:
swal({
title: '' + region,
showCancelButton: true,
showConfirmButton: true,
confirmButtonText: "save",
text: "anything",
html: true
}, function() { // save button callback
save(region);
});
Don't forget to add the region parameter to your save() method : save(region).

Using document.write() to load javascript

Excuse my newb question. I'm still in the beginning stages of learning javascript. I'm not sure If I can accurately describe to you guys what i'm trying to do, but i'll try.
Is it possible to load a javascript file onto an html page?
for example. Twitter gave me code for there twitter widget, and it's a javascript widget. I want to be able to display it on my page using the document.write method. Is this possible. Here is an example.
This is the code they gave me.
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#blahblah',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'blahblah',
width: 180,
height: 300,
theme: {
shell: {
background: '#ebebeb',
color: '#969396'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#bbbcbd'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script>
So, is it possible that I could write this to the html page like this?
document.write('<script src="http://widgets.twimg.com/j/2/widget.js"></script> '
<script>
'new TWTR.Widget({
version: 2,
type: 'search',
search: 'blah',
interval: 6000,
title: 'Follow Me On Twitter',
subject: '#blahBlah',
width: 180,
height: 300,
theme: {
shell: {
background: '#ebebeb',
color: '#969396'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#bbbcbd'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script> ');
or what I have to write each script as a seperate line like this?
document.write('<script src="http://widgets.twimg.com/j/2/widget.js"></script> ');
<script>
document.write('new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#ebebeb',
color: '#969396'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#bbbcbd'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script> ');
}
I tried THIS, but DW gave me a syntax error. Here is the ENTIRE script i'm writing.
<script type="text/JavaScript">
<!--
function changTwitter() {
var currentTime = new Date().getHours();
if (7 <= currentTime&&currentTime < 17) {
document.write('<' + 'script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#242124',
color: '#f0af4d'
},
tweets: {
background: '#333333',
color: '#c2c2c2',
links: '#f7bc63'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</' + 'script> ');
}
else {
document.write('<' + 'script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#17d1ff',
color: '#ff8fda'
},
tweets: {
background: '#ededed',
color: '#383838',
links: '#ff8aed'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</' + 'script> ');
}
}

You can do that, but you'll need to be sure that you break up the text </script> within the document.write call, because otherwise the browser will treat it as the end of the script tag that the document.write call is within. The usual way to do that is to either break the word up:
...blah blah blah</" + "script>");
or put a backslash in front of the forward slash:
...blah blah blah<\/" + "script>");
It is perhaps paranoid of me, but I do it (the first bit) for opening script tags as well.
In terms of whether you do it with one document.write call or two, it doesn't matter. document.write adds to the text stream that will be parsed by the HTML parser. It doesn't matter whether you write it all out at once or use a hundred individual calls to do it.
Update: Some points on the code you added to the question:
The code won't parse, you're using ' as the quote character for your document.write call, but you're also using it for strings within the code you're writing. Which means that the first ' within the code (which is after "type:") will end the document.write string.
Remember that document.write only works during the initial load of a page, as part of the parsing sequence. You can't call document.write later, in response to an event (or rather, if you do, the odds are very low that it will do what you want — it will try to replace the entire contents of the page). In the code you added to the question, you're defining a function changTwitter but never calling it. You'd have to call it to do anything.
Instead of outputting a completely different script, why not just use code within the script to adjust the color by time of day? Something like:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
(function() {
var currentTime = new Date().getHours()
shellColor,
shellBackground,
tweetColor,
tweetBackground,
linkColor;
if (7 <= currentTime&&currentTime < 17) {
shellColor = /*...whatever*/;
shellBackground = /*...whatever*/;
tweetColor = /*...whatever*/;
tweetBackground = /*...whatever*/;
linkColor = /*...whatever*/;
}
else {
shellColor = /*...whatever*/;
shellBackground = /*...whatever*/;
tweetColor = /*...whatever*/;
tweetBackground = /*...whatever*/;
linkColor = /*...whatever*/;
}
new TWTR.Widget({
version: 2,
type: 'search',
search: '#blahblah',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'blahblah',
width: 180,
height: 300,
theme: {
shell: {
background: shellBackground,
color: shellColor
},
tweets: {
background: tweetBackground,
color: tweetColor,
links: linkColor
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
})();
</script>

Just put the code in a separate javascript file, and include it with <script src="name_you_saved_it_under.js"></script> (put that in the <head> of whatever HTML document you want to include it in.

Using JQuery you could implement the following solution:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/**
* Function to load funcions dynamically
* by inserting a scrip tag into the head section
*
* #params <String> path to script
* #return none.
*/
function load_script(src) {
// docorate an empty elemend node with the correct
// script source and then append it to the head section
$('<script><\/script>').attr('src', src).appendTo($('head')[0]);
}
</script>
PS: This script has not been test but should be close to what you need.
Hope this helps.

How to hide qtip tooltip after some time has passed?

I'm using qtip ( http://craigsworks.com/projects/qtip/ ) to make tooltips. Now I need to show tooltips when the button is pressed and hide tooltips for example when 3 seconds have passed. My current code is not working, tooltips will sometimes go away and sometimes stay...
var self = $("#email");
self.qtip({
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' }, delay: 2000, effect: function () { self.qtip("destroy"); } }
});

#newbie, but a response, is to tidy the code and that maybe that's the problem. eg replacing the name of the variable "self" by "this".
$("#email").qtip( {
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' },
delay: 2000,
effect: function() { $(this).qtip("destroy"); }
}
});