In jQuery UI 1.7, I had successfully overridden the datepicker._generateHTML function running a script in the form:
jQuery.datepicker._generateHTML = function(inst) {
...revised code...
};
When I attempted to upgrade to version 1.8 using the same approach, I encountered a problem. Version 1.8 added a datepicker closure scope variable dpuuid, which is referenced in the new version of the '...revised code...'. datepicker._generateHTML now fails with a dpuuid is not defined' error.
I'm still new enough to Javascript to not understand all the subtle aspects of the language. So my first question is: 'Can a function which references a closure scope variable be overridden and still access the original closure scope?'
I found the answer in Thomas' answer for jQuery DatePicker how to disable auto day selection while browsing calendar?
Adding the following to the top of my '...revised code...':
if (!inst.dpuuid) {
for (attr in window) {
if(/^DP_jQuery_/.test(attr)) {
inst.dpuuid = attr.replace(/^DP_jQuery_([0-9]+)/, '$1');
}
}
}
var dpuuid = inst.dpuuid;
eliminated the dpuuid is not defined' error. I had seen in FireBug that the closure scope was visible from the window object, but had no idea how to extract values from it.
Thanks Thomas!!
Related
I'm using ag-grid to render a table in my angular 7.2.1 app. The custom cell renderer is just to render an edit button in the rows that will redirect to a different page.
I've done this before in a different app on a different Angular version a while ago, but for some reason the same code in this Angular 7 app is resulting in this. I think I may be missing something really simple.
I've created a minimalist reproduction of the error I'm seeing in this stackblitz - https://stackblitz.com/edit/angular-v98mjs
If you click on the Edit button, you will see this error in the console.
ERROR Error: Cannot read property 'navigate' of undefined
ag-grid versions:-
I'm using the following version for ag-grid:-
"ag-grid-angular": "^20.2.0", "ag-grid-community": "^20.2.0",
Please look at the stackblitz code in the link above for the code.
You needed to define onEdit with Arrow Function
onEdit = (row): void => {
console.log('row is being edited', {row})
this.router.navigate(['/new-url', { id: row.incidentId }], {
relativeTo: this.route.parent
});
};
More example such thing: ag-grid server side infinite scrolling accessing props
Have a look at the updated plunk: https://stackblitz.com/edit/angular-oppxte
Without arrow function, inside onEdit function of AppComponent was not able to get reference of this.router, and hence, you were getting the error.
Cannot read property 'navigate' of undefined
I have also introduced RootComponent and NewComponent for better modularity in the example. Hope it will be clear with that.
I am having trouble determining the type of a given jQueryUI widget instance.
The jQueryUI documentation for the Widget Factory suggests two techniques. From the "Instance" section:
The widget's instance can be retrieved from a given element using the
instance() method. [...]
If the instance() method is called on an element that is not
associated with the widget, undefined is returned.
the :data selector can also determine whether an element has a given
widget bound to it.
Based on their examples, let's say I initialize a datepicker and later code checks if it is a datepicker:
<p>Date: <input type="text" id="datepicker"> </p>
$(function() {
$("#datepicker").datepicker();
// ...
var i = $("#datepicker").progressbar("instance"); // i is undefined as expected
console.log(i);
var b = $("#datepicker").is(":data('ui-datepicker')"); // b = false, not sure why
console.log(b);
var i2 = $("#datepicker").datepicker("instance"); // this throws an exception
console.log(i2);
});
Based on the documentation I expected the .is call to return true, and the last line to return the instance (not throw an exception.)
JSFiddle is here. (You will need to open the browser's console to see the logged output.)
It turns out the techniques I listed above do work for many jQueryUI widgets, e.g. button, progressbar.
But datepicker is kind of weird. Looking at the DOM after a datepicker is initialized, I see the datepicker is inserted as a new element after the named element.
To get the datepicker widget instance I'd need to navigate the DOM starting from the named element. To check if the input field has a datepicker on it we can simply check the element for the class hasDatepicker:
var isDatePicker = $("#datepicker").is(".hasDatepicker");
This works with jQueryUI 1.11.2, and based on other SO questions it's been working since 2009. So I guess it's a reliable technique, but I'm not sure if its documented anywhere, or guaranteed for future versions.
As title suggests I am building a mobile website with JQuery Mobile (1.3.0) and am trying to implement Google Places Autocomplete (API v3) to aid user input of location data.
The autocomplete functions correctly on desktop device, but not when used on a mobile device (I have only tested on iOS 6).
When used on mobile device the dropdown list of relevant locations do appear, but simply disappear when you press one without loading the selection on the map.
I have looked around and seen some solutions that sight the z-index of
.pac-container
as the culprit (see: http://osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html).
I have implemented these fixes but to no avail, and I am not convinced that z-index is the problem because I can see that the selected item does change to it's :hover state/colour when pressed on mobile.
Please if anyone has suggestions I am all ears, need any more details let me know.
Saravanan's answer is a bit overkill. To fix the conflict with FastClick and PAC, add the needsclick class to both the pac-item and all its children.
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Thanks Daniel. But the solution I have given has some performance impact.
I have modifed the FastClick library little bit to accomplish that.
First I have added a param to FastClick constructor, where defaultElCls will be the elements which should not implement fastclick.
function FastClick(layer, defaultElCls) {
'use strict';
var oldOnClick, self = this;
this.defaultElCls = defaultElCls;
Then modify needsClick method:
FastClick.prototype.needsClick = function(target) {
'use strict';
var nodeName = target.nodeName.toLowerCase();
if (nodeName === 'button' || nodeName === 'input') {
// File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
// Don't send a synthetic click to disabled inputs (issue #62)
if ((this.deviceIsIOS && target.type === 'file') || target.disabled) {
return true;
}
} else if (nodeName === 'label' || nodeName === 'video') {
return true;
}
return ((/\bneedsclick\b/).test(target.className) || (new RegExp(this.defaultElCls).test(target.className)));
};
Then pass pac-item to the FastClick constructor
new FastClick(document.body, "pac-item");
Hope this will be taken care by FastClick library as well :)
I've also encountered this bug, and determined fastclick to be the culprit. I was originally going to go with Devin Smith's answer, but epegzz's warning about MutationEvents being deprecated led me to MutationObservers, and since I haven't seen a fix involving them I thought I'd share my solution.
var observer_config = { attributes: false, childList: true, subTree: false, characterData: false }
var observer = new MutationObserver( function(mutations) {
var self = this;
mutations.forEach(function(mutation){
// look for the container being added to the DOM
var pac_container_added = $(mutation.addedNodes).hasClass('pac-container');
// if it is, begin observing it
if (pac_container_added){
var pac_container = mutation.addedNodes[0];
self.observe(pac_container, observer_config);
}
// look for pac-items being added (as children of pac_container)
// This will not resolve if the observer on pac-container has not been created
var pac_item_added = $(mutation.addedNodes).hasClass('pac-item');
// when pac items are added, add the needsclick class
if (pac_item_added) {
$('.pac-item, .pac-item span').addClass('needsclick')
}
});
});
observer.observe(document.body, observer_config);
It is more complex than I'd like it to be because we can't just add observer.observe('pac_container') in the top level, since its added asynchronously. Luckily, the solution for that problem is also MutationObservers.
We add another observer to pac_container when it is created. That way, it detects the pac-items being added, and when they are, we add the needsclick class.
This is my first time using MutationObservers, so feedback/improvements would be appreciated. As you can see, I used both jquery, but it should be pretty easy to pull it out.
There is a patch for fastclick that makes it work well with google places autocomplete. See This answer :)
After much hair pulling I have found the problem to be the "FastClick" library I added to my project.
As #Saravanan Shanmugam points out in this comment https://stackoverflow.com/a/16932543/1177832
FastClick seems to interfere with autocomplete. Also see above link for the workaround he has added to get the two to play nice.
So I have a view that create pie chart. Th recurring code looks like this.
function drawChart() {
var dataBest = new google.visualization.DataTable();
dataBest.addColumn('string', 'Name');
dataBest.addColumn('number', 'Number');
dataBest.addRows([
<ui:repeat value="#{dashboardController.bestSelling()}" var="sale">
[ '#{sale[0].prodId.prodName}', #{sale[1]}],
</ui:repeat >
]);
var options = {'title':'Best Sold Products', 'width':400,'height':300};
var chart = new google.visualization.PieChart(document.getElementById('test'));
chart.draw(dataBest, options);
}
And in my controller called DashboardController I have:
public String bestSelling() {
List<Sales> bestSelling = saleService.getBestSellingProduct(country,gender,status,income);
return new Gson().toJson(bestSelling);
}
But, when I go on my page, I have the following error:
/faces/all.xhtml #22,83 value="#{dashboardController.bestSelling}": The class 'com...managedbean.DashboardController' does not have the property 'bestSelling'.
I don't understand what I did wrong there.
You're not running the code you think you're running. Look at the error message:
/faces/all.xhtml #22,83 value="#{dashboardController.bestSelling}
It mentions the method without the parentheses. So, you've apparently added it later in, but the webapp project is not properly been saved/cleaned/rebuilt/redeployed/restarted.
Unrelated to the concrete problem, there's many more wrong with this approach (attempting to use <ui:repeat> to iterate over a Java String as #1 thinking mistake), but you'll experience this as soon as you fix the current problem. Hint: JSF is a HTML code generator and JS is part of that HTML.
I have a JQM apps and I am incorporating Backbone.
Since my initial javascript code is huge, I am only extracting what I believe is problematic.
I am following the advices and calls steps cited here:
jqm-config.js from http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/
http://jquerymobile.com/test/docs/pages/backbone-require.html
I have a major problem, and this is the behaviour, the problem comes from this code:
var r = Backbone.Router.extend
router: ...
"page": "pageDisplay"
...
pageDisplay: function(){
c = new AView(); // Backbone.View ...fetch() data...
$(c.el).page(); // Call to JQM to add its extra stuff; seems done correctly
$.mobile.changePage( "#" + c.id, {changeHash: false}); // line 50
}
When following the links of <a href="#page" >, I come as expected to the
page "#page" properly processed. But once there, if I click a refresh, which is indirectly reprocessed by the same router rule, I end up with the following error:
Uncaught TypeError: Cannot call method 'trigger' of undefined
I downloaded the jquery mobile development code and observed this:
// JQM1.1.2 - Line #3772 Show a specific page in the page container.
$.mobile.changePage = function( toPage, options ) {
if ( isPageTransitioning ) {
pageTransitionQueue.unshift(arguments );
return;
}
var settings = $.extend( {}, $.mobile.changePage.defaults, options);
// Make sure we have a pageContainer to work with.
settings.pageContainer = settings.pageContainer || $.mobile.pageContainer;
// Make sure we have a fromPage.
settings.fromPage = settings.fromPage || $.mobile.activePage;
// Line #3788
var mpc = settings.pageContainer, // Line #3789
pbcEvent = new $.Event("pagebeforechange" ),
triggerData = { toPage: toPage, options: settings };
// Let listeners know we're about to change the current page.
mpc.trigger( pbcEvent, triggerData ); // Line #3794
The Uncaught TypeError is caused by Line #3794, because mpc is undefined.
So, from JQM, In the Chrome inspector, I can see also that settings.fromPage is undefined and settings.pageContainer is undefined. I kind of imagine, that JQM cannot make an assumption on the fromPage, and therefore, cannot proceed on my refresh. All the options I have tried on the $mobile.changePage() have not succeed. I am out of ideas.
UPDATE/ Online site with the minimum to reproduce the problem:
apartindex, access the website with the bug
Any help will be appreciated.
The dextoInit function that calls the router code is called in $(document).ready() which does not guarantee that the jQuery mobile page has actually been set up successfully. But the router code calls $.mobile.changePage which depends on jQuery Mobile being initialized.
Putting it into mobileinit or pageinit should work.
(Unfortunately I can't modify the code and test it easily.)
Although, this fix it for the moment, it does have drawbacks. See below.
$(document).bind("pageinit", function(){
console.log('bindtomobileinit: event pageinit received');
if ( !window.AppNode.router ){
window.AppNode.router = new AppNode.singletons.router();
console.log("mobileRouter.js: Starting b history");
console.log('mobileRouter.js: About to launch Backbone history');
Backbone.history.start();
}
});
Registering to pageinit has a weird effect of being fired twice. I see that 2 nodes have been added to the Dom: the default "loading" jquery mobile div (related to pageinit:1), and my data-role page (pageinit:2). So on a "refresh browser click", my situation leaves me waiting for a first pageinit, creating an unexpected jquery mobile dom element (a default page created to display the waiting JQM circle animation), which trigger the router creation, and allows the Backbone.history call which then deal with my "" home page. The second pageinit do not interfere with the settings since I execute it only once.
I am really disappointed by this setup. I will leave this question for now, since it does sort of work.
I've found the source of the problem to be jquery-mobile version 1.3.0. When I fall back to either JSM 1.2.0 or 1.2.1, the "Uncaught TypeError: Cannot call method 'trigger' of undefined" problem goes away.
BTW, I am not using Backbone.
I had fixed this problem by using method append(), but not html()
$('body').append(view.render().$el);
I was able to resolve this issue by changing the page data property from "data-role" to "data-mobile-page" as what is referenced in line 4042 of jqm 1.3.2
fromPage.data( "mobile-page" )._trigger( "beforehide", null, { nextPage: toPage } );
Setting
$.mobile.autoInitializePage = true;
In your jquery mobile config file, some place like:
$(document).on("mobileinit", function () {...});
May help.