i have this code that should create a dialog with the page google inside when the link is clicked:
<?php use_javascript('/sfJqueryReloadedPlugin/js/jquery-1.3.2.min.js') ?>
<?php use_javascript('/sfJqueryReloadedPlugin/js/plugins/jquery-ui-1.7.2.custom.min') ?>
<?php use_stylesheet('/sfJqueryReloadedPlugin/css/ui-lightness/jquery-ui-1.7.2.custom.css') ?>
<script type="text/javascript">
$(function (){
$('a.ajax').click(function() {
var url = this.href;
var dialog = $('<div style="display:hidden"></div>').appendTo('body');
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
}
);
//prevent the browser to follow the link
return false;
});
});
</script>
<a class="ajax" href="http://www.google.com">
Open a dialog
</a>
The problem: it shows the dialog but google is not inside.
I dont have any problems with:
<script type="text/javascript">
$(function() {
$("#dialog").dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
Any idea?
Javi
You cant make cross-domain ajax requests. This means that you cant GET the html from google.com and shove it into your dialog. If you want to have google show up in your dialog then you will probably want to use an iframe, or just write your own html to look like google and when they hit search open a new window with the results
For security reasons, you cannot make an AJAX request to a domain other than the domain that originally served the webpage. For examples of security risks, see http://en.wikipedia.org/wiki/Same_origin_policy
Instead, you should consider using a hidden iframe with the Google page loaded inside of it that will then appear in the correct location when the button is clicked.
For example:
<iframe src="http://www.google.com/" style="display:none">
<p>Your browser does not support iframes.</p>
</iframe>
Related
When I open a jQuery UI Dialog widget and the content in the dialog contains a textbox the dialog automatically closes when I press enter. This seems to happen only when using IE9 or IE10. I do not want the dialog the close when I press enter in the textbox.
I have the following HTML:
<!DOCTYPE html>
<html>
<head>
<title>Testpage</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myDialog').dialog();
});
</script>
</head>
<body>
<div id="myDialog">
Some text
<input type="text"></input>
</div>
</body>
</html>
When you open this HTML page the dialog will close when you press enter (only in IE9+). Any suggestions?
It looks like in jQuery UI 1.10.x the close button in the upper-right changed from an <a> to a <button>. Since this button doesn't specify a type attribute, it is considered to be type="submit". When you press enter in IE9+, the browser looks for a submit button, finds the close button, and presses it.
There are a couple of ways to work around this problem, I'd argue that the best way is to correct the type of the close button by overriding the _init function of ui.dialog:
var baseInit = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function () {
baseInit.apply(this, arguments);
// Make the close button a type "button" rather than "submit". This works
// around an issue in IE9+ where pressing enter would trigger a click of
// the close button.
$('.ui-dialog-titlebar-close', this.uiDialogTitlebar).attr('type', 'button');
};
If the dialog doesn't need to be autoopened, after the dialog has been created and before it's opened:
$("button.ui-dialog-titlebar-close").attr("type","button");
Also, if you have any button elements in the dialog html, be sure to explicitly include the type="button" attribute in them, or enter in the input control will fire an action associated with the button.
The different between IE9/IE10 and IE11 seems to be that ie9 and 10 activate on keydown, while ie 11 activates the submit button on keyup.
If you are handling keyup to take your own action, it will work on most browsers...except ie 9-10. Another solution is to override keydown, but be careful to still allow certain controls to get the enter key:
$(document).on('keydown', '.ui-dialog', function (e) {
var tagName = e.target.tagName.toLowerCase();
if (e.which !== $.ui.keyCode.ENTER) return true;
if (tagName === 'textarea') return true;
if (tagName === 'select') return true;
e.preventDefault();
return false;
});
I am using jquery mobile and a dialog to display some multiple select boxes. Some of the content is dynamically created with Ajax based on the selections. I would like to make the Ajax call when the dialog is closed (through the regular x button). The main parts of the html look as follows:
<a href="#queryPage" data-rel="dialog" data-transition="slidedown" >Filter Results</a>
<div data-role="page" id="queryPage" data-theme="a">
<div data-role="header" data-theme="a">
<h1>Select Filters</h1>
</div>
<div data-role="content">
<form action="" method="get" id="filterForm">
<fieldset id ="filterFields"></fieldset>
</form>
</div>
</div>
I am currently making the call by running the code on page hide as follows:
$('#queryPage').live('pagehide', function(event) {
//code for ajax call
});
However, I would like to make the call when the dialog closes because some of the select lists are large and they create a new page that hides the queryPage even though the dialog has not been closed. I have tried:
$('#queryPage').bind('dialogclose', function(event) {
alert('closed');
});
and also tried
$('#queryPage').dialog({close:function(event, ui){
alert("closed");
}});
These I have put in a function called on page load but the alert is not shown when the dialog is closed. Any help will be appreciated.
There are no specific events for dialogs as they are simply pages that are displayed as a dialog. Try the pagehide event.
$("#MyDialog").bind("pagehide",function(){
alert("Dialog closed");
});
Also, the first line of your sample code has a link that is outside of a <div data-role="page"> which should not be done.
Pagehide can be delegated as such:
$(document).delegate("#MyDialog", "pagehide", function() {
alert("Dialog closed");
});
and you will also have access to the screen elements of the calling page.
Andleer shared the appropriate event for closing the dialog using jquery. however, we can also code in this way.
$(document).on("pagehide","#Dialog",function(){
console.log('Dialog has closed.');
});
using jQuery UI 1.9.2 (upgraded from 1.8.23) and I see this on the Upgrade guide;
Deprecated url method and use of title attribute; use aria-controls attribute
(#7132) The url method has been deprecated in favor of leaving the href attribute unmodified even for remote tabs. The href attribute will point to the actual resource and the aria-controls attribute will point to the associated panel. This means that the title attribute will no longer be used to specify a custom panel id.
I have this code:
var $t = $("#tabs");
$t.tabs("url", 0, url);
$t.bind("tabsload", function (event, ui) {
console.log('tabsload fired');
});
$t.tabs("load", 0);
I cannot figure out how to set the url value for the tab (this code is fired when the user clicks on a grid row and the url value is rebuilt based on grid values) now as I do not understand the upgrade guide to use the aria-controls comment.
The approach I have taken is to set the href of the AJAX link and then call the load method to reload the content.
I appreciate that this does not use the aria-controls attribute, but the snippet from the upgrade guide states that this attribute points to the panel - remote tabs receive their content based on anchor contained in the li element, so I figured I should be able to use this approach.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Scripts/jquery-ui-1.9.2.custom/css/ui-lightness/jquery-ui-1.9.2.custom.min.css"
rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tabs').tabs();
$('#change-button').click(function (event) {
$('#ajax-link').attr('href', 'Handler1.ashx?echo=changed at ' + new Date().toTimeString());
$('#tabs').tabs('load', 0);
event.preventDefault();
});
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="tabs">
<ul>
<li>
<a id="ajax-link" href="Handler1.ashx?echo=some text to repeat">Tab 1</a>
</li>
</ul>
</div>
<button id="change-button">Change</button>
</form>
</body>
</html>
I am using a generic HTTP handler (this is the AJAX request) which simply echos back the text it is passed, e.g., Handler1.ashx?echo=some text to repeat. Note that my tabs consist of only one tab that makes an AJAX call to this handler.
To change the Url, I handle the click event of the button and modify the href of ajax-link like this and then reload it:
$('#ajax-link').attr('href', 'Handler1.ashx?echo=changed at '
+ new Date().toTimeString());
$('#tabs').tabs('load', 0);
So for this to work you will need to provide the link you wish to change with an ID and you will need to know at which position the tab page occurs.
I've got a problem when i using UI Tabs and load an external page into the tabcontent-DIV. When the page has loaded, all jQueries for this page seems not to work anymore. I read something about callbacks, but it's not clear at all.
Example: I load an external page by ui-tabs, and the loaded content includes a DIV, that should hide automatically as jQueried in index.html
The jQuery click-event is only added to show that a live-event is working.
But i can't get the auto-hide working, after loading the content.
index.html
<script type="text/javascript">
jQuery(document).ready(function() {
// define tabs
$('#tabs').tabs();
// after loading external page, the div "autohideafterload" will automatically hide.
$('#autohideafterload').hide('slow');
$('#autohideafterload').live('click', function() {
$('#autohideafterload').hide('slow');
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>Load data</span></li>
</ul>
</div>
<div id="tabcontent"></div>
</body>
</html>
loadcontent.html
<div id="autohideafterload">This div will hide automatically after loaded this external page.</div>
What am i missing?
Bind your events after the tab's load event is triggered...
$('#tabs')
.bind('tabsload', function(event, ui) {
$('#autohideafterload').hide('slow');
})
.tabs();
You're trying to bind to an element that doesn't (yet) exist. You need to bind after the item loads, and listening to the event is the best way to do this.
I am tryng to use this: http://jqueryui.com/demos/dialog/#modal-form
I have:
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog();
$("#dialog").dialog('close');
$('.myPop').click(function() {
$("#dialog").dialog('open');
});
});
Which allows me to pop-up on the click of '.myPop' which is just a temp input button in my list which is working:
<button type="button" class="myPop"></button>
My question is - what is the best way to use this pop-up to go to the Edit method of my controller, populate controls and then be able to save back to the model and refresh the list page?
I want to keep with best practice in ASP.Net MVC please.
Am I beetr maybe using this? http://dev.iceburg.net/jquery/jqModal/
Thanks
There's obviously a bunch of ways to do that, but here's how I would solve it. Perform an ajax call before loading the dialog to populate the dialog's contents, show the dialog, than on save close the dialog and refresh the grid. Those are the basics, there's some helper code below. I find it a good practice to return a json result from the save action to determine if the saved was successful, and if not an error message that indicates why it failed to display to the user.
<div id="dialog" title="Basic dialog">
<!-- loaded from ajax call -->
<form id="exampleForm">
<input blah>
<input type="button" onclick="Save()" />
</form>
</div>
<script>
$(function() {
$('.myPop').click(function() {
$.get("editController/loadContents", function(data){
$("#dialog").html(data);
});
$("#dialog").dialog('open');
});
});
function Save(){
$.post("/editController/Edit", $("#exampleForm").serialize(),
function(data){
$("#dialog").dialog('close');
//update grid with ajax call
});
}
</script>