I am interested in displaying results in a split format, with two separate sections arranged side by side

When using Ruby-on-rails, I wrote some code that looks like this:

 <% for i in 0..29 %>
      <%= @yes_word = @moeum_set.map{|w| w.word}[j-1 - (score.sort_by(&:to_i)[j-1-i]%ten)] %>
  <% end %>

This code displays 30 words (@yes_word) recursively in a line, but I want them to be shown in a parallel layout within one div (15 : 15)

For example, like this:

Apple Banana
Kiwi  Grape
Mango Citrus
 ...   ...

The above code functions with Ajax

var search_word = $('#input').val().split(" ").pop();
            $.ajax({
            url : '/jadu/output_merge',
            data : {
                word_name : search_word

            },


            success : function(html) {
                $('#result').html(html);
            }
            });

And here is the HTML CODE containing the results

<div class="panel panel-default">
     <div class="panel-body" id="result">
          The words that were researched
     </div>
</div>

Answer №1

If your array of words named @yes_word is structured as follows: %w{Apple Banana ...}, you can use the following code to display it in a two-column layout using Bootstrap:

<% @yes_word.each_slice(2) do |word1, word2| %>
  <div class="row">
    <div class="col-sm-6"><%= word1 %></div>
    <div class="col-sm-6"><%= word2 %></div>
  </div>
<% end %>

Answer №2

If you have an array of strings that needs to be displayed, try implementing the following code snippet:

<% @string_array.each_slice(3) do |slice| %>
  <div class="row">
    <% slice.each do |str| %>
      <div class="col-md-4"><%= str %></div>
    <% end %>
  </div>
<% end %>

Hopefully this solution works for your situation.

It seems like you are sorting words in a way that is not fully clear, but if you make adjustments to your code as shown below, it may work with the previous code snippet provided:

@word_array = []
<% (1..30).each do |i| %>
  <%= @word_array << @set.map{|w| w.name}[k - 1 - (values.sort_by(&:to_i)[k - 1 - i] % 10)] %>
<% end %>

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

Ways to properly link a header according to industry standards

I am faced with a chunk of HTML structured as follows: <div id="header"> <h1>title</h1> <h2>subtitle</h2> </div> To conceal all the text content and substitute it with an image using CSS, I am trying to link th ...

Retain values of JavaScript variables acquired by their IDs even after a page refresh

I have a JavaScript function that retrieves HTML input values and inserts them into a table. However, when I refresh the page, those values are reset to null. How can I prevent this and keep the values visible after a refresh? I believe setting and getting ...

Easily transition the header's height when selecting a menu item

I am trying to achieve a collapse effect or something similar However, when I click on a menu item, the height changes too quickly without any animation What could be wrong in my code? I am looking to reference an effect similar to the one seen in the h ...

Error message: IndexError: list index out of range while attempting to trigger a click event using selenium

There are a total of 41 category checkboxes on the page, with only 12 initially visible while the rest are hidden. To reveal the hidden checkboxes, one must click on "show more." This simple code accomplishes that: [step 1] Loop through all checkboxes > ...

What is the best way to store a video file in a database?

Recently, I came across a task where I needed to insert a video in a database and display it using an HTML5 video control. Despite successfully saving the video in the database, I encountered an issue when trying to play the video. Upon investigating, I ...

The width of a div element seems to mimic the width of the entire page inexplic

There is a page containing various div elements. HTML: <div class="utilitiesHeader"> <div id="utilitiesLogo"></div> <div id="utilitiesFIO">Name of user</div> </div> <div class="utilitiesContent"> <d ...

Troubleshooting: Ineffective use of replace() function on input value with jQuery

Visit this link for a demo How can I update the input value based on user selection in a dropdown menu? The objective is to change the value from "service_######" to "membership##_####" when the user selects YES, but my current JavaScript code using repla ...

Is it possible for a table data cell to be nested within another table

Is it possible for a <td> to be a direct child of another <td>? For example: <td class="parent"> <td class="child"> <!-- Some content --> </td> </td> Or is it necessary to always create a new < ...

Continue to alter elements by stacking them on top of each other

Currently, I am in the process of familiarizing myself with CSS3 3D transforms. However, I am encountering difficulties in keeping elements that are undergoing transformation on top of other elements. If you'd like to take a look at what I have accom ...

Incorporate a text input feature into the Pikaday modal dialogue box

I'm currently in the process of revamping Pikaday and want to swap out the year select for a text input. However, every time I add an input field, it ends up being unresponsive. Despite not being disabled, z-indexed to the background, or having any op ...

What is the best way to disable the appearance of an HTML checkbox?

Is there a way to make a checkbox readonly, but still have it appear disabled or grayed out? I want it to function like this: <input type="checkbox" onclick="return false;"> If anyone knows how to accomplish this, please share yo ...

Creating a dynamic navigation bar featuring an interactive search option

I am currently working on creating a responsive navigation bar with bootstrap, similar to the one shown in this example. However, I am facing issues with aligning the search button correctly and ensuring that the tabs remain intact when collapsed. Instead ...

Ways to ensure even spacing in a responsive header design

On my homepage, I have a large header image that is responsive in the mobile version. However, I am having trouble managing the spacing between the button and text below it. The spacing varies on different mobile screens and sometimes appears larger than i ...

How can we retrieve the user ID in Node.js MySql so that it can be utilized in subsequent queries post login?

I am currently in the process of developing a web application using node.js and MySQL as my database. I have configured a login system, but I am unsure about how to determine what information should be displayed on certain pages based on user data. In ad ...

Pictures are floating to the side instead of being centered in mobile mode

When in desktop mode, one img is aligned to the left and the other one is aligned to the right. However, when viewed on a phone, I am attempting to center align them but they continue to be aligned to the sides. What could be the issue here? Provided be ...

Utilizing HTML and JavaScript to Download Images from a Web Browser

I'm interested in adding a feature that allows users to save an image (svg) from a webpage onto their local machine, but I'm not sure how to go about doing this. I know it can be done with canvas, but I'm unsure about regular images. Here i ...

A guide on hosting static files using plain nodeJS

Currently, I am in the process of learning how to utilize vanilla nodeJS for hosting HTML files as part of a personal project. The code snippet below is what I have been working with. My main concern at this point is figuring out how to publicly serve im ...

Unable to access hyperlinked text on WordPress sites

For a school project, I am in the process of developing a theme using WordPress to create a blog. This theme is not intended for sharing so all website design aspects are already pre-made. The issue arises when I attempt to access the blog.php file from ...

A guide on scraping the web using R with rvest: Converting URLs to CSV

library(rvest) base_url <- "https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20220502" webpage <- read_html(base_url) movie_nodes <- webpage %>% html_nodes(".tit5 \> a") codes <- substr(movie ...

Div modal no longer scrolling along with the rest of the page

One of the challenges I'm facing is integrating a html/css modal on my webpage, which can be accessed via this link: The issue arises when trying to utilize the main scroll bar on the page in order to navigate downwards and view the remaining content ...