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.
Related
I am creating a little game in jquery, where I want to show the user a little box, if they won the game.
The condition here is (correctcards ==10)
I tried to call dialog on it but it wont work.
Can anyone tell me why?
(I also aready tried to create a new div, when correctcards turn 10 and call dialog on it then, but it doesnt work as well)
if (correctCards == 10) {
endTime = new Date().getTime();
time();
console.log('Spiel endet');
$('#myDialog2').dialog({
autoOpen: true,
modal: true,
resizable: false,
draggable: false,
buttons: {
'Next Level': function() {
$(this).dialog('close');
},
'Close': function() {
$(this).dialog('close');
},
}
})
}
<div id="myDialog2">You won</div>
You need to create the dialog outside of your if.
$('#myDialog2').dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
buttons: {
'Next Level': function() {
$(this).dialog('close');
},
'Close': function() {
$(this).dialog('close');
},
}
});
var correctCards = 10;
if (correctCards == 10) {
console.log('Spiel endet');
$('#myDialog2').dialog('open');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<div id="myDialog2" style>You won</div>
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
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>
here is my simple jquery which is working fine in IE but not working in FF and Chrome
function publishRedirects() {
if (window.confirm("Are you sure want to publish the redirects?")) {
callJquery();
}
}
function callJquery() {
$('#btnPublish').click(function () {
$("#dialog").attr('title', 'Publishing').text('Publishing Please Wait').append("<img src='../images/loading11.gif' id='myNewImage' />").dialog({
draggable: false,
resizable: false,
modal: true,
closeOnEscape: false,
open: function (event, ui) {
$("a.ui-dialog-titlebar-close").remove();
}
});
});
}
This is my HTML:
<body> <div id="dialog"></div> <input name="btnPublish" class="button1" type="button" id="btnPublish" value="Publish" onClick="publishRedirects()"> <script type="text/javascript" src="../script/jquery.js"></script> <script type="text/javascript" src="../script/jquery-ui.js"></script> </body>
I think it is because you are assigning a click event to btnPublish instead of executing the function. if publishRedirects() is called on click of a button and you want the code in callJquery to execute after the user confirms the dialog box, it should look something like this: (notice the removed attach to click event)
function callJquery(){
var obj= $("#dialog");
obj.attr('title','Publishing');
obj.text('Publishing Please Wait');
obj.append("<img src='../images/loading11.gif' id='myNewImage' />");
obj.dialog({
draggable: false,
resizable: false,
modal: true,
closeOnEscape: false,
open: function(event, ui) {
$("a.ui-dialog-titlebar-close").remove();
}
});
}