I'm using ExtJS 5.1.1
I'm trying to trigger a button click event or simply excute the event handler of this button.
View File:
{xtype: 'button',
itemId: 'searchBtn',
listeners:{
click: 'mainSearch'
}
}
Controller File:
specialKeySearch: function(event){
if (event.getKey() == event.ENTER){
// Trigger 'mainSearch' event handler or click event of button
}
}
mainSearch: function(){
alert("something");
}
I tried so many options, but none of them works. so please point out where the issue is. Below are some I have tried:
1.
document.getElementById('searchBtn').click();
2.
Ext.ComponentQuery.query('#searchBtn')[0].fireEvent('click', Ext.ComponentQuery.query('#searchBtn')[0]);
3.
parent.child('button[itemId=searchBtn]').fireEvent('click', parent.child('button[itemId=searchBtn]'));
Please tell how to trigger a button click event or simply excute the event handler of this button.
Thanks in advanced!
This is more of a JavaScript question than ExtJS. But try tempResult.data[tempKey]
Related
I'm having modal pop-up with some validation, when I click on button it opens that modal with two text boxes and when I type there value I've some validation that put some text in case the entry is not valid, now when I close the modal and open it again I see the errors.
I want to refresh the modal after close or in every time that I open it, any idea what is wrong here?
I've tried the following and its not working ...I can see the alert but the modal is not refreshed.
function close() {
alert("test");
//$("#MYModal").removeData('bs.modal').empty();
//$(document.body).removeClass('modal-open');
$("#MYModal").removeData();
}
Threre was suggestion to use the following
$(document).on('hidden.bs.modal', function (e) {
$(e.target).removeData('bs.modal').html('');
});
But the problem is that after I close the modal its not opend...
The removeData method removes data attached to elements. What you want to do is just find the inputs inside the modal and set the value of the to empty strings.
$(document).on('hidden.bs.modal', function () {
$(this).find('input').val('');
});
DEMO
reset form data when popup open
$('#myModal').on('shown.bs.modal', function (e) {
$('#form_id')[0].reset();
})
I use this script to create a pull down box, works perfectly excepting a single thing. If i add a link in that box, pressing it will result in no action. Shortly the links don't work in this script.
Could anyone tell me what's wrong?
Script:
function prepareList() {
$('#expList').find('li:has(ul)')
.click(function (event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
};
$(document).ready(function () {
prepareList()
});
Your event handler is trapping the click on the URL and the "return false" is cancelling it.
Try removing the false.. not sure you need it in this implementation..
Andrew
I would like to know how can I fire an event from code. In jQuery to fire a "onchange" event you would simply $("selector").trigger("change"). Is there a way to do the same using WinJS.
[All suggestions of including jQuery will be discarded]
Thanks.
fireEvent is probably what you want.
Fires a specified event on the object.
Given that markup
<p>
<button
id="oButton"
onclick="this.innerText='I have been clicked!'">Button
</button>
</p>
You can do
oButton.fireEvent("onclick");
In your ready function:
WinJS.Utilities.query("#yourSelector").listen("change", this.customClicked, false)
And then define customClicked function (can be named anything)
customClicked: function(eventInfo){
<!--do stuff -->
}
You can use event.initUIEvent:
var button = document.getElementById('button');
var еvent = document.createEvent("UIEvents");
еvent .initUIEvent("click", false, false, window, 1);
button.dispatchEvent(еvent );
More info can be found here
To fire and respond to a custom event do this.
fire the event
WinJS.Application.queueEvent({type: 'ev_login_completed'})
to respond to the custom event
WinJS.Application.addEventListener('ev_login_completed', function (e) {
// do stuff })
HTH
I have a typical primefaces dialog and it works great but I can't find any options to have it close when someone clicks outside the dialog. I have seen a few jquery examples and I'm guessing I can adapt those for the primefaces dialog but first wanted to make sure there wasn't a solution already?
Thanks.
Just sharing my solution that works globally for any modal dialog. Code adapted from http://blog.hatemalimam.com/get-widgetvar-by-id/ .
When you show a dialog, a mask (that has the .ui-dialog-mask class) is created, and it has the id of the opened dialog, appended with a "_modal" keyword.
This scripts gets that id when that mask is clicked, removes that appended text, and finds the corresponding widget to be closed.
To use it, just save the code on a .js file, import on your page and it will work.
Tested on Primefaces 6.0.
/**
* Listener to trigger modal close, when clicked on dialog mask.
*/
$(document).ready(function(){
$("body").on("click",'.ui-dialog-mask',function () {
idModal = this.id;
idModal = idModal.replace("_modal","");
getWidgetVarById(idModal).hide();
})
});
/**
* Returns the PrimefacesWidget from ID
* #param id
* #returns {*}
*/
function getWidgetVarById(id) {
for (var propertyName in PrimeFaces.widgets) {
var widget = PrimeFaces.widgets[propertyName];
if (widget && widget.id === id) {
return widget;
}
}
}
You can write a javascript function for onClick event and close the dialog.
<h:body onclick="closeDialog();">
function closeDialog(){
widgetWarDialog.hide();
}
I have an other solution for a "modal" primefaces dialog.
I just want to add the click event, when my button is clicked to open the Dialog. And not allways when i click anything on the body element.
Add a styleClass to your button. For example styleClass="mybutton-class".
Then add a widgetVar to your <p:dialog widgetVar="widgetVarName" ...>
jQuery(".mybutton-class").on("click", function() {
jQuery('.ui-widget-overlay').click(function(){
PF('widgetVarName').hide();
})
});
Additional for Ajax Update Events:
I build 3 JS functions.
//for the first time the page is loaded
jQuery(document).ready(function() {
onLoadFunction();
});
//to load the script after you reload your page with ajax
jQuery(document).on("pfAjaxComplete", function(){
onLoadFunction();
});
//your code you handle with
function onLoadFunction(){
jQuery(".mybutton-class").on("click", function() {
jQuery('.ui-widget-overlay').click(function(){
PF('widgetVarName').hide();
})
});
}
It is an 8 years old question, but recently I meet the same problem and here is my solution for a modal primefaces dialog.
I wrote a js function which adds a listener to overlay panel around the dialogue
function addListenerOnDialogueOverlay() {
document.getElementById('test-dialog_modal')
.addEventListener('click', function (event) {
PF('test-dialog-widget').hide();
});
}
and call the finction in "onShow" tag of the dialogue
<p:dialog id="test-dialog"
widgetVar="test-dialog-widget"
modal="true"
onShow="addListenerOnDialogueOverlay()">
For now, I've only found a way to listen to "reload" event using:
chrome.webNavigation.onCommitted.addListener(function(details) {
if (details.frameId == 0) {
if (details.transitionType == "reload") {
// do something
}
}
});
What about "go back" and "go next" events? I'm looking for a Firefox's nsISHistoryListener alternative in Chrome.
Edit: Submitted a feature request to Chromium.
You could use the window.beforeunload event to capture when a user intends to navigate to another page (which would be triggered when using the back and forward buttons).
window.onbeforeunload = function () {
// do something
};
There is no way to get the target destination when using onbeforeunload.
More info here: Is there a cross-browser onload event when clicking the back button?