I am using jQuery 1.8.3 and jQuery Mobile 1.2.0.
I am trying to implement the vertically grouped checkboxes.
I need to detect changes on the checkboxes. An example is available here.
However, it doesn't work on my page (which I don't give because it contains too many dependencies but the code is the same).
Basically, when I click a checkbox, the following message should be displayed in the console:
INPUT
module1
-----
Whereas in my page I've got:
FIELDSET
moduleListTitle
-----
DIV
moduleContainer
-----
DIV
(an empty string)
-----
I've spent hours trying to find why the event is not fired correctly.
Has anyone already faced this problem?
After testing the code live - not on JSfiddle - I have reached the below solution.
Since the items are added dynamically, you should bind the event to $(document) and the handler to 'input:checkbox.module'.
Here is the code, I hope it solves your problem.
$(document).on('change','input:checkbox.module', function(){
console.log(this.tagName);
console.log(this.id);
console.log("-----");
});
trigger.('refresh') is not required here.
Related
I'm encountering an issue using the YADCF date filter for DataTables with the Bootstrap-Datetimepicker styling option. The issue is that the Months/Years/ are overflowing from the dropdown container. The weird part is that the actual date selection looks fine. I've included some screenshots below.
This is what the month selection looks like, the year selection looks the same way.
However, the date selection looks normal, like this:
I have other date picker drop downs throughout my app that look normal:
Initializing the date filter field as so:
yadcf.init(tableElement.DataTable(), [
{ column_number : 11,
filter_type: "range_date",
datepicker_type: 'bootstrap-datetimepicker',
date_format: 'YYYY-MM-DD',
filter_container_id: 'yadcfDateDiv'
}]);
I just can't seem to figure out what styling property is needed to resolve this. I've tried adjusting the padding/margins (as suggested in other posts I've found) of the months and such but it just makes them closer together, not below each other like the last screenshot. If anyone has any ideas it would be greatly appreciated.
Versions
YADCF: 0.9.4
DataTables: 1.10.16
Eonasdan/bootstrap-datetimepicker 4.7.14
After digging through the Eonasdan/bootstrap-datetimepicker documentation, I discovered that the DateTimePicker plugin has a WidgetParent option that can be used to set the parent element in which the widget will reside.
Since I am initializing the DateTimePicker plugin through YADCF and passing in a custom filter_container_id, I found that if I also passed that same element to the WidgetParent property it will display as intended.
I have added the following code to my DataTable initialization function for the page which has resolved this issue:
$('input[id^="#yadcf-filter--orders-datatable"]').data("DateTimePicker").options({
"widgetParent": '#yadcfDateDiv'
});
It selects both of the input fields that are generated by the YADCF plugin which the DateTimePicker objects are bound to and sets the appropriate parent element.
Hopefully this helps some future Googler.
I try to write a web-component to create a simple login menu. it has paper-inputs for name and password and a button which fires a script to check the data.
the right data redirect to the next page while false credentials should open a toast element right above the button with an error message, siimilar to this one:
http://www.polymer-project.org/tools/designer/#6f21f8d26e14d614c9cb
Select the paper-toast-element in the tree-view and check the 'opened'-checkbox get get a vision what I try to do and please excuse the strange style.
The problem:
I included this element in my main page, but the toast element is always visible right from the start. and it doesn't react to the button click if I move the toast away with css.
I don't wanna spam this page with my code, so I uploaded it here:
https://gist.github.com/Gemoron/6b8f41d1bb6ff522e23c
I appreciate any suggestion on how to fix the problem.
You cannot access the hidden shadow DOM of an element directly with jQuery's $ function, nor with document.querySelector. Also jQuery is not needed anyway. Use Polymer's automatic node finding utility instead: this.$.paper_toast.
You can access the paper-input values with this.$.name.inputValue. But i would prefer to use data-binding instead: <paper-input value={{name}}>. Then you can access the input value in your JavaScript with this.name.
The function to display the toast is show().
I'm unable to reproduce the issue that the toast is visible right after the page has loaded. On my computer the toast is initially hidden and displayed when i click on the button (Chrome 37, Polymer 0.3.3).
In line 76 you try to use an "open()" method, which does not exist on paper-toast. It should be "show()". You can find paper-toasr API here: http://www.polymer-project.org/docs/elements/paper-elements.html#paper-toast
Also, because the ids in shadow dom are encapsulated, you should be using the id selection mechanism from Polymer instead of jquery-style selector
this.$.paper_toast.show();
More on automatic node finding in Polymer: http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding
Here's jsbin (you might need to refresh as jsbin sometimes breaks with Polymer imports)
http://jsbin.com/fened/1/edit
Select boxes converted to Select2, do not automatically integrate with unobtrusive validation mechanism in ASP.NET MVC framework.
For example, on a form which contains a regular select box (marked as required in model definition), submitting the form while no options have been selected in the select box, will cause the border and background of the select box to take a reddish color, and by using #Html.ValidationMessageFor, error messages, if any, can be displayed beside the box. However if the select box is converted to a Select2 component, then none of the mentioned features work any more. Even the validation error message will not show up.
It seems that the reason for even the validation error message not showing, is because Select2 changes the display CSS property of the original select box to none (display:none), and I guess the unobtrusive validation script does not bother generating error messages for invisible fields.
Any ideas / solutions?
This issue isn't really specific to Select2, but rather to the jQuery unobtrusive validator.
You can turn on validation for hidden fields as highlighted in this answer.
$.validator.setDefaults({
ignore: ''
});
As the comments noted, it didn't work inside an anonymous callback function within $(document).ready(). I had to put it at the top level.
I've run into similar issues with the select2 plugin. I don't know exactly which features you're using specifically, but in my experience, when you set an element as a select2 in the document.ready event, the plugin will change some of the element's attributes on the fly (inspect one of the elements after your page has finished loading - oftentimes you'll see the id and class properties are different than what you're seeing when you view source).
It's difficult to offer more without actually seeing the code, but here's a few ideas to get you started:
First off, obviously make sure you have the a link to your select2.css stylesheet in the header.
Then, since you're talking about form submissions, I'd recommend you examine whether or not you're getting a full postback or submitting via AJAX (if you're using jQueryMobile, you're using AJAX unless you override it in the jquerymobile.js file or set a data-ajax="false" in your form attributes). You can just look at the value returned by Request.IsAjaxRequest() for this. Obviously if you're submitting via ajax, you won't hit the document.ready event and the select2 won't initialize properly and you'd need to figure out a way around that. Try refreshing the page after the submit and see if it renders the select2 component.
Then I'd suggest examining the elements and see if they're not behaving like you'd expect because you're actually trying to work with classes that the plugin has reassigned at runtime. You can either just adjust your logic, or you can dig into the select2 code itself and change the behavior - it's actually fairly well-documented what the code is doing, and if you hop on the Google group for select2, Igor is usually pretty quick to follow up with questions.
like this
$('select').on('select2:select', function (evt){
$(this).blur();
});
$('body').on('change', 'select.m-select2', function () {
$(this).blur();
})
I'm very new to backbone.js but we're starting to use more and more JS on the front end and I wanted to use some framework to give the code structure - backbone seems to suit our needs.
So started off with a very simple test app that launches a dialogue window using jquery-ui. The problem I have is that since jquery-ui adds a wrapper DIV round the original template used by backbone, the events no longer fire.
I don't want to use the jquery-ui event model as I'd rather just use the one - how can I bind backbone's to this new structure?
It looks as though the call to _.template() is actually doing the wrapping in an extra div. The parent div with the events bound to it is being left behind appended to #well. A simple workaround is to call .parent() on the result of getting the element with the model class ID. See here for example
There's more than likely some information in the _ documentation that might shed some more light on the problem too.
OK - at the end of this project, I finally realised that I hadn't answered this. What happens is when you create a .dialog with JQueryUI, it actually detatches your original DOM element and moves it to the bottom of the DOM wrapped in it's own JQueryUI markup to turn it into a dialog.
Since the Backbone view's element has now been moved, Backbone doesn't pick up any events that fire as it's happening outside it's own "view" as far as it is concerned.
So what you have to do is reassign the view's element:
var dlg = this.$("#dialogue-properties").dialog({ ..});
this.setElement(dlg);
Where this is the view. This is done within the initialize method
You can create div wrapper in your view and modal it's content, as described here (first part of the post)
cocovan does a good job explaining the problem in his answer. However, as for the solution, the JQuery UI team actually added a method at the end of 2012 (Allow dialog to be attached to a element other than body) that takes care of this issue.
It is the appendTo(selector) method (jQuery Dialog appendTo method). So simply specify to which element you want the dialog appended.
I'm using the nifty 'combobox' variant of jQuery UI Autocomplete - see here: http://jqueryui.com/demos/autocomplete/#combobox
I have it within a Form element because its part of a form.
The Autocomplete Combobox has a <button> that is used to show the whole drop down list. However when the user presses it, the form submits. This appears to be because the <button> has a type="submit" attribute. The whole element is created by the button() call within the .combobox fn, see source code.
How do I stop it submitting?
(NB: This guy had the same problem but he fixed it by removing the form - I can't do that)
Ah, nevermind, I figured it out.
The problem is discussed on the jQuery forum here:
http://forum.jquery.com/topic/autocomplete-combobox-problem-when-it-is-placed-inside-a-form-tag
They suggest several different ways of adjusting the source code of the autocomplete combo to fix it. The simplest one seems to be this:
Change the line that says
$("<button> </button>")
to
$("<button type=\"button\"> </button>")
this prevents the type="submit" from being inserted into the final button.