I would like to make a new line in my Bootbox Alert Box. I know in Javascript you can use \n but this doesn't seem to work. Here is what I have tried:
bootbox.alert("Hello \n world");
You can use html for that:
bootbox.alert("Hello <br> world!");
Will do it
with confirm message
$(function () {
$(".confirm").click(function (e) {
e.preventDefault();
bootbox.confirm({
message: "<h3>Hello</h3> <br> world!",
buttons: {
confirm: {
label: 'yes',
className: 'btn-success'
},
cancel: {
label: 'no',
className: 'btn-danger'
}
},
callback: function (result) {
if (result)
console.log('yes');
}
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
Delete
Related
I recently started using Sweetalert but now I don't understand why it doesn't work.
I made a function that retrieves the value of a button that I tested with alert (and it works) but as soon as I put it with sweetalert, the button is validated directly without the sweetalert being displayed.
function dosomething(val) {
if (val === "Warning") {
swal({
html: 'Warning !!!',
icon: 'warning',
confirmButtonColor: '#0A717D',
confirmButtonText: 'Ok',
});
}
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link rel="stylesheet" href="src/js/jquery-ui.min.css">
<button type="submit" name="besoin" onclick="dosomething(this.value)" value="Warning">Do something</button>
openAreYouSureDialogDocument(training): void {
if('warning'){
Swal.fire({
title: 'Warning !!!',
text: 'Warning !!!',
icon: 'warning',
confirmButtonColor: '#0A717D',
confirmButtonText: 'Ok',
}).then((result) => {
if (result.value) {
// if all good
}
}).catch(err => console.log(err))
}
}
The title attribute was missing from your sweet alert function.
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link rel="stylesheet" href="src/js/jquery-ui.min.css">
<script>
function dosomething(val)
{
if (val === "Warning")
{
swal({
title: 'Warning !!!',
html: 'Warning !!!',
icon: 'warning',
confirmButtonColor: '#0A717D',
confirmButtonText: 'Ok',
});
}
};
</script>
<button type="submit" name="besoin" onclick="dosomething(this.value)" value="Warning">Warning</button>
I have a custom alert ui setup for jquery-ui, but for some reason my close button doesn't close the window. Below is my code. I am attempting to utilize the override alert() with jQuery UI as mentioned in this link. Any assistance is appreciated.
https://andrewensley.com/2012/07/override-alert-with-jquery-ui-dialog/
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type ="text/javascript">
window.alert = function (message) {
$(document.createElement('div'))
.attr({ title: 'Invoice Information', 'class': 'alert' })
.html(message)
.dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
buttons: {
OK: function () {
$(this).dialog("close");
}
},
close: function () { $(this).remove();}
});
};
</script>
I solved my issue by simply moving my renders and script links to my header and moving my JS script to the body.
The code below always load script src when page load.
.
I have a website that clicks is on the right side(as menu item) then it loads page on the right side(content), but 1 page only.
.
How to load external script src during at onclick only?
<html>
<head>
<script src="https://xdomain.com/xout.js"></script>
</head>
<body>
<img id="idxclick" src="images/ximage.jpg" />
<script>
var handler = xout.xsetup({
key: 'sd_FlP9fKY7TvINq4bWachJQ35P',
image: '/images/xout.png',
locale: 'auto',
token: function(token) {
//
//
}
});
$('#idxclick').on('click', function(e) {
handler.open({
name: 'Hardware',
description: 'Software',
amount: '50.00'
});
e.preventDefault();
});
$(window).on('popstate', function() {
handler.close();
});
</script>
</body>
</html>
I did what your code > here > but same thing happen >
<html>
<head>
<!-- script src="https://xdomain.com/xout.js"></script> REMOVED -->
</head>
<body>
<img id="idxclick" src="images/ximage.jpg" />
<script>
$.getScript('https://xdomain.com/xout.js', function () {
// do some stuff after script is loaded
var handler = xout.xsetup({
key: 'sd_FlP9fKY7TvINq4bWachJQ35P',
image: '/images/xout.png',
locale: 'auto',
token: function(token) {
//
//
}
});
$('#idxclick').on('click', function(e) {
handler.open({
name: 'Hardware',
description: 'Software',
amount: '50.00'
});
e.preventDefault();
});
$(window).on('popstate', function() {
handler.close();
});
});
</script>
</body>
</html>
.
Your answer was correct!, thank you!, and this is much Better and Faster! Prevent Double Click included.
.
<html>
<head>
</head>
<body>
<img id="idxclick" src="images/ximage.jpg" onmouseover="$.getScript('https://xdomain.com/xout.js')" />
<script>
$('#idxclick').on('mouseout', function() {x=0})
var x=0;
$('#idxclick').on('click', function(e) {
if (x==0) {
x=1;
var handler = xout.xsetup({
key: 'sd_FlP9fKY7TvINq4bWachJQ35P',
image: '/images/xout.png',
locale: 'auto',
token: function(token) {
//
//
}
});
handler.open({
name: 'Hardware',
description: 'Software',
amount: '50.00'
});
}
e.preventDefault();
});
$(window).on('popstate', function() {
handler.close();
});
</script>
</body>
</html>
You can dynamically load a script with $.getScript() inside of your click event handler.
$('#idxclick').on('click', function(e) {
$.getScript('https://xdomain.com/xout.js', function () {
var handler = xout.xsetup({
key: 'sd_FlP9fKY7TvINq4bWachJQ35P',
image: '/images/xout.png',
locale: 'auto',
token: function(token) {
//
//
};
handler.open({
name: 'Hardware',
description: 'Software',
amount: '50.00'
});
});
e.preventDefault();
});
I'm trying to open a modal on a mouse click but i can't seem to get it to work at all. Here is my code
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
$("#Attack1Id").click(function () {
var location = $.find("#dialog");
$(location).dialog({
title: "Dialog box",
height: 300,
modal: true,
open: function (event, ui) {
$(this).load("#Url.Action("FileTables", "Card")");
},
on: ('click', '.table a', function () {
alert($(this).closest('tr').find('td:first').text())
})
})
});
</script>
It would seem "dialog" is the undefined function, but how else am i suppose to create a jquery dialog?
Update
Just for clarity this is my whole html page
#model CardSite.Models.Card
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
#{
ViewBag.Title = "Card";
}
<h2>New card type</h2>
#using (Html.BeginForm("CreateCard", "Card", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-group">
#Html.LabelFor(m => m.Name)
<div class="text-box-for">
#Html.TextBoxFor(m => m.Name)
</div>
#Html.LabelFor(m => m.Attack1Id)
<div class="text-box-for">
#Html.TextBoxFor(m => m.Attack1Id)
</div>
<div id="dialog"></div>
</div>
<input type="submit" value="Create" class="btn btn-default" />
}
<script type="text/javascript">
$(document).ready(function () {
$("#Attack1Id").click(function () {
var location = $.find("#dialog");
$(location).dialog({
title: "Dialog box",
height: 300,
modal: true,
open: function (event, ui) {
},
on: ('click', '.table a', function () {
alert($(this).closest('tr').find('td:first').text())
})
})
});
});
</script>
--- Update ---
I just updated my code to look like this
<script type="text/javascript">
$(document).ready(function () {
$("#Attack1Id").click(function () {
$("#dialog").dialog({
title: "Dialog box",
height: 300,
modal: true,
open: function (event, ui) {
$(this).load("#Url.Action("FileTables", "Card")");
},
on: ('click', '.table a', function () {
alert($(this).closest('tr').find('td:first').text())
})
});
});
});
$(document).ready(
$("#dialog").dialog({
title: "Dialog box",
height: 300,
modal: true,
open: function(event, ui) {
$(this).load("#Url.Action("FileTables", "Card")");
},
on: ('click', '.table a', function(){
alert($(this).closest('tr').find('td:first').text())
})
})
);
</script>
and the modal works, it appears at the start of the page, i can close and then click on the input box and it appears again. But if I close the modal, re-open the modal and then click on view, it does two alerts, like it has created more than one... any ideas on how to fix this?
It seems there is some discrepancies between the use of $.find and $('selector').
This code return JavaScript Array object so any function of jQuery cannot be applied to resultset. Even when resultset seems to be identical.
See this post
Have you tried using $("#dialog") to select the dialog instead?
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Attack1Id").click(function () {
$("#dialog").dialog({
title: "Dialog box",
height: 300,
modal: true,
open: function (event, ui) {
$(this).load("#Url.Action("FileTables", "Card")");
},
on: ('click', '.table a', function () {
alert($(this).closest('tr').find('td:first').text())
})
});
});
});
</script>
Update:
I feel your script reference is not called in your page. Try to replace script references with below code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
How made JavaScript cohesion work? Lets me explain better: I have my index page that call models forms with jquery dialogs, but I don't want put all javascript in index page, instead I want the jquery separate for page.
Model form
This work
INDEX PAGE
#section Scripts
{
<link href="#Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready
(
function () //<--I dont want this function here
{
Alert1();
}
$(".Create").live
(
"click", function (e) {
var url = $(this).attr('href');
$("#dialog-view").dialog
(
{
title: 'Create new User',
autoOpen: false,
resizable: false,
height: 600,
width: 600,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(this).load(url);
},
buttons:
{
"Cancel": function ()
{
$(this).dialog("close");
},
"Save": function ()
{
$(this).dialog('close');
}
},
close: function (event, ui) {
$(this).dialog('close');
}
}
);
);
function Alert1() //<--I dont want this function here
{
alert("Star!");
}
</script>
}
How should work
INDEX PAGE
#section Scripts
{
<link href="#Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready
(
$(".Create").live
(
"click", function (e) {
var url = $(this).attr('href');
$("#dialog-view").dialog//<--Only opening dialogs
(
{ ....
);
</script>
}
And model forms with you specifics javascripts
#section Scripts
{
<link href="#Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready
(
function ()
{
Alert1();
}
);
function Alert1()
{
alert("Star!");
}
</script>
}
Actually, when I made it the model javascript don't work.
I'm using Entity-framework, thanks for everything.
SOLUTION
<script type="text/javascript">
$(document).ready
(
function ()
{
Alert1();
}
);
function Alert1()
{
alert("Star!");
}
</script>
Just remove the section "Scripts" {} from the Model file. You must have the renderSection("scripts") method only called within the Index page, which will only render the scripts files when the Index page loads and ignore any new script loaded.
<script type="text/javascript">
$(document).ready
(
function ()
{
Alert1();
}
);
function Alert1()
{
alert("Star!");
}
</script>