We Keep Coding

How to modify/append inside a function in Javascript or jQuery

In one of my js files, I am using a jquery-UI dialog function to display both confirmation messages and user inputs, according to parameters of the function.
( The following question is more about “the way to do it” if it is possible, rather than about “jquery-UI dialog”, that's why I titled this topic with “Javascript” )
Here is the simplified content of my function, to focus on the question :
function dialog_Handler({title, message, buttons, input}){
// Creates object with autoOpen: false to be able to modify it before opening
var dialog = $("<p>" + message + "</p>").dialog({
autoOpen: false,
open: function(event, ui){
$("div.ui-widget-overlay").css({"background": "#000", "opacity": "0.4"});
$(".ui-widget-overlay").hide().fadeIn();
},
title: title,
buttons: buttons,
modal: true,
});
// Adds some more configuration if input needed
if(input){
// Adds input field right under the message
dialog.dialog({
open: function(event, ui){
$("div.ui-widget-overlay").css({"background": "#000", "opacity": "0.4"}); // SAME AS ABOVE
$(".ui-widget-overlay").hide().fadeIn(); // SAME AS ABOVE
$(this).append('<br /><br /><input type="text" value="' + input + '"><br />');
},
});
}
// Dialog opening
dialog.dialog("open");
return;}
As you can notice, when input is needed (!= false), I have to “append” an instruction in the “open” function of dialog.
Is there any way to add something in the function instead of rewriting it completely ?
Something that would look like this ?
dialog.dialog({
open: function.append{
$(this).append('<br /><br /><input type="text" value="' + input + '"><br />');
},
});
Thanks in advance for any reply.

How to call callback function of jquery html() method

Below is my jquery code which do following thing:
Load the content form URL and fill into DIV.
Bind the data into html form.
Problem: first time, it bind correct data and after each call, it just load the empty form (and data not populated which called through BindForm function as shown below.)
When I tried replace - tag.html with $("#div").load(url,function(){}) then it works but, using below code not work.
Now, I can not change implementation to use load but, any alternative or solution in below code will helpful.
Basically, I need $("<div id=" + diaolgID + "></div>") line to preserve as it is and then load dialog within this.
var tag = $("<div id=" + diaolgID + "></div>");
$.ajax({
url: url,
cache: false,
success: function(data) {
var htmlContainerObject = tag.html(data);
htmlContainerObject.dialog({
modal: true,
hide: {
effect: "none",
duration: 150
},
show: {
effect: "none",
duration: 150
},
title: title,
width: 950,
height: 'auto'
}).dialog('open');
BindForm();
}
});

Change your first line to this:
var tag = $('<div id="' + diaolgID + '"></div>').appendTo('body');

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');
});

Creating popup from an iframe using jquery

I have a popup which loads html file with java script sources attached. this pop up is created by an iframe. the html inside the iframe has link which is expected to create another popup but the iframe is not allowing me. is there anyway i can create another popup using the parent page or get ride of the the iframe.
the code that creates the first popup is the following:
function GetPopUp ("../folder/file.htm", "POPUP Title")
{
var xpos = mouse_x;
var ypos = mouse_y;
var windowID = $(href.split('/')).last()[0].split('.')[0];
var $dialog = $("#" + windowID)
var dimensions = GetPopUpDimensions(windowID);
$('body').after('<iframe id="' + windowID + '" style="padding:0;" src="' + href + '"> </iframe>');
$dialog = $("#" + windowID)
$dialog.dialog(
{
autoOpen: false,
title: title,
position: 'center',
sticky: false,
width: dimensions.DialogWidth,
height: dimensions.DialogHeight,
draggable: true,
resizable: false,
modal: true,
close: function () {
$(this).dialog('destroy');
$("#" + windowID).remove();
}
});
$dialog.load(function () {
$dialog.dialog('open');
$dialog.css("width", "100%"); // reset the width that is set by jquery UI
});
}

I used window.parent to call the function which creates the second popup and its working.

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']);