I am trying to create a reusable Header object with a right button. I'm having problems on my callback method on the button click. It's never called.
My object:
myHeader:function(params)
{
opt = {
title: "Title", //header tittle
fs: PrecApp.DEFAULT_HEADER_FONTSIZE, //font size
ignoreStack :true, //ignore stack
height: "70", //header height
rightButton: {
show :false, //show right button
background: "none", //background for right button
text: "Button", //text for right button
width: "auto",
height:"auto",
color:"black",
fontize:1,
extraCss: null,
onClick:function(){}
}
}
for (i in params) opt[i] = params[i];
if (opt.rightButton.show){
var right = $("#header .right");
right.click(opt.rightButton.onClick);
}
}
And in my html :
function updateLayout(){
PrecAppComponents.myHeader({
title:"My Title",
fs:1.5,
height:50,
rightButton:{
show:true,
background:"#ffff00",
text:"Right",
width:70,
height:30,
fontsize:1.1,
extraCss: {"float":"left", "font-size":"0.5em"},
onClick: PrecAppComponents.toggleDarkOverlay(true)
}
}
Everything else is working fine. If i replace
right.click(opt.rightButton.onClick);
with
right.click(function(
console.log("clicked")
));
It works fine. What am I doing wrong?
It looks like your onClick option is calling a function. Unless that call is returning another function, this won't work:
onClick: PrecAppComponents.toggleDarkOverlay(true)
You'd have to change it to something like:
onClick: function() {
PrecAppComponents.toggleDarkOverlay(true);
}
// or with bind, perhaps
onClick: PrecAppComponents.toggleDarkOverlay.bind(PrecAppComponents, true);
Try encapsulation in an anonymous function:
right.click(function(){opt.rightButton.onClick();});
Seems like PrecAppComponents.toggleDarkOverlay(true) does not return a function to be called as an event handler - you execute it immediately. You will need to use
function(e) {
PrecAppComponents.toggleDarkOverlay(true);
}
or
PrecAppComponents.toggleDarkOverlay.bind(PrecAppComponents, true)
Related
I have a jquery-ui button test-button that has a data attribute.
That button calls a custom widget customWidget that has a callback function fnSaveCallback.
$(".test-button").button({
icons: {
primary: 'icon-test icon-mixed icon-custom'
},
text: false
}).customWidget({
id: "custom-widget",
title: "My custom widget",
fnSaveCallback: function() {
// Need to get the data-test attribute from the "test-button"
}
});
I'm having problems trying to access the the test-button in order to get the value of the data-attribute from the callback function.
Any idea how can i do that? Thanks in advance!
I've found an easy way to handle this adding a class on the click event.
$(".test-button").button({
icons: {
primary: 'icon-test icon-mixed icon-custom'
},
text: false
}).click(function() {
// remove opener class from other test-buttons
$(.test-button.opener).removeClass("opener");
// add opener class to the clicked button
$(this).addClass("opener");
}.customWidget({
id: "custom-widget",
title: "My custom widget",
fnSaveCallback: function() {
// Get the data-test attribute from the "test-button"
$(".test-button.opener").data("test");
}
});
You need to have a reference of the element somewhere.
const test_button = document.getElementById('test-button');
and then in fvSaveCallback:
fnSaveCallback: function() {
// Need to get the data-test attribute from the "test-button"
console.log(test_button.dataset.test);
}
EDIT: After your edit, as far as I understand you are trying to apply that method to all .test-button buttons.
You should only need to get a list of nodes, and iterate through it :)
const test_buttons = document.getElementsByClassName('test-button')
;
for (let i = 0; i < test_buttons.length; i++)
{ const button = test_buttons[i]; //This is the button
// Do with 'button' whatever you want here.
console.log(button.dataset.some_data);
}
Guys I have 2 questions which is i think related in some ways I guess. First:
What is the difference between these two:
$(document).on('click','#someselector', function() {
//do something
});
vs this
$('#selector')on('click', function(){
/do something
});
Sometimes both works, sometimes it doesn't.
Number 2 question:
I created a jQuery UI dialog like this:
function this_dialog(id) {
$("#div-id-for-the-dialog").dialog({
autoOpen : false,
modal : true,
draggable : false,
width : 400,
buttons : [{
id : id,
text : 'Ok'
},{
text : 'Cancel',
click : function () {
$("#div-id-for-the-dialog").dialog('close');
}
}]
});
}
So as you can see, the id is passed to the function, many will call this dialog and pass a unique id to it. The id will then be assigned only to the Ok button.
So when i call this function to load a unique dialog:
add_section_complete_reopen_dialog('my-unique-dialog-id'); //passing the id
$('#div-id-for-the-dialog').html("I have a unique dialog now? ok?");
When i press ok with this code:
$(document).on('click','#my-unique-dialog-id', function () {
//Do some ajax call here
});
I get this JS error: TypeError: s is undefined
But the ajax is successful. I just want to know what that error is.
So when I say it is related to the first question is because when i replace the click code with this:
$('#my-unique-dialog-id').on('click', function () {
//Do some ajax call here
});
It doesn't work anymore.
Thanks
$(document).on('click', 'someselector', function() ...);
is delegation syntax. It allows you to bind a handler to elements that may not exist at the time that you execute the code. See:
Event binding on dynamically created elements?
$('someselector').on('click', function() ...);
only binds the handler to the element(s) matching the selector at the time you execute this code.
I marked the first answer correct because I know I did not put enough info on how to debug the second question, but In case someone might encounter the same error i had, I found out why. So when you initialize your jQuery UI dialog like this:
function this_dialog(id) {
$("#div-id-for-the-dialog").dialog({
autoOpen : false,
modal : true,
draggable : false,
width : 400,
buttons : [{
id : id,
text : 'Ok'
},{
text : 'Cancel',
click : function () {
$("#div-id-for-the-dialog").dialog('close');
}
}]
});
}
Make sure to include the click event of the buttons like this:
function this_dialog(id) {
$("#div-id-for-the-dialog").dialog({
autoOpen : false,
modal : true,
draggable : false,
width : 400,
buttons : [{
id : id,
text : 'Ok',
click : function () {
//include the click event, even if you have nothing to put here.
}
},{
text : 'Cancel',
click : function () {
$("#div-id-for-the-dialog").dialog('close');
}
}]
});
}
What I want is that I have few links like
sample Link 1 sample Link 2
and I want to call the static html when user clicks the link. For that I have written a code
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.popup-link').on('click',
function() {
var dialog = new A.Dialog({
bodyContent: 'Loading...',
centered: true,
title: 'Sample Popup Content',
width: 400,
height:600
}
).render();
dialog.plug(
A.Plugin.IO,
{
autoLoad: false,
uri: '/html/sample.html'
}
);
dialog.io.start();
});
});
but this does not work, it simply does not call the function when I click the link, I also tried this, but same thing
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.sample-popup').each(function() {
this.on('click', function(A){
.....
......
Any idea what is wrong here?
Finally I got why it was not working. I was using the same object "A" in the click function as well.
it should be like this: (have a look at the variable name event)
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.sample-popup').each(function() {
this.on('click', function(event){
.....
......
I don't know much about AUI but if you want to achieve same task using jQuery you can achieve like this
i.e
<script>
$(document).ready(function() {
$('.popup-link').click(function(){
alert($(this).text());
});
});
</script>
Or
Using Javascript
i.e
Link
<script type="text/javascript">
function theFunction () {
// return true or false, depending on whether you want to allow the `href` property to follow through or not
}
</script>
HTH
I have a anchor tag in my page for logout.
<a href="/logout/" id="lnk-log-out" />
Here I am showing a Popup for confirmation with jQuery UI dialog.
If user click Yes from dialog it has to execute the link button's default action, I mean href="/logout".
If No clicked a Popup box should be disappeared.
jQuery Code
$('#lnk-log-out').click(function (event) {
event.preventDefault();
var logOffDialog = $('#user-info-msg-dialog');
logOffDialog.html("Are you sure, do you want to Logout?");
logOffDialog.dialog({
title: "Confirm Logout",
height: 150,
width: 500,
bgiframe: true,
modal: true,
buttons: {
'Yes': function () {
$(this).dialog('close');
return true;
},
'No': function () {
$(this).dialog('close');
return false;
}
}
});
});
});
The problem is I am not able to fire anchor's href when User click YES.
How can we do this?
Edit: Right now I managed in this way
'Yes': function () {
$(this).dialog('close');
window.location.href = $('#lnk-log-out').attr("href");
}
In the anonymous function called when 'Yes' is fired, you want to do the following instead of just returning true:
Grab the href (you can get this easily using $('selector').attr('href');)
Perform your window.location.href to the url you grabbed in point 1
If you want the a tag to just do it's stuff, remove any preventDefault() or stopPropagation(). Here I have provided two different ways :)
Don't use document.location, use window.location.href instead. You can see why here.
Your code in the 'Yes' call should look something like, with your code inserted of course:
'Yes': function () {
// Get url
var href = $('#lnk-log-out').attr('href');
// Go to url
window.location.href = href;
return true; // Not needed
}, ...
Note: Thanks to Anthony in the comments below: use window.location.href = ... instead of window.location.href(), because it's not a function!
I have used this in many of my projects so i suggest window.location.href
'Yes': function () {
$(this).dialog('close');
window.location.href="your url"
return true;
},
I have added a custom edit button control on the jqGrid navigator as follows:
jQuery("#grid").navButtonAdd('#pager',
{
caption:"Edit",
buttonicon:"ui-icon-pencil",
onClickButton: editSelectedRow,
position: "last",
title:"click to edit selected row",
cursor: "pointer",
id: "edit-row"
}
);
So that rather than use the default function: editGridRow, it uses my custom function editSelectedRow. However, I also want to add the doubleClick function to so that it calls editSelectedRow on doubleClick.
using the default editGridRow function works as such
ondblClickRow: function()
{
var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
jQuery(this).jqGrid('editGridRow', rowid);
}
However, when I replace the default editGridRow function with my default function editSelectedRow as such,
ondblClickRow: function()
{
var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
jQuery(this).jqGrid('editSelectedRow', rowid);
}
I get the following error within firebug:
uncaught exception: jqGrid - No such method: editSelectedRow
The function editSelectedRow however does exist and works with clicking the custom edit button. Please help, thanks.
UPDATE:
#Oleg: As requested here's the code defining method: editSelectedRow
function editSelectedRow(rowid)
{
var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
if( rowid != null )
{
var dialogId = '#edit-form-dialog';
var dialogTitle = 'Edit Customer';
$(dialogId).load('/customer/edit/id/' + rowid, function ()
{
$(this).dialog(
{
modal: false,
resizable: true,
minWidth: 650,
minHeight: 300,
height: $(window).height() * 0.95,
title: dialogTitle,
buttons:
{
"Save": function ()
{
var form = $('form', this);
$(form).submit();
$("#grid").trigger("reloadGrid");
},
"Cancel": function ()
{
$("#grid").trigger("reloadGrid");
$(this).dialog('close');
}
}
});
LaunchEditForm(this);
});
}
else
{
jQuery( "#dialogSelectRow" ).dialog();
}
return false;
}
#Oleg: Thanks, you advised against using a custom method editSelectedRow in place of method editGridRow. The reason I am using this is that my forms are Zend Forms and I need all the bells and whistles of Zend Form to be available. The server generates this form and it's loaded into a dialog form. If there's a way to still achieve this without resorting to my editSelectedRow custom method, I'd be glad to learn it. Thanks.
You question is pure JavaScript question.
If you define the function editSelectedRow as
function editSelectedRow(rowid)
{
...
}
you can call it as editSelectedRow(rowid) and not as jQuery(this).jqGrid('editSelectedRow', rowid);.
Another problem is that you use this inside of he body of editSelectedRow function. It's not correct. You can define editSelectedRow function in a little another way
var editSelectedRow = function (rowid) {
...
};
In the case editSelectedRow will be able to bind this to any value. To do this you need use another form of invocation of the function. Inside of ondblClickRow it will be
ondblClickRow: function () {
var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
editSelectedRow.call(this, rowid);
}
In the above example the first parameter of call is the value used as this inside of the function. We forward just the current this value forward to editSelectedRow. If we would use the form editSelectedRow(rowid); for the invocation of the function the value of this inside of function will be initialized to window object.
The usage of editSelectedRow inside of navButtonAdd can stay unchanged.