Popup won't popup in MVC - javascript

I'm trying to get a popup to appear from a link in an MVC page, but the popup isn't popping up. The partial view is just replacing the current page in the browser. Why isn't is just leaving my current page in place and giving me a popup? My partial view just has a few words of text in it.
#Ajax.ActionLink(
"Open popup",
"GetNotes",
new { id = "5" },
new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "result",
InsertionMode = InsertionMode.Replace,
OnSuccess = "openPopup"
})
<br />
<div id="result" style="display:none;"></div>
<script type="text/javascript">
$("#result").dialog({
autoOpen: false,
title: 'Title',
width: 500,
height: 'auto',
modal: true
});
function openPopup() {
$("#result").dialog("open");
}
</script>
UPDATE:
Here's the complete source (from "View Source") I'm currently trying. When I click the link, nothing happens. What's going on? Am I missing a js file or something?
By the way, this URL is returning my partial view (currently just a couple words of plain text):
http://localhost:40353/Quote/GetNotes/5
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="/Scripts/people.js" type="text/javascript"></script>
<script src="/Scripts/kendo.web.min.js" type="text/javascript"></script>
<script src="/Scripts/console.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="/Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="/Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="result" style="display:none;"></div>
open popup
<script type="text/javascript">
$("#result").dialog({
autoOpen: false,
title: 'Title',
width: 500,
height: 'auto',
modal: true
});
$("#OpenPopup").click(function () {
$("#result").dialog("open");
$("#result").load("Quote/GetNotes/5");
});
</script>
</body>
</html>

I think you are missing reference to "jquery.unobtrusive-ajax.min.js" script file in the <head> section of your Layout (Master) Page.
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

The reason the partial view replaces your view in the browsers is #Ajax.ActionLink renders as a formed tag in the browser. So when your click on the link your actually.
What I presume you want to do is open the popup and place the partial's contents into the popup?
There is a few ways to achieve this.
Change your actionlink to a normal open popup
open popup
And add this function
$("#OpenPopup").click(function() {
$("#result").dialog("open");
// This is a neat wrapper that does a get request to the url specified and loads the html into the target div
$("#result").load("/GetNotes/5");
});

Check as well in your _Layout at the bottom:
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
Remove
#Scripts.Render("~/bundles/jquery")
and the modal pop up will run.

Related

confirm dialog is not being called using Jquery

I need few customisation in confirm box in jsp which were not possible using javascript but after a bit research found that Jquery would be useful to accomplish this requirement.
Tried below code but when button click action was performed confirm box was not getting displayed, Confused and unable to understand the issue.
Below is my code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
<script type="text/javascript" >
$(document).ready(function(){
$("#docs").click(function(){
ConfirmDialog();
});
});
function ConfirmDialog(){
$('<div></div>').appendTo('body')
.html('<div><h6>'+"Do you want to export or open the document"+'?</h6></div>')
.dialog({
modal: true, title: '', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Export: function () {
$(this).dialog("close");
alert("your document is being saved");
},
Open: function () {
//
$(this).dialog("close");
alert("your document will open in another window");
}
},
close: function (event, ui) {
$(this).remove();
}
});
};
</script>
<button id="docs">xxx docs</button>
</body>
</html>
Depending on the comments.
make sure that you are importing the following script
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
and they should be called before you call ConfirmDialog
You need to include the jQuery UI library.
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

Open modal dialog onClick with JavaScript doesn't work

I know, this problem is postet here already in 236 variants. But even when I try to use those I understand, I don't get the correct behavior with my script. I have the following code (HTML and JS):
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var dialog, form
dialog = $('div#infoDialog').dialog({
autoOpen: false,
height: 600,
width: 500,
modal: true
});
$('#showInfos').click(function(e) {
e.preventDefault();
dialog.dialog('open');
});
});
</script>
</head>
<body>
<div id="infoDialog" title="Eventinfos">
Testeintrag
</div>
<button id="showInfos"><img src="images/apoa.gif" /></button>
<img src="images/apoa.gif" />
</body>
</html>
The button works fine as intended, but the "a href..." doesn't work at all. I already tried all alternatives I could think of, like dont use img's or try a # instead of the javascript: void(0) or like not use a variable dialog but always name it directly, but none worked. In the examples nearly the same code should worked fine. What did I do wrong?
I believe the problem is that both "buttons" are using the same ID. Either change the ID of one of them or switch them both to use classes (or some other selector).
IDs must be unique.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var dialog, form
dialog = $('div#infoDialog').dialog({
autoOpen: false,
height: 600,
width: 500,
modal: true
});
$('.showInfos').click(function(e){
e.preventDefault();
dialog.dialog('open');
});
});
</script>
</head>
<body>
<div id="infoDialog" title="Eventinfos">
Testeintrag
</div>
<button class="showInfos"><img src="images/apoa.gif" /></button>
<img src="images/apoa.gif" />
</body>
</html>
use class="showInfos" instead id="showInfos" and in js
$('.showInfos').click(function(e) {
e.preventDefault();
dialog.dialog('open');
});
find the jsbin here

CasperJS doesn't execute javascript of page

So i just want to open a webpage , but a big part of it are scripts read by the browser...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>MyAccount</title>
<link rel="stylesheet" href="/vendor.css" />
<link rel="stylesheet" href="/app.css" />
</head>
<body>
<div id="container">
// Here is the rest generated by the script. On chrome i can see it easily (inspect element)
</div>
<script type="text/javascript">
window.myAccountUrl = "http://urlsample";
</script>
<script type="text/javascript" src="/vendor.js"></script>
<script type="text/javascript" src="/app.js"></script>
<script type="text/javascript" src="/init.js"></script>
</body>
</html>
but with casper nothing appear in it. I use this settings:
pageSettings: {
loadImages: true,
loadPlugins: true,
javascriptEnabled: true,
localToRemoteUrlAccessEnabled: true,
XSSAuditingEnabled: true
}
And i render the html like that:
var js = this.evaluate(function() {
return document;
});
this.echo(js.all[0].outerHTML);
If anyone can help me, he's welcome. :)

Javascript dialog nonsense

I want a button on my page that will display a dialog asking for text and another button (to submit the information to email) onClick. I cannot get the dialog to show. I adapted an existing example on jsFiddle that displays the dialog onCreate; however, I need the dialog to be displayed when I click a button.
So here it is:jsFiddle
I believe the problem lies in the function call.
<p>Question</p>
This is the start of my HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My title · stuff</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/prettify.css" rel="stylesheet">
<link href="css/flat-ui.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.ico">
<style>
.containerx {
background-color: #1abc9c;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: scroll;
}
.imag{
padding-left:10px;
padding-top:10px;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/bootstrap-switch.js"></script>
<script src="js/flatui-checkbox.js"></script>
<script src="js/flatui-radio.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="bootstrap/js/google-code-prettify/prettify.js"></script>
<script src="js/application.js"></script>
<script>
function showDialog(){
$("#dialog-message").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'center'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"Send question": function() {
$(this).dialog("close");
}
}
});
}
</script>
You need to select No wrap option in jsFiddle (http://jsfiddle.net/3d7QC/1952/) otherwise showDialog is local function to that scope (in which jsFiddle puts it).
In case of your own page - don't forget to include jquery-ui.
My best guess is that jQuery UI is not loaded when the function is run. You'll need to move the jQuery UI script to be right after jQuery.
While you're at it, you could load the rest of your scripts before the inline one as well.

Shadowbox (js) as a popup

I'm playing with shadowbox and I want to launch it when user's landing on the index page of my web site.
I can use the shadowbox like that:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>title</title>
<!-- Set paramètres pour le shadowbox (CSS, JS? . . .) -->
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
My Image
</body>
</html>
I tried to make a onload function but it doesn't work (I can't set the link to the picture on it?):
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {onPageLoad()});
window.onload = function(){
Shadowbox.init();
};
</script>
</head>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Clemz</title>
<!-- Set paramètres pour le shadowbox (CSS, JS? . . .) -->
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// skip the automatic setup
skipSetup: true
});
window.onload = function() {
// open ASA the window loads
Shadowbox.open({
content: '<img src="image.png" alt="alt" />',
player: "html",
title: "Welcome dude",
height: 502,
width: 350
});
};
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Works proprely ;-)

Categories