A screenshot : http://d.pr/i/A4Kv
This is my dialog code:
function popupbox(title,html,buttonTxt,buttonAction) {
var buttons = {};
if(buttonTxt != null) {
buttons[buttonTxt] = buttonAction;
}
buttons['Cancel'] = function() {
jQuery(this).dialog('destroy').remove();
};
var p = jQuery('<form class="dialoginnerbox">' + html + '</form>');
p.dialog({
autoOpen: false,
resizable: false,
modal: false,
width: 'auto',
height: 'auto',
maxHeight: 600,
maxWidth: 980,
title: title,
close: function(event, ui){
jQuery(this).dialog('destroy').remove();
},
buttons: buttons
});
p.dialog('open');
}
Any ideas?
---- UPDATE ----
I swapped out the returning html for some dummy text and that fixed it.. so something with the html that is being put into the popup is making it open twice...
Malformed html and inline script tags cause jquery ui dialog to open multiple dialogs.
With jQueryUI dialogs; jQuery may consider valid html as malformed html in some cases. The reason I say this is I ajax loaded the html for my dialog with valid html and valid html comments. I got double dialog boxes until I removed the html comments from the ajax loaded html. Example...
content.htm
<div id="myDialogContent">Alert!</div><!-- Here is an innocent looking comment -->
dialog.js
$.get( '/content.htm', function( html ){
$( html ).dialog();
});
This would produce a double dialog. If the html begins or ends with an html comment, the same dialog issue occurs. The only way around is to either remove the html comment or wrap the html text in another html tag like so...
dialog.js
$.get( '/content.htm', function( html ){
$( '<div>'+html+'</div>' ).dialog();
});
This would produce one dialog.
function display_dialog() { if($('.dialog_wrapper').length) {
return;
}
$('<div class="dialog_wrapper"</div>').dialog({
autoOpen: true,
modal: true,
A workaround for this problem is to use a counter:
var count = 0;
var $dialog = $('<div></div>') .dialog({ ...
autoOpen: false,
modal: true,
height: 625,
width: 500,
title: pagetitle
...
});
if (count > 0) {
$dialog.dialog("destroy").remove();
count = 0;
}
$dialog.dialog('open');
count++;
worked for me... for the dialog issue, but i am getting multiple requests on the server ...
something like that: when i click for the first time on the link, it sends on information to the server. When i click for the second time (without refreshing the browser) it sends the same information twice. When i click for the third time, three requests are sent to the server, and so on...
If you wrap your html in a single tag, it may clean it up.
The inclusion of divs inside the html may cause a dialog for each one unless there's a layer above:
This didn't work for me:
<hr /> blah blah blah
<h3>blahblahtitle</h3>
<div id=somestufffirst>here's the stuff</div>
<div id=someotherstuff>here's some more stuff</div>
But this did:
<div>
<hr /> blah blah blah
<h3>blahblahtitle</h3>
<div id=somestufffirst>here's the stuff</div>
<div id=someotherstuff>here's some more stuff</div>
</div>
Related
I am trying to get a jquery ui dialog to open in a parent window from a child window. In other words, as the child can only have the dialog popup only with in its window's constraints, I would like to be able to use the contents of the dialog's popup in the constraints of the parent window.
I was trying to use a window.opener to tie in a link, but wasn't having much luck.
Here's the code that opens the window from a Backbone View HTML page:
popoutWindow = window.open("campaign/genericPopout.aspx", "search", "width=800, height=600, toolbar=0, status=0, menubar=0, scrollbars=1, resizable=1", true);
inside the genericPopout.apsx's call to a file that builds, with Backbone View, with this command,
new popupSearchView();
it calls the following Backbone View:
var popupSearchView = Backbone.View.extend({
events: {
"click #closeBtn" : "closePopupSerachView"
},
initialize: function() {
this.template = _.template("<div id='searchPopupView'>" +
"<div style='width: 100%; text-align: center;'>Hello World</div>" +
"<div style='text-align: center;'><input type='button' id='closeBtn' value='Close' /></div>" +
"</div>"
);
this.render();
},
render: function () {
formString = this.template();
$(formString).dialog({
autoOpen: true,
height:460,
width: 350,
title: "Search",
modal: false
})
return this;
},
closePopupSearchView: function () {
$(this).dialog("close");
}
});
It opens the popup dialog fine within the newly opened window, but it doesn't seem to work. In the parent window HTML, I have a div devoted to this dialog:
<div id="popupSearchViewDiv"></div>
and I tried setting the Backbone el to this div by this:
el: $("popupSearchViewDiv", window.opener.document)
yet this does not seem to work. Any thoughts on how I can accomplish this?
Thank You
I came up with a way to do this. I'm not sure how efficient it is, but it may be the only way.
In the opener window, I placed the code jquery-ui dialog:
function openSearchViewPopup() {
$("#popupSearchViewDiv").dialog({
autoOpen: true,
height:460,
width: 350,
title: "Search",
modal: false
}
With a predefined DIV in the index.aspx of:
<div id="popupSearchViewDiv"></div>
From the window opened from the index.aspx that holds the above function code, I call the function like this:
render: function () {
var htmlToWrite = this.template();
$(window.opener.docuemnt.getElementById("popupSearchViewDiv").append(htmlToWrite);
$window.opener.openSearchViewPopup();
}
This seems to allow the jquery-ui dialog popup to open in the window.opener window and to be used there.
I have a cakephp view (index.ctp) where I have edit button. On button edit I want the jquery dialog box open with what i have in edit.ctp. (Currently if I go to edit.ctp, it works fine but I am trying to use model / dialog box so the user stays on same page)
This is what I have in my index.ctp
<td>
<?php echo $this->Html->link($team['Company']['name'], array('action' => 'edit_reload','team_id'=>$team['Team']['id']), array('id'=>"dialog_link", 'class'=>"ui-state-default ui-corner-all"));?>
</td>
<div id="dialog" title="Dialog Title">
</div>
Now when the link clicked I want to show the edit_reload.ctp contents here. I am totally exhausted so any help will be appreciated
thanks
In a separate JS file write the following code and add your values to the variables and include the JS file in your .ctp file.
$(document).ready(function() {
$myWindow = $('#dialog');
//instantiate the dialog
$myWindow.dialog({ height: 250,
width: 200,
modal: true,
position: 'center',
autoOpen:false,
title:'',
overlay: { opacity: 0.5, background: 'black'}
});
$J("#dialog_link").click( showDialog );
});// end (document).ready
var showDialog = function() {
var team_id = '';
var url = '/controller/action/' + team_id;//Apply path to controller, action
$.post(url, function(res) {
$myWindow.dialog({
title:'Give Title'
});
$('#dialog').html(res);
$myWindow.show();
});
}
In .ctp file use the link as follows-
echo $this->Html->link($team['Company']['name'],'#', array('id'=>"dialog_link", 'class'=>"ui-state-default ui-corner-all"));
I have show you an example.You can also write the js code in the .ctp file also.
Okay, so I'm trying to display a dialog, and the contents of that dialog is from a partial view, _TestPartial.
Here is the partial view:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<div id="test" title="Basic dialog">
<p>This is just a test</p>
</div>
Now, if I put the test div in my .aspx that is displaying the dialog, it will show just fine. Or if I call the partial right from my page it will show 'This is just a test' just fine. I just have no idea how to make a jquery dialog display a partial. I've tried a few things, such as having my dialog call an Action, TestAction, which renders the _TestPartial, but that doesnt even work. I have a feeling I'm missing a key piece of code somewhere tho. Here is my dialog code(its called automatically based on a select list choice):
if ($('#SelectListID option:selected').text() == 'Test') {
$('#test').dialog({
width: 400,
resizable: false,
title: 'Test dialog',
open: function(event, ui) {
$(this).load("#Url.Action('TestAction')");
},
buttons: {
"Close": function (){
$(this).dialog("close");
}
}
});
}
I remember having a similar problem before. We added a dialog container and then loaded the partial view in an inner div.
<div id="dialogcontainer">
<div id="dialogcontent"></div>
</div>
$("#dialogcontainer").dialog({
width: 400,
resizable: false,
title: 'Test dialog',
open: function(event, ui) {
$("#dialogcontent").load("#Url.Action('TestAction')");
},
buttons: {
"Close": function (){
$(this).dialog("close");
}
}
});
I am wanting to pass a variable to a jquery dialog window. I am using classic ASP and have onyl really touched on the world of jquery. I have spent a few hours researching and tring to use the .data method but are having trouble. Your time and assitance would be very much apriciated!
Here is my stripped down page:
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
show: "slide",
hide: "fade",
width: 452,
modal: true,
buttons: {
"Ok": function() {
PostItNote.submit();
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
});
and this is how I call the window:
<a href='#' id='dialog_link' CLASS='OrangeButton'> Show Window </a>
and the contents of my window:
<div ID="dialog" TITLE="Periodic Report">
stuff here
</div>
Why can I not do this:
<a href='#' id='dialog_link(someValue)' CLASS='OrangeButton'> Show Window </a>
Thank you in advance
How it is used in the ASP loop is:
do until Products.EOF
--other code here---
<a href='#' id='dialog_link(Products(0))' CLASS='OrangeButton'>
--other code here---
products.moveNext
loop
The dialog is just a div on your page, so it can't really be "passed" a value. It can be manipulated by any JavaScript variables in scope though. You could change your click handler to use a variable to manipulate the dialog:
var myVariable = "Some new text for the dialog";
$('#dialog_link').click(function(){
//New code to "pass" a value to the dialog
$('#dialog').text(myVariable);
$('#dialog').dialog('open');
return false;
});
Or you could use the open member of the dialog:
...
width: 452,
open: function() { $('#dialog').text(myVariable); },
modal: true,
...
To make changes to the dialog div whenever it is opened.
The code id='dialog_link(someValue)' will not do anything, as the id attribute cannot make function calls, only event handlers like onchange can do that. Even if it could, dialog_link is not a function that can be passed a value. It is just the id of another element.
I'm sure you're probably already aware, but the jQuery documentation is very useful- here are the docs for dialog.
Edit
In response to your comment: I would drop the $('#dialog_link').click(); statement and change the link code to the following:
<a href='#' class='OrangeButton' onclick='openDialog(someValue);'>Show Window</a>
And then add the JavaScript function to be called on the click event:
function openDialog(value) {
$('#dialog').text(value);
$('#dialog').dialog('open');
}
Edit 2
Inside of the ASP loop something like this should do the trick:
Response.Write("<a href='#' onclick='openDialog(" & Products(0) & ");'>Show</a>")
This will create an <a></a> element on the page with an onclick handler that passes the desired value to openDialog, making it accessible by the dialog.
I changed the code for the link slightly so that it all fit on one line, but you could always add back the class='OrangeButton' and all that if you'd like.
I have 2 div one to load data from an ajax request and another to display Jquery dialog with gif image which says loading.
The jquery dialog is displayed when the page is requested while the ajax function gets the data from the controller. I want to close the dialog when the ajax function completes the request but not sure hot to do it.
here is the code
Page
<style>
.ui-dialog-titlebar-close{
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//define config object
var dialogOpts = {
title:"Retreving Donation Details",
modal: true,
autoOpen: true,
height: 200,
width: 250,
closeOnEscape: false,
resizable: false,
};
$("#ajaxload").dialog(dialogOpts); //end dialog
$("#ajaxload").dialog("open");
});
</script>
//jquery dialog
<div id = "ajaxload" style ="display:none; background-color:Green; text-align:center;">
<br />
<img alt="loader" src = "../../Content/loader.gif" id = "loader" height="100" width ="100" style = "margin:auto; text-align:center; vertical-align:middle;" />
</div>
//Div to load data
<div id="dataload"><div>
Thanks in advance
You can close it when the ajax requests stop using the ajaxStop event, like this:
$(document).ajaxStop(function() {
$("#ajaxload").dialog("close");
});
When all concurrent jQuery AJAX requests finish, this event fires, and you can hide the dialog then. Another (same effect) format is to bind the event directly, like this:
$("#ajaxload").ajaxStop(function() {
$(this).dialog("close");
});