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');
});
Related
I am using JQueryUI Dialog box to show a link. I have 20 buttons with 20 different links. I wan't to pass that link so the Dialog box knows which link to open.
Here is the code:
$(function () {
$(document).ready(function () {
$('#dialog').dialog(
{
autoOpen: false,
modal: true,
open: function (event, ui) {
var id = $(this).data('aid'); // It does not work here
$(this).load("Link?id=" + id);
},
hide:
{
effect: "explode",
duration: 500
}
});
});
$('input[type=submit]').click(function () {
var id = $(this).data('aid'); // Works here. I wan't to pass this.
$("#dialog").dialog("open")
});
});
MVC/Razor:
<input type="submit" value="Show" class="button" data-aid="#Model.item.id" />
Does anyone have any suggestions on how I can accomplish this?
Prior to opening the dialog, set a data property to #dialog - which is inturn accessible as this inside the open() callback:
$("#dialog").data('aid', $(this).data('aid')).dialog("open");
Now this should work:
...
open: function (event, ui) {
var id = $(this).data('aid'); // Now it will work here
$(this).load("Link?id=" + id);
},
...
I am using jQuery validate: http://bassistance.de/jquery-plugins/jquery-plugin-validation/ and cannot reset the validation messages to a default state. ie; not highlighted. What I trying to achieve, is if I close my dialog window, then the validator resets itself to a state as if the window was first opened. What is happening however, is when I close dialog by clicking the X and reopen, the error messages are still there. I am not sure where resetForm() should go and if I have to prepare a dialog ("close") procedure.
I have only posted the code that I think is relevant to the problem.
I would be grateful if someone could point out my error. Thanks
else if (this.name === 'Administration') {
$("#formShow").show();
// admin clicked
//$("#confirm_department").show().html("You have selected administration");
$("#formImage .col_1 li").hide();
var $dialog = $('#frmreport');
$dialog.dialog({
autoOpen: true,
modal: true,
title: 'Submit a ' + name + ' report',
width: 500,
height: 400,
draggable: false,
resizable: true,
// buttons: {
// Close: function() {
// $( this ).dialog( "close" );
// $("#frmreport").get(0).reset();
// }
// }
});
//$( '#frmreport' ).dialog( 'close' );
//$("#frmreport").get(0).reset();
//console.log(name);
$('input[name=dept]').val(name);
$(".subtitle").text("Submit " + name + " feedback report");
//code
}
EDIT: Updated code as per your comment
else if(this.name === 'Administration') {
$("#formShow").show();
// admin clicked
//$("#confirm_department").show().html("You have selected administration");
$("#formImage .col_1 li").hide();
var $dialog = $('#frmreport');
$dialog.dialog({
autoOpen: true,
modal: true,
title: 'Submit a ' +name+ ' report',
width: 500,
height: 400,
draggable: false,
resizable: true,
Close: function(event, ui) {
$("#frmreport").validate().resetForm();
}
// buttons: {
// Close: function() {
// $( this ).dialog( "close" );
// $("#frmreport").get(0).reset();
// }
// }
});
//$( '#frmreport' ).dialog( 'close' );
//$("#frmreport").get(0).reset();
//console.log(name);
$('input[name=dept]').val(name);
$(".subtitle").text("Submit " + name + " feedback report");
//code
}
Try this in your Close function:
$dialog.dialog({
close: function(event, ui) {
$("#frmreport").validate().resetForm();
}
});
This is the working solution !
var $form = $('#userForm');
$form.find("[data-valmsg-replace]")
.removeClass("field-validation-error")
.addClass("field-validation-valid")
.empty();
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) { }
})
);
}
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']);