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>
Related
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 questionis more of a debuggin/syntax error rather approach .
I have a function(modal confirmation) defined in an external js file which returns a value as such :
function confirmation(question) {
var defer = $.Deferred();
$('<div></div>').html(question).dialog({
autoOpen: true,
modal: true,
title: 'Confirmation',
buttons: {
"Delete All Items": function() {
defer.resolve("true"); //this text 'true' can be anything. But for this usage, it should be true or false.
$(this).dialog("close");
},
"Cancel": function() {
defer.resolve("false"); //this text 'false' can be anything. But for this usage, it should be true or false.
$(this).dialog("close");
}
},
close: function() {
//$(this).remove();
$(this).dialog('destroy').remove()
}
});
}
Now when I try to call the function inside the $(document).ready(function() {; I get an Uncaught Reference Error.
All the necessary files have been included in calling script. I would like to understand why is this and how i can solve the issue?
Except for the missing curly-brace at the end, and assuming your "necessary files" include jquery-ui, there doesn't seem to be anything wrong with your function. See this jsfiddle, which does not generate any error.
Perhaps the problem is elsewhere in your code? It may help if you can post a Minimal, Complete, and Verifiable example.
References:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.css" />
Script:
$(document).ready(function() {
confirmation("What's all this, then?");
});
function confirmation(question) {
var defer = $.Deferred();
$('<div></div>').html(question).dialog({
autoOpen: true,
modal: true,
title: 'Confirmation',
buttons: {
"Delete All Items": function() {
defer.resolve("true"); //this text 'true' can be anything. But for this usage, it should be true or false.
$(this).dialog("close");
},
"Cancel": function() {
defer.resolve("false"); //this text 'false' can be anything. But for this usage, it should be true or false.
$(this).dialog("close");
}
},
close: function() {
//$(this).remove();
$(this).dialog('destroy').remove()
}
});
}
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"/>
hello people I have s problem with implementing Vista-Like Ajax Calendar to my website.
To header.tpl add this lines:
<link rel="stylesheet" media="screen" href="Includes/plugins/DatePicker/styles/vlaCal-v2.1.css" type="text/css" />
<link rel="stylesheet" media="screen" href="Includes/plugins/DatePicker/styles/vlaCal-v2.1-adobe_cs3.css" type="text/css" />
<script type="text/javascript" src="Includes/plugins/DatePicker/jslib/mootools-1.2-core-compressed.js"></script>
<script type="text/javascript" src="Includes/plugins/DatePicker/jslib/vlaCal-v2.1-compressed.js"></script>
and this code:
<script type="text/javascript">
window.addEvent('domready', function() {
new vlaDatePicker('ptime', { style: 'adobe_cs3', offset: { y: 1 }, format: 'd.m.y', ieTransitionColor: '' });
});
</script>
Ajax calendar is not working in this format.
Next I edit code to:
<script type="text/javascript">
{literal}
window.addEvent('domready', function() {
new vlaDatePicker('ptime', { style: 'adobe_cs3', offset: { y: 1 }, format: 'd.m.y', ieTransitionColor: '' });
});
{/literal}
</script>
Calendar is not working with {literal}{/literal}.
What I do wrong? Where is a problem??
Try doing your js code in the template files like this.
{literal}
<script type="text/javascript">
window.addEvent('domready', function() {
new vlaDatePicker('ptime', { style: 'adobe_cs3', offset: { y: 1 }, format: 'd.m.y', ieTransitionColor: '' });
});
</script>
{/literal}
However I recommend putting Javascript in js files and then including them rather than using the code in the template itself.