Develop Reference

Django Modelmultiplechoicefield Checkboxselectmultiple Problem Getting Selected Checkbox

I have been working all day to try and get the selected values on one set of checkboxes on my Django form and copy the selected ones only to an identical checkbox on my form. If a user clicks on a checkbox in form.author defined below, I want the same identical checkbox to automatically be checked on form.favorite_author defined below.
I've tried a JQuery approach as documented here...Copy Selected Checkbox Value From One Checkbox To Another Immediately Using JQUERY but no luck so far. I've recently begun exploring an avenue with the Modelmultiplechoicefield and the checkboxselectmultiple parameters within the form itself. From what I can tell, when I am using JQuery and trying to check a box on the form, the value is coming back as undefined which is most likely why it is not propagating the checkbox selection to the other checkbox.
Here is my form....
class ManagerUpdateNewAssociateForm(forms.ModelForm):
class Meta:
model = Library
self.fields['author'] = forms.ModelMultipleChoiceField(
widget=forms.CheckboxSelectMultiple(),
queryset=Books.objects.all()
self.fields['favorite_author'] = forms.ModelMultipleChoiceField(
widget=forms.CheckboxSelectMultiple(),
queryset=Books.objects.all()
My HTML...
<div class="spacer83">
{{ form.author }}
</div>
<div class="spacer83">
{{ form.favorite_author }}
</div>
When I tried to trace JQuery, it told me the checkbox selections are undefined. I did read a bit about how Modelmultiplechoicefield, since it uses a queryset it doesn't show the selections, but I can't figure out how to get it to.
Thanks in advance for any thoughts.

In combination with the other issue included in this one, I went back to the JQuery route and explored further. From what I can tell, I was not able to use the class for the input because of the way the HTML for Django forms is generated in this use case. I ultimately was able to leverage the input name and then used the code below to interrogate the checkboxes accordingly:
$(document).ready(function() {
$("[name=author]").change(function() {
let selectedValA = $(this).val();
let isAChecked = $(this).prop("checked");
$(`[name=favorite_author][value="${selectedValA}"]`).prop("checked", isAChecked);
});
});
});

Contact Form 7 Error: labels and entered values overlaps in the form field. What could be the appropriate solution to this?

I am trying to make a contact page for my WordPress site, and have almost completed the form, but I don't know for some reason the labels and the entered values are getting overlapped with each other when I reload the page after filling the input fields.
I am using "Contact Form 7" plugin in WordPress, and another extension of this plugin called "Material Design for Contact Form 7", Now, the problem is that I don't know whether this plugin uses Materialize CSS or some other CSS.
Tried alot, but I am unable to figure out the cause of this issue, Is there any solution to this ?
If there's any, please mention and tell which FILE to edit ? If I need to edit any PHP/CSS/JS file, where can I find it?
This is what I am getting:
This is what I expect:
Code used (as instructed by contact form 7 material design plugin extension)
[md-form]
[md-text label="House no."]
[text* house-name]
[/md-text]
[md-text label="Street no."]
[text* street-name]
[/md-text]
[md-text label="Post Ofiice"]
[text* po-name]
[/md-text]
[/md-form]

I have successfully resolved the issue, finally.
Now it’s working fine, I just edited a few lines of code in
/var/www/html/wp-content/plugins/material-design-for-contact-form-7/assets/js/cf7-material-design.js
As instructed/mentioned here (Google's Material Design Guidelines) at GitHub
You can see the code
$('.cf7md-text, .cf7md-textarea').each(function() {
var $this = $(this),
$input = $this.find('input, textarea'),
$span = $this.find('.wpcf7-form-control-wrap'),
$tpl = $this.find('.cf7md-text-html').find('> div'),
$label = $tpl.find('label');
// I DECLARED THIS VARIABLE
var text404 = $(this).val();
// Move input
$input.detach().prependTo($tpl);
// Insert template
$tpl.detach().appendTo($span);
// Add md class to input
$input.addClass('mdc-textfield__input');
// MY CUSTOM CODE STARTS HERE
if(text404 !== null) {
$tpl.addClass('mdc-textfield--upgraded');
$label.addClass('mdc-textfield__label--float-above');
} else {
// $this.removeClass('mdc-textfield__input');
}
// MY CUSTOM CODE ENDS HERE
//$if($this.hasValue)
//$input.addClass('mdc')
// Add 'for' to label
$label.attr('for', $input.attr('name'));
// Add autosize to textareas
if($this.hasClass('cf7md-textarea-autosize')){
$input.attr('rows', '2');
autosize($input);
}
});

You could also take a look at the this plugin which allows you to design responsive grid-layout designs for contact form 7.

Symfony best practice - using Materialize CSS Chips with Symfony Forms

I've begun a project in Symfony 3 which needs to allow users to create a post with some data, and a collection of tags (many-to-many). The CSS framework I've been using is MaterializeCSS and there's a handy class called 'chips' which would be nice to allow input for the tags.
I've been using the Form objects as per the Symfony guide with no issues so far, however my issue is that the materialize CSS constructs its 'Chips' field like this:
<div class="chips"></div>
...
$('.chips').material_chip();
I can't for the life of me see how to do this inside of a Symfony form, or how to retrieve the data after submission if done with custom form rendering. I could just not use it, but the UX would suffer. I've read a bit about the CollectionType class inside of Symfony but I'm still not sure that this would be appropriate to use with chips.
I'm sure somebody's completed a project like this before, would be great to have some input. All help appreciated.

Did you try something like this ?
{{ form(form.name, { 'attr': {'class': 'chips'} }) }}
I recommend you to read this post

As we discussed above , the idea is to have some glue js code to manipulate a hidden field which contains tags as comma separated values and bind the chip widget with that hidden field as data source and target e.g
Desired html
Input field(might be hidden):
<input name="chips" value="Apple,Hello,World">
The Chip:
<div class="chips"/>
Glue js
<script>
function updateChipInput(chip){
var newval= $(chip).material_chip('data')
.reduce(function(result,val){ result.push(val.tag); return result;},[]).join(",")
$('input[name="chips"]').val(newval);
}
$(document).ready(function(){
var data= $('input[name="chips"]').val().split(',')
.map(function(tag){
return {tag:tag}
})
$('.chips').material_chip({
data: data
});
$('.chips').on('chip.add', function(e, chip){
updateChipInput(this);
})
.on('chip.delete', function(e, chip){
updateChipInput(this);
});
});
</script>
working demo
The input is text field to show the effects in example you can set its type to hidden ,thanks

Get Selected value from ui-grid using jquery/javascript

In My project,we used data grid using AngularJS Implementation as follows.
<div id="entityGrid" ui-grid="selectedOptions" ui-grid-selection data-ng-model="selectedOptions"></div>
i can get selected item in grid as below using angular.js .
"entity" : $scope.createString($scope.selectedOptions.data)
but i also want to get selected item in grid using jquery/javascript due to some requirement..
i tried to get value using jquery as below. but it didn't work.
var entity = $('#entityGrid option:selected');
please help here.

You question is not very clear. I wonder if you could provide a plunker of your codes.
Here is one:
http://plnkr.co/edit/3KXrUuCsSACuhefmyzxN?p=preview
When you click "Copy" button, the following function is invoked:
$scope.copySelection = function (){
$scope.retainSelection = $scope.gridApi.selection.getSelectedRows();
};
What you get in $scope.retainSelection is an object of key:value pairs. You can access which ever key of it.
Here is another question talking about this:
Where can I get Angular ui-grid selected items
Hope it helps.

How can I set the Text of a DropDownList using jQuery?

I have seen some answers on how to set the value for a dropdown using jQuery. However in my case, I want to know how to use jQuery to set the text for a dropdown.
This example uses jQuery to set the value for my dropdown:
var trimvalue ="345";
$("#Trim").val(trimvalue);
In my current code Logic, I want to set the displayed text as well, which I tried to do in this way:
var trimtext ="samsung";
$("#Trim").text(trimtext);
This is not a correct syntax. Please provide any suggestions on whether we can set the the text using jQuery or not.

You should be able to set the text with something like
$('#Trim option:selected').text(trimtext);
https://jsfiddle.net/yzgbk1fj/:
Or if you mean to add it, perhaps:
$('#Trim').append($('<option />').text(trimtext)).val(trimtext);
https://jsfiddle.net/yzgbk1fj/1/

First Create a html tag in your html page
<select id='sampleSelect'>
<select>
Second in your Jquery target the select function using an ID
$(document).ready(function(){
var trimtext ="samsung";
$("#sampleSelect").append(
"<option value="+trimtext+">"+trimtext+"</option>"
);
});
And if you have alot of values for your drop down use a For loop. Hope this help.