Symfony best practice - using Materialize CSS Chips with Symfony Forms - javascript

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

Related

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);
});
});
});

WordPress - Custom Form for custom post types in back-end

I am creating an eSports website and I want to create a bracket generator for each tournament. What I essentialy want to achieve is a custom form for each of the tournaments (post types). In that form I want to have an ability to choose how many rounds should this tournament have and be able to assign teams to any of the parts of the bracket.
I thought about doing this with custom fields but I doubt that they can be dynamic (for example, the amount of fields should increase if the tournament has more rounds than by default). They should also be simple to use for my client, so he shouldn't have to add custom fields manualy.
I decided to create a meta box with a form inside of it:
function add_meta_boxes() {
add_meta_box('peterworks-tournament-bracket', 'Peterworks Tournament Bracket', 'pworks_bracket', 'tournaments', 'side');
}
function pworks_bracket() {
?>
<form method="POST">
<input type="text" name="test_it" value="test" />
</form>
<?php
}
Then I tested if data from that form is reachable inside the wp_insert_post_data filter. It is:
function modify_post_title( $data , $postarr )
{
$data['post_title'] = $_POST['test_it'];
return $data;
}
This succesfully changes the title of a post to the value of that form's input. It means that I can create a custom form and make it dynamic with JavaScript.
My question is - is this approach correct? What are the potential problems I might be facing using this technique? Is there a better/easier way to do this?

Insert partials dyanmically in view along with its data in Angular

I have a view in which I need to insert form fields, into view.
Now these form fields I need to render come f from API request, which basically tells name of field and input type.
So not only I need to insert the template but also fill up input properties basically name attribute.
I am thinking of loading into data into partials, but I am not sure how to load partials dynamically unlike use ng-include
Any help?
Use directives.
You can attach your html template (I'm assuming this is what you mean by partials) to a directive as follows:
.directive('myFormField1', function() {
return {
template: '<label>{{ my_label }}<input></input></label>'
};
});
Then, you can issue your request and bind the data to your scope:
$http.get('/myUrl').
then(function(response) {
$scope.reqData = response.data
}
Finally, you use the request data to dynamically generate your form in the main template. Substitute your own variables and conditions as appropriate.
<form>
<div myFormField1 ng-if="reqData.shouldShowField1 == true"></div>
<div myFormField2 ng-repeat="item in reqData.repeatedData"></div>
</form>
This should point you in the right direction, though without knowing specifics I obviously can't give you a full answer.

Integrating Bootstrap 3 Typeahead with Bootstrap Tagsinput

I'm trying to integrate the Bootstrap 3 Typeahead plugin (basically a port from the old Bootstrap typeahead functionality before it was removed in Bootstrap 3, if I understand correctly) with the Bootstrap-Tagsinput plugin.
I have no problem getting these to work individually, including the JSON prefetch typeahead functionality. I do not understand how to integrate the two. I don't think it should be too hard but my knowledge of Javascript is apparently lacking.
Here is my input field:
<input type="text" id="tagFilter" data-provide="typeahead" data-role="tagsinput">
And here is the way the typeahead plugin is called in Javascript:
//The typeahead
$.get('tags.php', function(data){
$("#tagFilter").typeahead({ source:data });
},'json');
If it's helpful, the Tagsinput has an example in its docs explaining how to implement twitter typeahead.js:
$('input').tagsinput();
// Adding custom typeahead support using http://twitter.github.io/typeahead.js
$('input').tagsinput('input').typeahead({
prefetch: 'citynames.json'
}).bind('typeahead:selected', $.proxy(function (obj, datum) {
this.tagsinput('add', datum.value);
this.tagsinput('input').typeahead('setQuery', '');
}, $('input')));
But I'm using a different plugin. I found that one to be over my head.
Thanks again.
Okay...so I've actually decided on using the Twitter typeahead.js, as I managed to get it working. I used the following code, please someone point out if it's not the best way to do it.
<input type="text" id="tagFilter" data-provide="typeahead" value="test,arlington">
$('#tagFilter').tagsinput({
typeahead: {
source: $.get('tags.php')
}
});
My tags.php file is just a list, I think it will take a lot more work to get this to function with an associative array with keys in the JSON file. I decided there was no benefit to this in my case, as I'm only concerned with the tag names for query purposes.
So my tags.php is just echoing the result of:
//the mySQLi query is above...
while ($row = mysqli_fetch_assoc($result)) {
$tags[] = $row['tag_name'];
}
echo json_encode($tags);
Hope someone can benefit.

sheepit form - show already saved form values using php

I'm using this sheepit javascript plugin, in my wordpress plugin.
http://www.mdelrosso.com/sheepit/index.php?sec=demo2&lng=en_GB
This plugin works fine for text values. But i'm having problem when i inject select field values. Injected value not set as selected
can someone help me to inject data using api and make the select dropdown selected.?
Here is the jsfiddle demo of my problem.
I inject select value like this
data: [
{
'select': '5'
}
]
It is a flaw in sheepit javascript plugin.
To make it work, you need to change line no 1070 from
var type = field.attr('type');
to
var type = field.prop('type');
in sheepit javascript plugin source.
FIDDLE

Categories

Resources