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']);
Related
I'm creating a form using javascript which is actually a modal dialog.
I'm having trouble figuring out how to attach an id tag when I try to set it up.
This is how I'm creating the line in js
tmpString += "<div id=\"dialog-modal\" class=\"widget-dialog-container\" title=\"Complete Your Order\">";
...
...
var handle = document.getElementById('content');
handle.innerHTML = tmpString;
Now I'm trying to access it this way
$(document).dialog( {
height: 800,
width: 800,
modal: true,
autoOpen: false
});
I do know that I have to have $(document) because the dialog is being created in code. but I don't know how to give it the #dialog-modal so I can access it. Any help would be greatly appreciated. Thanks
You need to call your popup like this
$("#dialog-modal").dialog( {
height: 800,
width: 800,
modal: true,
autoOpen: false
});
at any time use
$("#dialog-modal").dialog("open");
to open it.
Dynamic html popup append
$(document).ready(function () {
var tmpString = "<div id=\"dialog-modal\" class=\"widget-dialog-container\" title=\"Complete Your Order\">";
var handle = document.getElementById('content');
handle.innerHTML = tmpString;
$("#dialog-modal").dialog({
height: 800,
width: 800,
modal: true,
autoOpen: false
});
})
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');
});
I want to add a jQuery dialog using an string containing html code stored in a variable. Is it possible? Here is some of the tried code.
$("#remove-post").dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
modal: true
});
$("body").delegate("a.delete-post", "click", function (e) {
e.preventDefault();
button = $(this);
remove_dialog_html = '<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>';
$('#remove-post').dialog("open");
});
You can simply change the html of this element.
$('#remove-post').html('<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>');
jsFiddle Demo
Edit:
You can also avoid adding the dialog to the original HTML file, by creating and destroying it when you open and close the dialog.
$('<div></div>')
.appendTo('body')
.html(htmlContent)
.dialog({
autoOpen: true,
height: 'auto',
width: 'auto',
modal: true,
close: function (event, ui) {
$(this).remove();
}
});
jsFiddle Demo
You cannot initialize jQuery dialog like this since it is not in the DOM at the page load time (where jQuery initialize the stuff).
What you have to do is that initialize dialog after adding the html to the DOM.
Just before $('#remove-post').dialog("open");
Are you looking for something like this. Check the fiddle below. Changed the code as per your requirement if this is what you are looking for.
http://jsfiddle.net/8R7xA/1/
$("#remove-post").dialog({
autoOpen: false,
height:'auto',
width:'auto',
modal: true
});
$(document).ready(function(){
var remove_dialog_html= '<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>';
$('#remove-post').html(remove_dialog_html);
$('#remove-post').dialog("open");
});
Please Refer this link link
Thanks!!
Edit: Try this:
$(document).ready(function () {
$("#divModifyDatesDialog").dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
position: "center",
width: 550,
buttons: {
"Yes": {
click: function () {
-------------
},
"No": {
click: function () {
------
}
}
}
});
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.
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) { }
})
);
}