I'm trying to disable a jQuery UI combobox I've created. I have searched, but come up with nothing that works yet.
Here's some JSFiddle:
...
$(function() {
$( "#userInfo" ).combobox();
$( ".custom-combobox-input").attr("placeholder", "(Pay Band GS 1-15/rank)");
$( "#userInfo input" ).attr('disabled', true);
$( "#userInfo button" ).attr('disabled', true);
});
that I've programmed and tried the best answer I have found at ComboBox disable:
...
$("#box3").combobox(); // init autocomplete combobox 3
// set initial state of generated combobox 2
$("#test2 input").attr('disabled',true);
$("#test2 button").attr('disabled',true);
// set initial state of generated combobox 3
$("#test3 input").attr('disabled',true);
$("#test3 button").attr('disabled',true);
. It looked like it was going the right direction. I was able to disable their "box1", but can't seem to do it with mine. Yet, my combobox() is a little later in its inception, being jQuery 11. But that may have nothing to do with it.
While this doesn't technically answer your specific question, I strongly urge you to spend a little time learning "Chosen." It's a JQuery plugin, and does most of what you're after. On top of that, learning a JQuery plugin is always a good idea. There's lots of other good ones out there.
Related
I am facing a performance issue in my angularjs application using angular material.
I have an <md-select> with many options (around 1300) and this <md-select> is in an <md-tab> tag. On the page load, my page freezes. This is probably due to Google Chrome's event passive listener, because I get the following log in my js console :
[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
You can find a codepen which reproduces my issue : https://codepen.io/jjalal/pen/vWxYbv.
When switching from Harry to John the page freezes (it is way more obvious on my application). If you open the js log and set the log level to 'All levels' (enable verbose level), you can see the 3000 logs (I have 3 select with 1000 options each).
I saw on some answers that I should set the event passive to true like this :
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: true });
But this didn't solve my issue.
Any help would be appreciated.
Very recently (two days ago) had a very similar issue and after hours of research I had to realize that this is something that won't be fixed in the near future. Please refer to this question and the accepted answer for explanation. (And also check out the angularjs github issue which has a tag 'won't fix')
Regarding a kind-of solution:
The problem is 100% with the browser (don't even try it in IE, it will freeze with a note 'long running script') and the DOM rendering and not in your code. So I kept trying and trying and trying, removed tiny parts of the DOM (complete container divs, buttons, paragraphs, whatever I could find) one by one. At one point I was able to identify what caused the issue. I had an item that was draggable which contained a clickable md-icon and that icon had an on-hover md-tooltip. Now you see it had 3 events (dragging the item, clicking on the button and hovering the button) which collided. After removing the md-tooltip it worked like a charm. My suggestion is for you to start identifying what exactly could be causing this. The real solution will have to wait...
I use the following code snippet to show a simple modal:
$modal({
title: 'My Title',
template: 'path/to/my/simple.modal.html',
show: true,
scope: $scope
});
After closing the modal some parts of my webpage do not react to any events. In all other browsers this is working fine.
It's also really strange that I am not able to inspect some of the elements after closing the modal, all elements are shown as one single element (when using the Inspector-Tools in IE). After found one inspectable item, all the other items are getting inspectable as well. After inspecting for some moments, there is no freezed part again ... it's a really strange behaviour.
Does anybody else have this behaviour ?
I am using Angular 1.5 and Angular-Strap 2.3.7.
Thanks in advance !
Sad, that there were no further hints on this.
I looked in the angular-strap bug-list for a solution and found one :
Just call $destroy(); after hiding the modal did the trick for me.
Best !
I Know this question is answered. but this is for share some info on that same issue.
Recently I also came across with that issue. In my case the reason was a CSS attribute Display:block. So after I turn the value from block to none my freezing error went off and it worked like a charm. So first right after you get that error check in Inspection whether the resulting div where the modal is loaded has a style = "Display:block" in it. If so remove it by a script or etc.
Hope this will help to improve this question.
Given something like this:
View = Backbone.Marionette.ItemView.extend({ });
myView = new View();
//region already exists
myLayout.region.show(myView)
//some time later this gets called again:
myLayout.region.show(myView)
I can see currentView in the docs but this only seems to apply at initialisation. Once a view is shown can I query the region to see the view? Either the view instance or type would be helpful. Looking in Chrome's debugger I can't see any properties/methods on the region that would help.
The motive for wanting to do this is so I don't show a static item view in a region again if it is already displayed as this can (especially if images are involved) cause a slight flickering effect on the screen.
Thanks
--Justin Wyllie
you can add a condition before calling show method:
if (myLayout.region.currentView != myView)
myLayout.region.show(myView)
so if you'll try to call show with the same View it wont be shown.
if you want to call region.show(myView) once you can check in this way:
if (_.isUndefined(myLayout.region.currentView))
myLayout.region.show(myView)
You can check the isClosed and $el attributes of the view. Something like
if (myView.isClosed || _.isUndefined(myView.$el)) {
myLayout.region.show(myView);
}
This is the same way the region checks to see if the view is closed or not:
show: function(view) {
this.ensureEl();
var isViewClosed = view.isClosed || _.isUndefined(view.$el);
...
I'm going out on a limb here and assuming that the OP's question is based on app behavior when navigating to different parts of the app via an anchor tag in the navigation or something similar.
This is how I found the question and I thought briefly that the answers would save my day. Although both answers so far are correct they do not quite solve the problem I was having. I wanted to display a persistent navigation bar. However, I did not want it to display on the login page. I was hopeful that detecting if a Region was already shown or not I'd be able to properly let the display logic take care of this.
As it turns out we were both on the right track to implement Regions as this provides granular control, but even after implementing the above I found that my nav bar would still "flicker" and essentially completely reload itself.
The answer is actually a bit ridiculous. Somehow in all the Backbone tutorials and research I've been doing the last two weeks I never came across the need to implement a javascript interface to interrupt normal link behavior. Whenever a navigation item was clicked the entire app was reloading. The routing was functioning so the content was correct, but the flicker was maddening.
I added the following to my app.js file right after the Backbone.history.start({pushState: true}); code:
// Holy crap this is SOOO important!
$(document).on("click", "a[href^='/']", function(event) {
if (!event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
event.preventDefault();
var url = $(event.currentTarget).attr("href").replace(/^\//, "");
Backbone.history.navigate(url, { trigger: true });
}
});
Check out this article for some explanation about the keyPress detection stuff. http://dev.tenfarms.com/posts/proper-link-handling
Boom! After adding this stuff in my app no longer completely reloads!
Disclaimer: I am very new to Backbone and the fact that the above was such a revelation for me makes me think that I may be doing something wrong elsewhere and this behavior should already exist in Backbone. If I've made a giant error here please comment and help me correct it.
In the following Layout, I am adding a CollectionView to display a SELECT list within onRender. Immediately after that, I am using the ui hash to enable or disable all controls within the view. This does not work for the SELECT generated by new App.View.Categories.
Should it? Or does the UI hash not work on Regions within a Layout?
App.View.UploadFile = Backbone.Marionette.Layout.extend({
template: '#upload-file-template',
regions:{
category: 'td:nth-child(4)'
},
ui:{
inputs: 'textarea, select, .save'
},
onRender: function(){
this.category.show(
new App.View.Categories({
collection: App.collection.categories
}) // generates the SELECT list
);
console.log(this.ui.inputs); // Length 2. Missing select.
console.log(this.$('textarea, select, .save')); // Length 3
this.ui.inputs.prop(
'disabled', (this.model.get('upload_status')!='staged')
);
}
});
This should be working the way you expect it to work. The code in question in the Marionette source is here: https://github.com/marionettejs/backbone.marionette/blob/master/src/marionette.itemview.js#L49-L51
The call to bindUIElements() is what converts the ui hash in to jQuery selector objects, and it is called right before the onRender method is called.
Are you seeing errors? Or is the selector simply returning nothing, and having no affect on the elements?
Update:
Ah! Of course... I wasn't paying attention to your code close enough. You're correct in that the UI element selectors happen before you're adding the the sub-view to the region. I've never run in to this situation before... but this seems like something we would want to fix / support.
For now, the best workaround I can suggest would be to call 'this.bindUIElements();' at the very end of your onRender method. This would force the ui elements to re-bind to the selectors.
I'll also add an issue to the github issues list, to look in to a better solution for this. i don't know when i'll be able to get to this, but this will at least get it on the list of things to fix.
I am using Jquery plugin http://timeago.yarp.com/ for showing time.
Issue is timeago will not take effect for dynamically generated items.
$(document).ready(function() {
$(".timeago").timeago(); // works perfectly fine for the items which are loaded on page load
//$(".timeago").live(timeago()); // gives me an error ie timeago is not defined
//$(".timeago").live($(".timeago").timeago()); // gives me an error too much recursion.
jQuery.timeago.settings.allowFuture = true;
});
From some google search I got to know something ie:
Using live is the same as using bind, except that it is limited only to the events click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
Now how can do it cause I dont have any click event? How can I bind this?
.live() and .bind() assign callbacks to event. In your case, you don't have an event to assign the function to and so it fails.
You can, in theory, assign your callback to a custom event. You will however have to manually trigger the event (using .trigger()) whenever your item is generated. For example:
$("abbr.timeago").live("timeago", function() {
$(this).timeago();
});
// ... and in the bit that generates your item
$new_item.trigger("timeago")
Demo: http://jsfiddle.net/ZjuW4/9
Of course, using .live() in this situation is purely academic and does not really serve a good purpose.
If you do have access to the code that's generating the items, you can simply chain in the call to .timeago() as the items are generated, i.e. http://jsfiddle.net/ZjuW4/3/
take a look in this topic
here was discussed how to put timeago on dynamically loaded items
for example the results of an ajax request.
Activate timeago on newly added elements only
PS: allowFuture does not have anything to do with putting timeago on newly created items on your page. it just allows dates in the future (f.e. "in 3 days", "next week")