Is there a way to copy this JavaScript variable and modify the displayed text?

I am working on a JavaScript code that is used to create a basic news page with a filter from a mySQL database. The code generates the heading, main content, and date created for each news item. I now need to add a "read more" link at the bottom of each news item, with the link being the same as the heading link but displaying as "read more".

Here is the updated and functioning code:

var base_href = '/go/media~';
 function makeTable(data) {

    var tbl_body = "";
    $.each(data, function (index, row) {
            var tbl_row = "";
            $.each(row, function (k, v) {
                    if(k == 'heading' && 'id' in row) {
                            v = '<h2><a class="news" href="' + base_href + row.id +'">' + v + '</a></h2>';
                    }
                    tbl_row += "<div class='row'><div class='col-md-8 col-md-offset-2'>"
                            + v + "   </div></div>";

            });
            tbl_footer = '<a href="' + base_href + row.id + '">read more</a>';
            tbl_body += "<div class='non-white-media'>" + tbl_row + tbl_footer + "</div>";

    });
    return tbl_body;
}

Answer №1

Why not consider creating a tbl-footer? Something along these lines:

tbl_footer += "<a href="+data.url+">read more</a>";
...
tbl_body += "<div class='non-white'>" + tbl_row + "<br />" + tbl_footer + "</div>";

When retrieving data from your SQL database, the returned data must be related to the article's location on your web server.

This code is just a suggestion based on what may be inside the data, but it should point you in the right direction.

Update

tbl_footer = "<a href=" + base_href + row.id + ">read more</a>"; 
tbl_body = "<div class='non-white-media'>" + tbl_row + " <br /> " + tbl_footer + "</div>";

Check out this simple jsFiddle: https://jsfiddle.net/qeLkq0rb/. Please note that the code may not work for you as I have hardcoded some values, but it illustrates how to make your code functional :)

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

Trigger the event only when the image is updated

I have a requirement to trigger an event only when the image changes after uploading a file. The code I have written below is firing the event not only on image change but also on page load. I want to prevent the event from firing on page load. How can I ...

Determine the absolute path with respect to a different reference path, rather than the current working directory

One of the challenges I'm facing with my Node.js module is how to easily allow developers to edit the location of the dependencies relative to the module file itself. The issue arises because the current working directory, accessed through `process.cw ...

Having trouble with a CakePHP 3.2.3 query not functioning properly with dates

My query is returning empty when it should have multiple results. Do you have any suggestions for how the query should be written? $bookings = $orders->find()->where(["DATE('Orders.booking_date_time')" => $date_time]); The date in ...

What is an alternative approach to passing arguments to an event handler in a React render component without using a lambda function?

In my React app, I've learned that using lambda functions in the property of a render component can harm application performance. For example: <ConfirmSmsModal modal={args.modal} smsCheck={async (code: string) => { return await this._vm ...

What are the best ways to personalize the Ant Design table and pagination component?

Is there a way to customize and design table and pagination components? Specifically, I am looking to set the header color of the table as green. How can this be achieved? Similarly, for the pagination component, I want to have a background color on page n ...

Retrieving historical data from a MySQL database to display in a div element

My main page features a button that opens a popup. Upon closing the popup, a script is triggered to call a PHP file for selecting data from the database. This selected data is then appended to a specific div within the main page: if (win.closed !== false ...

Having difficulty transferring data from a JSON file on a different domain to a variable using Ajax

As a beginner in Ajax, I am currently exploring the use of Ajax Cross domain functionality to fetch data. The Ajax function is triggered from test.php, which then calls stats.php to request the desired data. The content of Stats.php: <?php $data = ...

Customizing the design of vuetify table header to your liking

My goal is to implement a custom style for v-data table headers using the fixHeader method. The CSS code is intended to keep the header fixed in place even when scrolling horizontally. The issue arises as the style is applied to the inner <span> ele ...

Using JQuery to extract the unique identifiers of nodes within a tree view format for the purpose of storing data according to these identifiers

Using Angular to display data in the view, I have a sample code here. When a specific age group category is clicked, I want to populate a form with data and save the entire dataset, including the parent node IDs. I am facing an issue with fetching the pa ...

Typescript throws an error indicating that the "this" object in Vue methods may be undefined, displaying error code TS2532

As a beginner in question writing, I apologize if my wording is not clear. The issue at hand: I am working on a Vue application with TypeScript. export default { methods: { setProgram: (program: Program)=>{ this.program = progra ...

display a visual element within a function using reasoning

I am trying to display an image based on a specific condition in my code, for example: if(x==1) { showImage }. However, I am facing an issue where the web content is not displayed until the image is fully loaded. What I want is for the image to appear smoo ...

The feature 'forEach' is not available for the 'void' type

The following code is performing the following tasks: 1. Reading a folder, 2. Merging and auto-cropping images, and 3. Saving the final images into PNG files. const filenames = fs.readdirSync('./in').map(filename => { return path.parse(filen ...

Time taken to execute all the tests using the karma runner

We have recently transitioned to running unit tests remotely using browserstack across multiple browsers and operating systems with the help of the karma-browserstack-launcher plugin. The current output of our test run appears as follows: $ grunt unit:re ...

What steps should I take to address and resolve this problem with my Angular $scope?

One of my partials utilizes a single controller named CaseNotesCtrl. However, I am encountering difficulties accessing $scope variables within this partial. Below is the code snippet: <div class="row" ng-show="$parent.loggedin" ng-controller="CaseNotes ...

Enhance your Django webpage with real-time updates using AJAX technology

[Revised for Clarity and Detail] The challenge I'm facing is related to the architecture of my project. I have multiple ideas on how to achieve my goal, but I'm stuck on identifying the correct or most efficient approach. To provide more context ...

Error occurred in the middle of processing, preventing the headers from being set

I created a custom authentication middleware, but encountered an error. I'm puzzled about what's going wrong because I expected the next() function to resolve the issue? app.use(function(req, res, next){ if(req.user){ res.local ...

Send information to modal using Javascript

I am facing an issue when trying to transfer data from JavaScript to a Bootstrap modal. Here is how my code looks: Modal: <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> ...

State is not currently utilizing the variable

const DonorsTables = () =>{ const [search, setSearch] = useState(""); const [countries, setCountries] = useState([]); const [filteredcountries, setFilteredCountries] = useState([]); const getCountries = async () => { try { ...

What could be causing the lack of responsiveness on this page?

I have created a webpage with over 1100 lines of code using JSF 2.0. The page is filled with PrimeFaces components and I have implemented JQuery to control the appearance and disappearance of these components. The webpage functions smoothly on Firefox 4.0 ...

Does AngularJS really allow for seamless event communication between modules?

I am in search of a solution to effectively send an event from one Angular module to another. After browsing through various resources, I stumbled upon a thread that perfectly outlines the solution I had in mind. The thread titled How to send message from ...