I wanna use a jQuery UI Progress Bar
Now i am dynamicly creating the progress bar
(I'm creating an uploader simmilar to the one on gmail messages)
And for some reason i get this error.
This is my code:
$('#' + file.id + " b").html('<div id="progressbar"></div>');
$( "#progressbar" ).progressbar({
value: file.percent
});
Which gives me this error:
Uncaught TypeError: Object [object Object] has no method 'progressbar'
Anyone has a clue why?
I do have the jQuery UI linked to the file as i'm already using a Dialog on the same page, so that's NOT the problem.
Could it be that it messed up because the div does not exist in the intial page loading?
With Shef's help the problem is solved.
The problem was i had a custom jQuery UI library which didn't include the progressbar.
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.
Simple jQuery UI functions, such as the following:
(function($) {
$('ui').sortable();
})(jQuery);
Result in an error which would normally indicate jQuery UI was not present.
Uncaught TypeError: Object [object Object] has no method 'sortable'
However, Chrome's developer tools confirms that it has been loaded. What's up?
The answer was simply to stop using jQuery shorthand. This:
(function($) {
$('ui').sortable();
})(jQuery);
becomes:
jQuery(document).ready(function($){
$('ui').sortable();
});
According to the documentation (http://jquerymobile.com/demos/1.2.0/docs/api/events.html), the pageinit event should be called after all the widgets and plugins for a jQuery mobile page have been executed. So, I believe I should be able to interact with elements on that page with impunity in the event callback. However, I listen for the page to initialize and then try to interact with a button on the page, and I get the following error:
cannot call methods on button prior to initialization; attempted to
call method 'disabled'
I've put together a codepen, to show you:
http://codepen.io/mattsnider/pen/mvcbD
What gives? Does the pageinit not work as documented or is this a bug?
There's nothing wrong with your pageinit event. The wrong lies in the <a> tag.
To remove the error you're getting, you'll have to make two changes to your code :
Its not disabled, its disable
before your call the disable method, you have to call button() method. Thus, you would've initialized the button element.
This is how the code will look like now :
$('#ageNext').button().button('disable');
But, if you do this, you'll get an error like this :
Uncaught TypeError: Cannot call method 'addClass' of undefined
The culprit lies in the code which invokes the disable method
disable: function() {
this.element.attr( "disabled", true );
this.button.addClass( "ui-disabled" ).attr( "aria-disabled", true );
//^^ Uncaught TypeError: Cannot call method 'addClass' of undefined
return this._setOption( "disabled", true );
}
You see the this.button there? This will become undefined if the element is not a real button.
So that said, I've got the disable to work only on input[type=button] and <button/> type of elements. For some reason, this doesn't work as expected on <a/> impersonating buttons. I've got this to work by manually adding ui-disabled class to the element, like this :
$(document).on('pageinit', '#age', function (e) {
$('#ageNext').addClass('ui-disabled');
});
Demo : http://jsfiddle.net/hungerpain/gzAHT/
This may also happen if you have unmatched HTML tags, especially troubling is </div> without a previously declared <div>.
First thing to check might be that your HTML is well formed.
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.
I am trying to use the jquery ui autocomplete, and keep having the following error when you type into the input field that has the autocomplete on it:
Uncaught TypeError: Cannot read property 'PAGE_UP' of undefined
I have included the following files on my page:
jquery-1.7.2.min.js
jquery-ui-1.8.21.custom.min.js
jquery-ui-1.8.21.custom.css
Here is the code using the autocomplete:
$('input#searchFor').autocomplete({
source:function(req,add){
$.getJSON("/index.php/search/autoCompleteHandler?q=?§ion="+$('input#searchFor').attr("searchDesc"),req,function(data){
var suggestions = [];
$.each(data,function(i,val){
suggestions.push(val.name);
});
add(suggestions);
});
}
});
I have no idea what could be going wrong. Any help would be appreciated.
The jQueryUI example documentation for a remote data source shows the remote data source should be done like:
$(function() {
$( "#birds" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
//the code to execute when an item is clicked on
}
});
});
It looks like source only needs to be a url. You could take a look at the ajax request in Chrome to figure out the $_GET or $_POST variable which is being populated with the search query.
It might not be a bad idea depending on your usage to use the remote data source with caching option.