Tips for incorporating a clickable link or dialog box into a Backbone.js JST EJS file

I'm looking to integrate a modal dialog box (by simply clicking OK) within a Backbone.js template file. This specific scenario involves iterating through a loop structure, as shown in show_template.jst.ejs:

<% for(var i = 0... all words %>
<% var word = get the ith word %>
<td><span class="synonyms"><%= I18n.t("Synonyms") %></span></td>

The main objective is for the user to click on "Synonyms" (in their preferred language) and trigger a modal dialog box that displays synonyms retrieved from the database in the same language. In essence, the goal is to have a clickable "Synonyms".

Any guidance for achieving this? (I am new to Javascript/Backbone.js)

javascriptbackbone.js

Answer №1

There are two approaches to making Synonyms clickable and tracking which one was selected

First Approach - Embed data in the DOM and retrieve it when clicked: (pay attention to the data-kind attribute)

<% for(var i = 0... iterate through all words %>
<% var word = retrieve the ith word %>
<td>
    <span class="synonyms" data-kind='<%= I18n.t("Synonyms") %>' >
        <%= I18n.t("Synonyms") %>
    </span>
</td>

The event handling part in the view will be like this

events: {
   "click .synonums" : "synonyms_event"
},

synonyms_event: function(e) {
    var kind =  $(e.target).data("kind");
    alert(kind + " was clicked");
}

The alternative option is to generate views for each word and delegate the click event handling to them

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

Swapping out the main view for the partial view

Recently, I wrote some jQuery code to fetch data from an action by passing in a dashID. The expected result was to receive HTML containing the relevant information. Unfortunately, my jQuery script is not returning the desired data. Below is the JavaScript ...

javascriptc#jqueryajaxasp.net-mvc-5

What is the best way to manage sessions in angularjs using javascript?

Only at two specific instances in the application should the login prompt be displayed: When trying to access a page that requires login while not logged in, such as my profile page. When attempting an action that necessitates ...

javascriptangularjssession-cookies

Tips for managing the execution of the fs.readdir function in Node JS: What to do while

Code: function readingFiles() { let fileList = []; return new Promise((resolve, reject) => { fs.readdir('documents', (err, filenames) => { if (err) throw err; filenames.forEach((filena ...

javascriptnode.jsexpressasynchronous

Determining the condition of the menu: understanding whether it is open or closed

I'm diving into the world of jQuery and JavaScript, trying to grasp the ins and outs of the mmenu API. Despite my efforts to understand the libraries, the JavaScript code remains a mystery to me. Following the tutorial provided on , I successfully cr ...

javascriptjqueryhtmlcssmmenu

Setting up the InMemoryCache in Vue ApolloConfiguring the InMemoryCache

I've set up vue-apollo following the instructions in the apollo.config.js file from this guide: (I'm using VSCode). Now, I want to configure the InMemoryCache to exclude the typeName (addTypename: false) like it's explained here: https://w ...

javascriptvue.jsvuejs2apollovue-apollo

Retrieve the initial occurrence that meets the conditions across three columns in MySQL

I am currently utilizing a NodeJS REST API that connects to a MySQL database. Within this database, there is a specific table we will refer to as Table_01: | C_0| C_1| C_2| C_3| | 1 | A1 | B1 | 1 | | 2 | A1 | B2 | 0 | | 3 | B1 | A1 | 0 | | 4 | A2 | ...

javascriptmysqlnode.jsjsongreatest-n-per-group

What could be causing my JavaScript function to produce repeated letters with just one key press?

After implementing a code that generates different variables based on the 'truth' variable, I encountered an issue. Everything works flawlessly when 'truth' is set to "name," but as soon as I switch it to "email," any keystroke results ...

javascript

How can Vue define the relationship on the client-side when submitting a post belonging to the current user?

Currently, I am developing an application using Node.js, specifically Express server-side and Vue client-side, with SQLite + Sequelize for managing the database. One of the features of this app is that a user can create a post. While this functionality ex ...

javascriptexpressvue.jssequelize.jsvuex

Sending data over a network using Socket and node.js

Trying to update a location on a Google Map using socket.io and node.js. I have 2 different methods for updating the map. There may be some basic issue as I am new to this. 1) Method using an API call that works: app.post('/location', function( ...

javascriptnode.jssockets

What is the best way to incorporate a minimum width and maximum width in CSS that add up to 100% when necessary?

Can anyone help me find CSS rules that can set a fixed width for an element (width: 500px) but also allow it to be responsive with max-width: 100% if the container is narrower than the element? I saw this example and it works perfectly: .elem { width: 60 ...

javascripthtmlcsswidth

Transferring information between postponed functions

Currently, I am incorporating deferred functions with .done and facing a situation like this: askTime(number).done(formatTime).done(function(html){ times += html; }); Despite the fact that formatTime returns data, the html variable contains the data r ...

javascriptjquery

Making a XMLHttpRequest/ajax request to set the Content-Type header

In my attempts, I have tested the following methods individually: Please note: The variable "url" contains an HTTPS URL and "jsonString" contains a valid JSON string. var request = new XMLHttpRequest(); try{ request.open("POST", url); request.set ...

javascriptjqueryjsonajax

When transferring a PHP array into a JS array, each letter of the values within the array becomes separated into its own element

Here is the provided code snippet: <?php $array = array('RANAJI', 'YAARA MAULA', 'AARAMBH', 'AISI SAZAA', 'SHEHER', 'BEEDO', 'DUNIYA', 'RAAT KE MUSAFIR'); foreach ($array a ...

javascriptphp

Using CoffeeScript to Invoke Methods

I'm still learning CoffeeScript and encountering some challenges with calling methods. Can someone help me out? Here is the Card model I am working with: class exports.Card extends Backbone.Model defaults: pip: '4' suit: &apos ...

javascriptsyntaxbackbone.jscoffeescript

Mastering Data Labels in ng2-chart: A step-by-step guide

Once again, I find myself battling my Angular and JavaScript challenges, each question making me feel a little less intelligent. Let me walk you through how I got here. In my most recent project, I wanted to enhance the user experience by incorporating sl ...

javascriptangularng2-charts

Step-by-Step Guide on Dividing Table Row Data into Two Distinct Tables

At present, I have created a dynamic table that retrieves data from the database using forms in Django. I'm facing an issue with this table as even though there are 7 columns, only 2 of them are visible. However, all 5 hidden columns do contain impor ...

javascriptjquery

Tips for changing text color using JavaScript when hovering the mouse?

I am working on a website for a snow cone stand and am looking to add a unique effect to their flavor list. I want to create an interactive experience where hovering over a flavor name scales the text and changes its color to match the real fruit. Is the ...

javascripthtmlcsssass

No content appears on the multi-form component in React

After several attempts at building a multi-step form in React, I initially created a convoluted version using React.Component with numerous condition tests to determine which form to display. Unsatisfied with this approach, I decided to refactor the code f ...

javascriptreactjsreact-componentreact-functional-component

How to highlight text within an iframe using the mouse and displaying the selected text in a separate div

I'm currently able to select text with the mouse and display that selection in a div. However, I'm struggling to do the same thing when dealing with an iframe displaying a page on the same domain. Despite trying various solutions found here, I h ...

javascriptjquery

Fetching Unicode block specials using axios in getStaticProps with Next.js

Click here to view the code and data results My attempt using the fetch method was successful, but I encountered issues when trying to use 'axios' ...

javascriptnode.jstypescriptfunctionnext.js