We Keep Coding

Calling an external page into a modal window with ajax

I want to load an external page in a modal window. by default i've already added some text in the modal window, but i want to delete the text which says "<p> hello folks, good evening</p>" and instead call an external page into the modal window which contains a different message
var openModal = function () {
// close button
var closeBtn = $('Close');
// text you get from Ajax
var content = "<p> hello folks, good evening</p>";
// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
"data-role": "popup"
}).css({
width: $(window).width() / 0 + "px",
padding: 5 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$.mobile.pageContainer.append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("[data-role=popup]").popup({
dismissible: false,
history: false,
theme: "b",
/* or a */
positionTo: "window",
overlayTheme: "b",
/* "b" is recommended for overlay */
transition: "pop",
beforeposition: function () {
$.mobile.pageContainer.pagecontainer("getActivePage")
.addClass("blur-filter");
},
afterclose: function () {
$(this).remove();
$(".blur-filter").removeClass("blur-filter");
},
afteropen: function () {
/* do something */
}
}).popup("open");
};

If you are trying to load a page from an external website I would imagine it would be as simple as loading in an iframe and passing the URL to the site you want to load in. In your JQuery just change this line:
var content = "<p> hello folks, good evening</p>";
to
var content = "<iframe src='http://google.com' width='200' height='200'></iframe>";
Change the properties as needed. Hope that helps.

You can change your content var to equal '<iframe style="border: 0px; " src="YOUR_URL" width="100%" height="100%"></iframe>'. For example, '<iframe style="border: 0px; " src="http://jquery.com/" width="100%" height="100%"></iframe>'
I added your code to a fiddle so you can try it out:
http://jsfiddle.net/4pjndrsc/1/
Hope that helps. Best of luck!

If you prefer to load in the content from an external page rather than embedding an iframe, you can add the $.ajax call into your function:
var openModal = function () {
// close button
var closeBtn = $('Close');
// create the ajax call and create modal in the callback
$.ajax({
url: "content_page.html",
dataType: "html",
success: function (response) {
// text you get from Ajax
var content = response;
// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
"data-role": "popup"
}).css({
width: $(window).width() / 0 + "px",
padding: 5 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$.mobile.pageContainer.append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("[data-role=popup]").popup({
dismissible: false,
history: false,
theme: "b",
/* or a */
positionTo: "window",
overlayTheme: "b",
/* "b" is recommended for overlay */
transition: "pop",
beforeposition: function () {
$.mobile.pageContainer.pagecontainer("getActivePage")
.addClass("blur-filter");
},
afterclose: function () {
$(this).remove();
$(".blur-filter").removeClass("blur-filter");
},
afteropen: function () {
/* do something */
}
}).popup("open");
},
error: function () {
//handle error here
}
});
};

cant access element in dialog title

I can't seem to get a reference to the on click events of buttons in the titlebar but if they are in the regular content area of the dialog I can click them. Can anyone point me in the right direction to be able to register click events from the buttons in the title bar?
// Define the player details window dialog
var dialog = $(".graph-container").dialog({
autoOpen: false,
modal: true,
show: {
effect: "clip",
duration: 1000
},
hide: {
effect: "explode",
duration: 2000,
complete: function () {
console.log('complete');
}
},
width: modalWindow.width,
height: modalWindow.height,
resizable: false,
beforeClose: function (event, ui) {
console.log('before close function');
},
position: {
my: 'center',
at: 'center',
of: window
}
});
// Override the undocumented _title property to allow HTML in the title
// More info: http://stackoverflow.com/questions/4103964/icons-in-jquery-ui-dialog-title
dialog.data("uiDialog")._title = function (title) {
title.html(this.options.title);
};
dialog.dialog('option', 'title', '<span class="left">Stats for ' + player.PlayerName + ' - Last ' + $scope.gameFilter + ' games</span>' +
'<span class="right"><div id="dateButtonDiv">' +
'<button class="dateButton">5</button>' +
'<button class="dateButton">25</button>' +
'<button class="dateButton">100</button>' +
'</div></span>');
$(".graph-container").dialog("open");
$('.dateButton').click(function () {
var btn = this;
console.log('Date button clicked');
});

Your elements are coming dynamically into the dom so the normal click event will not work for them. you have to bind the event on the document object and delegate it to the dynamic class.
following code might work, you can try it in your case
$(document).on('click', '.dateButton' , function() {
var btn = this;
console.log('Date button clicked');
});

jqgrid - How to show edit form, when click on row?

I need to show an edit form when clicking on a row or when clicking on my custom button.
I can get the id of the row which was clicked, but how do I show the form and edit this row?

Use jQuery("#grid_id").jqGrid('editGridRow', rowid, properties );
For more detail see JQGrid Form Editing

Normally i will use a dialog to show the form. Here is the sample code, see whether meet your requirement or not
$('#button').click(function () {
showDialog("Your URL ",'TITLE', 400, 320);
});
function showDialog(url, title, iwidth, iheight) {
var dialog = $('<div id="divpopup"><iframe id="iframedit" src="' + url + '" style="width:' + iwidth + 'px;height:' + iheight + 'px;" frameborder="0" ></iframe></div>').appendTo('body');
//dialog.remove();
dialog.dialog({
title: title,
autoResize: true,
height: 'auto',
width: 'auto',
modal: true,
position: 'center',
draggable: true,
open: function (type, data) { },
close: function (type, data) { }
})
);
}

To trigger every time with .click()?

I tried to have a .click() on a <a> to find out it wont trigger every time I click, what it suppose to do is open a dialog.
That is not the only problem I would need to pass a value to my jquery to. I just cant figure this one out.
I need it to be a <a> because it's gone be in a dropdown menu. Do you got any suggestions?
EDIT
this is the code I use and it workes
$(document).ready(function() {
$('#dialog').dialog({ autoOpen: false, bgiframe: true, modal: true, height: 600, width: 1000, Close: function() { $(this).dialog('destroy'); } });
$('a').live('click', function(evt) {
evt.preventDefault();
var ids = $(this).attr('id');
var first = "<iframe style='width: 100%; height: 100%;' src='" + "" + "'</iframe>'";
$('.iframe').html(ids);
$('#dialog').dialog('open');
});
});
This code intilise the dialog, open on every click and it work every time, trick for me here was the 'destroy' at the end and the inilise

This will trigger on every click. Whilst I doubt this will be the case, check you haven't got any other event handlers listening on the 'a', that are applying event.stopImmediatePropagation(). Try adding a return false to the end of the click handler, or even better:
$('a').click(function(evt) {
var first = "<iframe style='width: 100%; height: 100%;' src='" + need to put value here + "'</iframe>'";
$('.iframe').html(first);
$('#dialog').dialog({ bgiframe: true, modal: true, height: 600, width: 1000 });
evt.preventDefault();
});
You might find that the page is reloading if you're not preventing the default action of the anchor tag, which would give the impression nothing is happening.
What sort of "value" are you thinking of? You can use jQuery's data() to store information, and of course you have access to all global variables in that scope.
EDIT:
To answer your comment, you can retrieve the ID of the a inside the click event as follows:
var theIdOfTheA = $(this).attr('id');
Note that this must be placed inside the handler.
EDIT2:
$('a').live('click', function(evt) {
var first = "<iframe style='width: 100%; height: 100%;' src='" + $(this).attr('id') + "'</iframe>'";
$('.iframe').html(first);
$('#dialog').dialog({ bgiframe: true, modal: true, height: 600, width: 1000 });
evt.preventDefault();
});

DEMO: http://jsbin.com/olalu/edit
make sure you close the dialog before open it again!
<a href='javascript:;' id='my_unique_id' >click</a>
EDITED
$('a').click(function(evt) {
evt.preventDefault();
var theIdOfTheA = this.id;
var first = "<iframe style='width: 100%; height: 100%;' src='" +
"http://www.sf.se" + "'</iframe>'";
$('.iframe').html(theIdOfTheA);
$('#dialog').dialog({
bgiframe: true,
modal: true,
height: 600,
width: 1000,
//this
Close: function() { $(this).dialog('close'); },
//OR this OR both
Cancel: function() { $(this).dialog('close'); }
});
});

You can pass data into an event handler by doing the following (from jQuery docs):
$('#foo').bind('custom', function(event, param1, param2) {
alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);
So you could do this:
$(document).ready(function() {
$('a').bind("click", function(event, myValue) {
var first = "<iframe style='width: 100%; height: 100%;' src='" + myValue + "'</iframe>'";
$('.iframe').html(first);
$('#dialog').dialog({ bgiframe: true, modal: true, height: 600, width: 1000 });
});
});
Note that you are now using bind() to bind the event handler, and the function is receiving a value (name it whatever you want). To show google in the iframe:
$('a').trigger('click', ['http://www.google.com']);

Jquery UI modal dialogs

I have a problem with Jquery UI modal dialogs. I have modal dialog (dialogA), which can create another modal dialog (dialogB). After the second creation and closure of the dialogB the overlay of dialogA disappear.
Here is my 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><link type="text/css" rel="Stylesheet" href="ui-lightness/jquery-ui-1.8.custom.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
function createDialog(dialogId) {
$('#' + dialogId).dialog({
autoOpen: true,
modal: true,
buttons: {
'close': function() {
$(this).dialog('close');
},
'create': function() {
var newDialogId = dialogId + '1';
$('body').append('<div id="' + newDialogId + '">' + newDialogId + '</div>');
createDialog(newDialogId);
}
},
close: function() {
$(this).dialog('destroy');
$(this).remove();
}
});
}
$(document).ready(function() {
$('#button1').click(function() {
var dialogId = 'dialog';
$('body').append('<div id="' + dialogId + '">' + dialogId + '</div>');
createDialog(dialogId);
});
});
</script>
</head>
<body>
<button id="button1">Create dialog</button>
</body>
</html>
http://jsbin.com/otama
Steps to reproduce:
1. create a dialog (dialog) by clicking on the button
2. create another dialog (dialogA) by clicking on the "create" button inside first dialog
3. close dialogA
4. repeat steps 2-3
5. overlay of the first dialog has been disappeared
Thanks

This issue was raised as bug and closed. Latest jQuery UI release (1.8.10) would solve this problem. Please check this ticket for more details.

This is what I came up with, since this is obviously a bug with the modal dialog, I can present you with a "hack" that will work, but I think that the reason it messes up is the fact that when you create a modal dialog it adds the
<div class="ui-widget-overlay"></div>
above the dialog div, and since you are appending all of the dialogs directly to the body, it gets confused which ones needs to close after awhile (this is only my assumption, which I really shouldn't be doing) :)
Workaround is to check on the number of dialogs and number of overlays every time CreateDIalog is called, and if they don't match, you manually insert a new overlay which will get rid of your problem. One thing with that is that, since this overlay was added manually, dialog doesn't know that it needs to hide it, so when you are back to only one dialog, and you close it, the overlay stays. That needs to be hidden manually as well.
I know this is not the best solution, but it's a workaround and it worked for me, so I hope you can use it until somebody comes up with a better solution.
here is the code:
function createDialog(dialogId) {
$('#' + dialogId).dialog({
autoOpen: true,
modal: true,
buttons: {
'close': function() {
$(this).dialog('close');
},
'create': function() {
var newDialogId = dialogId + '1';
$('body').append('<div id="' + newDialogId + '">' + newDialogId + '</div>');
createDialog(newDialogId);
}
},
close: function() {
$(this).dialog('destroy');
$(this).remove();
resetOverlays();
}
});
var dialogs = $("div.ui-dialog");
var overlays = $("div.ui-widget-overlay");
var overlayStyle = $(overlays[0]).attr("style");
if(dialogs.length > overlays.length)
{
var overlay = $("<div></div>").addClass("ui-widget-overlay").attr("style", overlayStyle).css("z-index", "1001");
$("body").append(overlay);
}
}
function resetOverlays()
{
var dialogs = $("div.ui-dialog");
if(dialogs.length == 0)
{
$(".ui-widget-overlay").remove();
}
}
I added the check for dialogs and overlays:
var dialogs = $("div.ui-dialog");
var overlays = $("div.ui-widget-overlay");
var overlayStyle = $(overlays[0]).attr("style");
if(dialogs.length > overlays.length)
{
var overlay = $("<div></div>").addClass("ui-widget-overlay").attr("style", overlayStyle).css("z-index", "1001");
$("body").append(overlay);
}
which takes care of adding an additional overlay when needed, and I added a function for reseting the overlay when you don't need it anymore
function resetOverlays()
{
var dialogs = $("div.ui-dialog");
if(dialogs.length == 0)
{
$(".ui-widget-overlay").remove();
}
}
which is called in the close section of the dialog script
,close: function() {
$(this).dialog('destroy');
$(this).remove();
resetOverlays();
}
I haven't had a chance to test it thoroughly, but it might be a start if nothing else..
good luck