Experiencing unexpected behavior when attempting to dynamically add a tab item

<div class="page-content">
  <div class="content-block">
    <div id="tab-holder" class="buttons-row">
      <a href="#tab1" class="tab-link active button">Tab 1</a>
      <a href="#tab2" class="tab-link button">Tab 2</a>
      <a href="#tab3" class="tab-link button">Tab 3</a>
    </div>
  </div>
</div>

How can I dynamically add tabs to the tab holder?

    <a href="#tab1" class="tab-link active button">Tab 1</a>

I tried creating a function, but it doesn't seem to be working:

function createTabButton(_holder, _text, _isActive) {
    var thm = $(`<a class="tab-link button ${_isActive ? 'active' : ''}">${_text}</a>`);
    _holder.append(thm);

    console.log(_text);
}

Do you see anything I might have missed?

javascripthtml-framework-7

Answer №1

I successfully achieved that using only Dom7 (the framework7's own dom manipulator), with a code similar to yours.

For this task, I utilized https://jsonplaceholder.typicode.com/ as a reference point.

<div class="page-content">
  <div class="content-block">
    <div id="tab-holder" class="buttons-row">
      <a href="#tab1" class="tab-link active button">Tab 1</a>
      <a href="#tab2" class="tab-link button">Tab 2</a>
      <a href="#tab3" class="tab-link button">Tab 3</a>
    </div>
  </div>

  <button class="button">add</button>

</div>

Javascript - [Updated with template String]

var myApp = new Framework7();

// Export selectors engine
var $$ = Dom7;


$$("#btnLoad").on('click', function() {

    $$.ajax({
        url: "https://jsonplaceholder.typicode.com/todos",
        data: {
            'userId': 1
        },
        type: 'GET',
      beforeSend: function(){
        $$("#btnLoad").text("Loading...");
      },
        success: function(data) {
            var list = JSON.parse(data);
            for (var i = 0; i < 5; i++) {
                createTabButton($$("#tab-holder"), list[i].id, list[i].completed);
            }
          $$("#btnLoad").text("Tabs Added");
        }
    });
});

function createTabButton(_holder, _text, _isActive) {
    //var thm = $$('<a class="tab-link button ' + (_isActive ? 'active' : '') + '">' + _text + '</a>');
      var thm = `<a class="tab-link button ${_isActive ? 'active' : ''}">${_text}</a>`;
     _holder.append(thm);

}

http://jsfiddle.net/alexprazeres11/0cwvejcx/76/

Tested in Framework7 v1.4.2 and 1.6.4, it may work also on v2.0+.

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

Analyzing two strings as dates within Selenium

Currently, I am utilizing <tr> <td>storeEval</td> <td>var d=new Date(); d.getDate()+'-'+((d.getMonth()+1)) +'-'+d.getFullYear();</td> <td>date2</td> </tr> <tr> ...

javascriptselenium

Stop the form from refreshing the page after submitting a post request to the backend API

I am facing an issue with my React front end and Express back end integration. I have a form in my front end that sends data to the API using two buttons - Submit and Close. The Close button works perfectly by closing the overlay without leaving the page, ...

javascriptnode.jsreactjsapiexpress

A step-by-step guide on implementing a callback function

I am eager to incorporate a callback into this script - specifically the third callback onSlideChangeStart(swiper) found at http://idangero.us/swiper/api/#.V9CMp5grJlY. Since I have never worked with callbacks before, I am unsure of where to begin. In es ...

javascriptjquerycallbackswiper.js

What is the best way to prevent automatic trimming in EJS variable assignment in Node.js?

When I attempt to write a variable from the database into an EJS table, it is being displayed with default trimming by the EJS template. However, I would like to display the variable from the database without any default trimming. I consulted the EJS temp ...

javascriptjquerynode.jsangularjsejs

JavaScript indexOf function not producing the desired results

I am currently experimenting to determine whether a specific value already exists in an array. In this scenario, the value of "node1" remains constant. The two arrays are exactly the same. Yet, the same node is appended to the array twice despite the ind ...

javascript

Angular project icons not displaying in the browser

My current project in Angular was functioning properly until recently. I am facing an issue where the images are not being displayed on the browser when I run ng serve, resulting in a 404 error. Interestingly, everything else seems to be working fine witho ...

javascriptangulartypescriptangular7node-modules

Utilize the objects array property to filter an array of objects

Struggling to wrap my head around this, not sure if it's feasible in this manner but I just can't seem to grasp it. I have an array of objects where each object contains some values and another array of objects. Essentially, I need to filter the ...

javascriptarrays

Braintree drop-in feature now allows for automatic disabling of the submit button while the transaction

I've been struggling with a seemingly simple task that I just can't seem to figure out. I'm using Braintree's dropin UI and I have a submit button that I need to disable while the processing is happening, but I can't seem to find t ...

javascriptjquerybraintree

I am trying to set up an AJAX call in my index.html to connect to a React endpoint, but instead of accessing the intended page, I am getting

I am attempting to execute an AJAX call in my static file index.html to a React endpoint, but instead of the desired response, I am seeing the React homepage. Here is the code snippet from my index.html: <div id="data"></div> <scr ...

javascriptreactjsajax

Tracking your daily nutrition using cronometer with the powerful combination of JavaScript

I'm currently developing a JavaScript cronometer in vueJS. I want the timer to start at 5 minutes (300 seconds) and then continue counting minutes and seconds. Although my cronometer is functioning, I am struggling to get it to start counting minutes ...

javascriptvue.js

Challenges with Validating Bootstrap Datepicker Functionality

I need to restrict the datepicker input control to only allow selection of dates from the current date onwards. Despite trying to implement validation using the bootstrap-datepicker library and the following JavaScript code, I am still facing issues: $(& ...

javascriptjquerylaravel-5bootstrap-4bootstrap-datepicker

Dynamically import React Material UI Icons when needed

The concept here revolves around importing react material UI icons only when necessary, especially in situations where we may not know the icon name during compile time. (Ensuring that we have valid icon names) My method involved using a require statement ...

javascriptreactjswebpackmaterial-uiicons

jQuery compatible JavaScript plugin

Currently, I am in the process of developing a JavaScript plugin. My goal is for it to make use of jQuery functionalities, while also gracefully degrading if jQuery is not present on the page. For instance, jQuery users would initiate a slideshow by calli ...

javascriptjqueryplugins

Using javascript to overlay and position many images over another image

I've searched extensively but haven't been able to find any relevant answers here. Currently, I am developing a hockey scoring chance tracker. My goal is to display an image of the hockey ice where users can click to mark their input. Each click ...

javascriptjqueryhtmlcanvas

Are $.ajax() callback functions not tied to the requests they originate from?

The code is quite intricate, so I have simplified it below in order to verify whether the behavior I am encountering is normal or if there is some other error I have introduced into the code. I have two distinct ajax requests, each with its own unique cal ...

javascriptjqueryajaxtastypie

How to retrieve the third party child component within a Vue parent component

Within my example-component, I have integrated a third-party media upload child component called media-uploader: <example-component> <form :action= "something"> // Other input types <media-upload :ref="'cover_up ...

javascriptvue.jslaravel-5vuejs2vue-component

Having trouble accessing the 'state' property in ReactJS (Gatsby) because it is undefined

Looking for some help with my code: export default class Contact extends React.Component { constructor(props) { super(props); this.state = { password: '', redirect: false, username: '' }; ...

javascriptreactjsevent-handlinggatsby

arrange the elements in a specified sequence

I am trying to sort an array in a specific order var customOrder = { "1st Presentation / Meeting": 0, "Follow-On Meetings": 1, "Hold\/Uncategorized": 2, "MGL": 3, "PGL": 4, "BGL": 5, "RGL": 6, "SGL": 7, "Uncategorized Leads": 8, ...

javascripthtmljqueryarrays

When attempting to loop through an Observable that is of type array using *ngFor, the error message "Cannot read property 'subscribe' of undefined

I can't figure out why this isn't working, even though it seems straightforward. I'm using a service that gives me an observable. There are a few rxjs streams connected to it in the following way: search(searchTerm: string { this.search ...

javascripttypescriptangularreactive-programmingrxjs

Error: The $http variable in Vue Resource is not defined

I encountered an issue with the following code snippet inside my ready method: this.$http.get('url',{},{ headers: { "X-App-Token": "token" } }).then( (data) => this.$set('cdata',data.data)) ...

javascriptvue.jsvue-resource