I'm developing a software in which all the select elements are using the select2 library.
In the footer there is this code to do that:
$('select').select2();
Now I'm developing a new screen that some selects will use select2 and others don't so I created the class ".noSelect2" for the ones that aren't supposed to have select2.
When I put this code, it only destroys the first select:
$('.noSelect2').select2('destroy')
What can I do to destroy all the elements?
The problem with using a class to target something with Select2 is that Select2, in the past, copied classes to the container elements so you could apply CSS there. As a result, using the class to target the <select> also resulted in targeting the <div> or other container element, and that would trigger an error.
The easy solution is to add select in front of your class selector, so it only targets the <select> elements.
$('select.noSelect2').select2('destroy')
In 4.0.0 there is a known bug with calling select2('anything') in that it isn't consistent when selecting multiple instances. This should be fixed by the next release (4.0.1) of Select2.
Related
I'm implementing a help desk in JIRA where I have two drop downs - both 'single value select' for Category and Sub-category.
For example,
I have following Categories:
Content Development
Events
Design
And each category has a list of sub-categories within them. For example, Design will have following list of options
Event Collateral
Branding
Business Cards
By default, ONLY Category dropdown should be displayed on the CREATE ISSUE screen.
When user selects one of the categories, corresponding sub-category drop-down should be displayed on the CREATE ISSUE screen AND that sub-category dropdown should be MANDATORY field.
I looked up for possible solution at the following links:
https://confluence.atlassian.com/display/JIRA052/Displaying+a+Field+Based+on+Another+Field+Selection
https://confluence.atlassian.com/display/JIRA/Displaying+a+Field+Based+on+Another+Field+Selection
https://answers.atlassian.com/questions/217176/show-hide-custom-field-depend-on-another-custom-field-value
The first two links basically suggests the same solution - that is to put a JAVASCRIPT in the description field of the custom field and the same is suggested on many other blogs on this issue. They all give this very same example.
However this is not working for me. When I put any JAVASCRIPT in the description of the custom-field, it runs immediately upon saving - on the Field Configuration screen. For example, I just put a following JAVASCRIPT in the description and I got the alert right away (on the Field Configuration screen).
<script type="text/javascript">
alert('hi');
</script>
However, I do not get any alert on the CREATE ISSUE screen. So, not sure if I am missing anything here. Please advise if I'm looking in the right direction.
The 3rd link, suggests to create a plugin from the JIRA machine. However, I do not have access to that machine, I just have admin access to JIRA.
Is there any feasible way to achieve it via default JIRA configurations/external plugins which are ready-to-use?
My JIRA version is: 6.1.4
I have used Java script in custom fields in JIRA 6.0.8,JIRA 6.2.4 and JIRA 6.4.8 as well, so I think it should definitely work in JIRA 6.1.4.
You only need to put java script in sub category custom field as below:
For example for Design ->
Replace customfield_ID1 with custom id of Category Custom field and customfield_ID2 with custom id of Sub Category Design Custom field
<script type="text/javascript">
jQuery(document).ready(function($) {
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context) {
callChangeFunction();
});
callChangeFunction();
function callChangeFunction(){
showHidField();
// dropdown custom field change function
$("#customfield_ID1").change(function() {
showHidField();
});
}
function showHidField(){
//drop down field selected value
var dropDownFieldval =$.trim($("#customfield_ID1 :selected").text());
//test field1
$("#customfield_ID2").closest('div.field-group').hide();
if(dropDownFieldval == 'Design'){
$("#customfield_ID2").closest('div.field-group').show();
}else
$("#customfield_ID2").closest('div.field-group').hide();
}
});
</script>
Above will show or hide the field, please ensure that Category and Subcategory custom fields both are on same screen (Ex: Create Screen)
Now in order to make them Mandatory, you need to write that code as validator on create transition in Project Workflow as below:
import com.atlassian.jira.issue.customfields.option.LazyLoadedOption;
LazyLoadedOption selOption = issue.getCustomFieldValue (customFieldManager.getCustomFieldObject('customfield_ID1'));
(selOption.getValue()=='Design' && cfValues[Name of design Sub Category field#'])|| selOption.getValue()=='Events';
Make sure that you have Behaviour Plugin installed to get simple script validator
Hope this helps!
Priyanka Lavania
So, I'm trying to select a polymer custom element(using paper_elements) in my view with querySelector. I'm able to select regular html elements just fine. In particular, I'm trying to select a specific paper-input element. I want to be able to query it's input element which is buried in it's second shadowroot.
I've tried the following:
querySelector('#my-paper-input::shadow #input')
querySelector('paper-input::shadow input')
and a bunch of other variations. However, no matter what I do, the query always returns null. It's driving me mad because I can style it in css. What do?
As far as I know you have to use several steps
querySelector('#my-paper-input').shadowRoot.querySelector('input');
but you should also be able to access the value using the attribute of the outer element like
querySelector('#my-paper-input').attributes['value'] or
querySelector('#my-paper-input').attributes['inputValue']
you could also use http://pub.dartlang.org/packages/angular_node_bind
but I wasn't able using Angular with paper-elements recently (see https://github.com/angular/angular.dart/issues/1227)
I am using Django and the django-dynamic-formset plugin to generate a JQuery Mobile (JQM) site. I have nested forms that allow the user to click a "Add" link to another line to the form. This works great without JQM, but when JQM is used to style the form widgets the radio button labels do not trigger the correct radio button.
I have put up a static example of the behaviour, based on the generated HTML. Click the "Add" link, then try choosing a severity for the added item. The "for" attributes of the labels appear to update correctly, so I do not know what I'm doing wrong.
The django-dynamic-formset guide provides me with a way to call a JavaScript function after the user clicks the "Add" button, but I do not know if there's a JQM method I should be calling that will fix the issue. When I use JQM's enhanceWithin function it triggers a page load, which submits my form to Django, which I don't want at that point because the form won't validate yet.
Edit: I uploaded a much better example to the same URL.
After enough caffeine and peanut M&M's I have figured it out.
Reason for Failure: The django-dynamic-formset (DDF) plugin duplicates the form you give it. But the form is cloned as-is, which already includes all the JQuery Mobile (JQM) processing. This causes JQM to ignore it and makes the radio buttons misbehave.
The Solution: The DDF plugin allows you to specify what form to clone by its formTemplate parameter. JQM allows you to disable automatic mobile-enhancement of certain elements. Create an un-enhanced version of your form, and pass that to DDF as your formTemplate.
More Details:
I put this coded into my HTML head, before the reference to JQM:
<script>
$(document).bind('mobileinit',function(){
$.mobile.ignoreContentEnabled = true; // required for using the natural forms
});
</script>
And included this style to hide my "natural" form:
<style>
.natural-form { visibility: hidden; display: none; }
</style>
In the Django code I added a <div class='natural-form> and put a dummy version of my form in it (being sure to surround it another <div> with a unique ID for reference later). In my initialization of DDF I give it the unique ID as the parameter to formTemplate.
I was told on another forum I would have to hack DDF and JQM to get this to work. I am impressed at the design of both of these libraries - flexible enough that a newbie to JQuery can stick all the pieces in the right places and get something out of it.
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 am having a html dropdown
<select id="ExternalIp" onchange="externalIpchange()"></select>
I bind the data to dropdown through jquery and a I am passing data from controller which is working properly. I want to change the look and feel of the dropdown so I called a function
$("#ExternalIp").selectbox();
Now the look and feel of drop down is changed but it is not showing the data which I bind to dropdown. I am not getting what is the problem. Plz help
It appears as if the jQuery plugin you are using resets the values bound to the select list.
Look for a method provided within your jQuery plugin to rebind the data which you earlier attached with jQuery or style your element first and then try binding the values.
Cheers!!!