Working through my JavaScript code, I'm able to get the alert for malformed URLs working but when a successful POST happened, I can get the response.id
to show up via an alert
call but not using the same toastr growl I used for my malformed URLs logic. Am I missing something?
<link href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>
<script type="text/javascript">
$(function () {
$('#submit').click(function () {
var txt = $('#url').val();
var re = /(http(s)?:\\)?([\w-]+\.)+[\w-]+[.com|.in|.org]+(\[\?%&=]*)?/
if (!re.test(txt)) {
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-bottom-center",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr["error"]("Invalid URL!");
$('#url').val('');
return false;
}
$.ajax({
url: "{{ url_for('api.start_status') }}",
type: 'POST',
contentType: "application/json",
dataType: 'json',
data: JSON.stringify({"url": txt}),
success: function (response) {
var meme = response.id;
toastr(meme);
}
});
});
});
</script>
UPDATE #1: As suggested, this is the code now and it still shows the same behavior. Confirmed that it also doesn't work in SAFARI so at least 2 browsers show the same issue.
<link href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>
<script type="text/javascript">
$(function () {
toastr.options = {
"closeButton": false,
"debug": true,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-bottom-center",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
$('#submit').click(function () {
var txt = $('#url').val();
var re = /(http(s)?:\\)?([\w-]+\.)+[\w-]+[.com|.in|.org]+(\[\?%&=]*)?/
if (!re.test(txt)) {
toastr["error"]("Invalid URL!");
$('#url').val('');
return false;
}
$.ajax({
url: "{{ url_for('api.start_status') }}",
type: 'POST',
contentType: "application/json",
dataType: 'json',
data: JSON.stringify({"url": txt}),
success: function (response) {
toastr.success("Invalid URL 2!");
var meme = response.id;
{# alert(meme);#}
}
});
});
});
</script>
So you want to show the same toast whether there is a malformed url or a successful ajax call.
If I understood correctly then when I look at your code you seem to be putting the toastr.options only if the regex.test is unsuccessful
To test I would move the options outside the if(!re.test...)?