Enables tagging without the need to manually input tags using an Angular form

I'm working on an angular form that is used to create an object with tags:

<form class="form-horizontal" ng-submit="createBeacon(beaconData)">
 <div class="form-group">
  <label>Tags</label>
  <div id="tags-list" data-current-user-company="{{current_user.company_id}}">
  <input type="text" id="tags-input" class="form-control" ng-model="beaconData.tag_list" name="beacon[tag_list]" placeholder="project, client 72, yellow, design"/>
 </div>
</div>

This form sends the data to a rails controller using a factory to save it in the database. Here's the function responsible for submitting the data:

$scope.createBeacon = function(beacon){
 Beacon.save({
  alias: beacon.alias,
  description: beacon.description,
  status: beacon.status,
  company_id: currentUser.company_id,
  venue_id: beacon.venue_id,
  beacon_id: beacon.beacon_id,
  tag_list: beacon.tag_list
 });
}

The issue I'm facing is that even though the tag_list parameter is being sent to Rails, it's not getting committed into the tags and taggings tables as it should when submitted through a Rails form.

https://i.sstatic.net/Q5Gwl.png

Any suggestions or advice on how to tackle this problem?

javascriptruby-on-railsangularjsacts-as-taggable-on

Answer №1

After struggling with the strong parameters declaration, I made the following change:

params.require(beacon).permit([:tag_list])

I decided to switch it to:

params.permit([:tag_list])

This simple modification resolved the issue of the tag_list not being saved in the tags table. Although not ideal, it was the only solution that worked for me at this moment.

Answer №2

"tag_list" => "Test 234" when included in your request signifies that it is being transmitted as a text rather than an array. To rectify this, you must ensure that it is sent as an array.

Furthermore, it is imperative to update permitted_params to allow for tag list as an array. 

params.require(beacon).permit(tag_list: [])

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to display the contents of a zipped file using an HTML IFrame?

Can I display the contents of a zipped file in an HTML iframe? For example: My_File.pdf.zip contains My_File.pdf. I currently have something like this <iframe src="/path of the folder/My_File.pdf.zip" /> The src attribute points to the zipped file ...

javascriptjqueryhtmliframe

Issues have been reported with the functionality of the ng-click function in Angular JS

Having just started using AngularJs, I am facing an issue where the function is not being called when I click the button that I append. HTML </tbody> <tr> <td><input type="text" class="form-control" ng-model="contact.name ...

javascriptjqueryangularjs

"Mastering the art of utilizing Async in combination with waterfall and Recursion in node

I've developed a script for transferring data from Dynamo to a MySQL database. Initially, I encountered performance issues on the SQL side due to not using asynchronous calls. To address this, I integrated the async library to throttle the Dynamo segm ...

javascriptnode.jsasynchronousrecursionamazon-dynamodb

Implementing an active class in Vue.js for the router-link component

I am facing an issue with my sidebar item becoming inactive when I click on a sublink inside a component. How can I prevent the active class from switching off? Here is my sidebar: <router-link to='/sub/success_tools_subscriptions' ...

javascriptclassvue.jsrouterlink

Avoid reloading the header component along with its APIs when navigating routes in React JS

I'm currently working on a web application using react js/next js and within it, I have various pages that make use of globally shared components like the Header and Footer. However, I am facing an issue where I want to prevent unnecessary re-renders ...

javascriptreactjsnext.js

Why isn't my file being recognized post-multer middleware?

I am currently facing an issue with uploading a filename and a post (similar to 9GAG style) to my MySQL database, and storing the file in my project folder. The front end is able to retrieve the file without any problems (verified through console.log), but ...

javascriptnode.jsvue.jsmulter

Troubleshooting: Issues with $location.path not updating in AngularJs

While I understand that this issue has been discussed previously, none of the provided solutions seem to work. I have a good understanding of Angular and have written a substantial amount of Angular code, so I am not a novice in this field. Currently, I ...

angularjs

What is the method to retrieve results using 'return' from NeDB in vue.js?

Seeking assistance on retrieving data from NeDB within a method in a .vue file using electron-vue. Currently, I am aware that the data can be stored in a variable, but my preference is to fetch it using 'return' as I intend to utilize the result ...

javascriptvue.jsbluebirdnedbelectron-vue

What is the best way to handle a single promise from a shared listener?

I am working on implementing an event listener that will receive events from a server whenever a specific task is completed. I want to structure each task as a promise to create a more organized and clean workflow. How can I resolve each task promise by i ...

javascriptnode.jspromise

iOS experiences a lag in loading dynamic images

I have created a unique jquery carousel specifically designed for mobile devices. It features three containers that display three images at a time, with jquery handling the animation. By detecting the user's swipe direction (left or right), I update t ...

javascriptjqueryios

What could be causing my dropdown menu to not appear when clicked?

I am trying to implement the functionality shown in the image. When the Settings button is clicked, a window should open allowing the user to navigate to their desired option. However, I am facing an issue where nothing happens when the button is clicked. ...

javascripthtmlcss

What is the most effective way to loop through an object containing DOM selectors as values, and subsequently utilize them to assign new values?

I have a function that takes an object retrieved from a database as its argument. My goal is to display the values of this object in a form by associating each value with a specific DOM selector. Here is the code snippet where I achieve this: function pai ...

javascripthtml

Select objects from an array that are contained within another array of objects

I am dealing with an array of objects that contain various attributes such as weakness, id, and type. [ { weakness: [ "Fire", "Flying", "Ice", "Psychic" ], id: 1, type: [ "grass", "poison" ] }, ...

javascriptarraysreactjs

Discover the color value within an array that begins with the "#" symbol

In my PHP code, I have written a function that extracts values from a CSS file and creates an array. Now, I need to loop through this array and create another array that only contains color values (strings starting with #). The challenge is that the length ...

javascriptphphtmlcssarrays

Utilizing HTML5 to automatically refresh the page upon a change in geolocation

I have a web application built with AngularJS. One of the functionalities is activated only when the user is in close proximity to specific locations. To make this work, I can constantly refresh the page every 5 seconds and carry out calculations to dete ...

javascripthtmlangularjsgeolocation

Achieving cell merging in react-table can be accomplished by utilizing the appropriate

Currently, I am using react-table and have the need to combine cells in specific columns based on their content. Essentially, I want to remove the divider border between these merged cells. To give you a visual idea, this is how it currently looks like: ...

javascriptreactjsreact-table

What is the Best Way to Ask Users Not to Delete Local Storage Information?

As I work on developing an application using angularJS, the need to save data locally has arisen. To achieve this, I am utilizing HTML5 local storage. One challenge faced with HTML5 local storage is that when a user clears their browsing data, all stored ...

javascriptangularjshtmllocal-storageindexeddb

Can two Angular element components be utilized simultaneously on a single page in Angular 6?

Currently, I'm attempting to host independent Angular elements that can be seamlessly integrated into a non-Angular webpage. Everything works perfectly fine when there's only one element on the page, but as soon as I try to load two or more, I en ...

javascripthtmlangularelementangular6

How can SQL data be loaded following the selection from a dropdown menu?

I have a pressing query that I need assistance with. I am aiming to achieve a certain task, but due to lack of prior experience in this area, I am unsure about how to proceed. My current situation involves populating a dropdown menu with names retrieved f ...

javascriptphphtmlmysqlsql

Configure the input to accept integer values

This page that I have developed is designed for entering Latitude and Longitude values. <div class="container "> <form class="entry"> <div class="aligncenter"> <h5 style="color:MediumTurquoise; font ...

javascriptjqueryhtmlcssjson