Grails Dynamic Form Fields - javascript

I want to do something like below using Grails:
I can achieve the simple text field using jquery/js. However I need to add the dynamic form field for dropdown list and use Grails gsp tag. But I can't put something like:
var line = "<g:select/>";
in the javascript to add a row. Because there i no GSP engine for javascript.
Also for deleting a row, there is no id in my project, so not quite sure how to delete a row using dynamic form fields.

Related

How to add JavaScript code to Laravel for BackPack?

I'm using Laravel BackPack to expedite my CRUD webapp.
I have a form with a dropdown list of users.
When a user is selected from this list, I want to populate a text box on the same form with the username of the selected user.
I normally use JavaScript to query the table and return the JSON result.
The returned data is used to populate the #username text box.
I am not sure where to add this JavaScript code in BackPack.
Thanks for your suggestions.
I recommend you create a new field type, starting from the select2 field (or whatever you're using now), and add your JS there.

Inserting HTML into an AngularJS ng-repeat table

I'm attempting to insert a form as a new row underneath a row generated by ng-repeat. I can successfully add a row to the data model using .splice() but I'm not able to render the HTML when it is inserted. I have researched methods to accomplish this and the ones that are mentioned the most frequently involve the $watch and $compile functions. The issue is that I do not have an original tag to insert into as this is a brand new row in the table.
Idea behind this:
I have a table of data with many rows. The table represents data on "actions" that are for employees to accomplish. We are creating a web app that allows them to view their own actions and update them in the web page rather than updating a spreadsheet.
I was originally inserting a row dynamically with jQuery but as we are aware - it breaks the DOM. I'm trying to take the angular approach as this is an angular app, but I'm struggling with how to accomplish this.
The row that is inserted is a form for all the fields chosen and some extra ones not shown in the "view". Ideally, this would expand a row downwards when they click a button at the end of the row containing the action they are trying to edit. When they are done they can click a save button which removes/collapses the row and saves the changes to the model. This change is then sent back to the API to write the changes back to the database.
View of the Table:
Table view
View of the Form:
Form
Basically, I'd like to dynamically insert the form between rows shown in the table. I have to avoid jQuery and use AngularJS if possible.
Anyone have a neat trick to accomplish this?
Code (had to remove some stuff for privacy):
Pastebin: jf1mv9WG
Cheers,
Tux889
If I understand your question (and assuming you are using angular 1x), maybe you can use ng-repeat-start and ng-repeat-end to render two rows for every item; and in the second row put the form inside a td[colspan=n] (where n is the number of columns in your table). And make the two rows mutually exclusive, for example the first row can have ng-if="!item.showForm" and the second row can have ng-if="item.showForm".
Take a look a this example that I prepared: https://jsfiddle.net/miguelerm/9pus3zoc/
You can try to use ngBindHtml directive.
You can bind html to your table.

Over-shadowing label when pre-populating value to form

I'm using Materialized CSS and it works very well for me. However when I added more dynamic behaviour to my app, for example when I'm pre-populating form with values and appending them to the layout, here is the photo of that:
That happens only when I preset the value to form on/prior to page load (because my form html is generated by server side).
However if I were to click into the quantity field then quantity would go back to its place and it would stay there.
How do I make it so that it stays up even when I pre-populate the form value? Is there a class I need to add to it (label or input) or JavaScript or something that I can put out there.
If you want to pre-fill text inputs, use Materialize.updateTextField(); as the docs says

Is there a way to populate a data-text field in html with javascript?

Currently I have a social media plugin and you can change what it says by adding a data-text field so it will look like data-text = "something" and this works nicely but I want it to change for different pages.
I currently have set up some javascript to get the input i want and save it in a variable. Is there a way I can populate the data-text field with it?
Originally I thought to use some razor code because that will break the quotation marks and cause it to accept the razor as code and not plain text. But I was running into problems with the page not loading my razor code at all.
You're talking about an attribute, not a field.
$('.my-element').attr('data-text', myVariable);

Dynamically populating an ExtJS HTML editor

So I'm using ExtJS for a job I'm working and I'm trying to dynamically populate the textarea associated with the HTML editor with data based on what a user selects from a combo box. From what I've found, I can load the HTML editor with text using the defaultValue property. So if I'm going to populate it after the page loads, can I give it something like a datastore or is there a method I can call to set the text?
Just call foo.setValue("bar");, like with all form inputs.
http://www.extjs.com/deploy/dev/docs/source/Field.html#method-Ext.form.Field-setValue
http://www.extjs.com/deploy/dev/docs/?class=Ext.form.HtmlEditor

Categories

Resources