The table is hidden and the buttons are unresponsive when inserted using jQuery

Question

The table is hidden and the buttons are unresponsive when inserted using jQuery

Exploring blueimp's jQuery-File-Upload Demo has been occupying my time recently. After studying it for several days, I feel like I've gained a solid grasp of how it functions. However, as someone with limited experience in web development, there is one particular issue that is piquing my curiosity.

Within the Basic-UI-Plus section of the demo, files queued for upload (those selected via the Add button) are displayed using JavaScript-Templates.

<table role="presentation" class="table table-striped">
        <tbody class="files"></tbody>
 </table>

The template is rendered and its output is placed within the block designated by the "files" class, which in this case is the "tbody" block.

However, when attempting to include the table tags from the template as well:

<div class="files">
     <!-- Template's output appears here: containing <table></table> -->
</div>

While FireBug's DOM viewer indicates that everything is rendering correctly, the table itself remains invisible. Through experimenting with different layouts, I discovered that removing the "fade" class from the "tr" element generated by the template would make the table visible. Yet, doing so causes disruption to the functionality of the demo, rendering neither of the start buttons operational.

I have provided links to two jsfiddles:

The functional one correctly displays the table of queued files. Upon clicking either of the 'Start' blue buttons, an attempt to upload will occur resulting in the expected server not found message.

The perplexing one fails to display any table at all, despite appearing correctly in firebug. By either eliminating the "fade" class or incorporating the "in" class as recommended below, visibility is restored – but both start buttons cease to be effective.

If anyone can shed light on this enigmatic behavior, I would greatly appreciate it! Thanks!

javascript jquery html css

Answer 1

Answer №1

When an element has the fade class, it becomes completely opaque, which is why it may appear invisible. To make it visible again, simply add the in class to the element as well. This adjustment will result in the element being visually displayed properly. For a visual demonstration, you can refer to the following link: http://jsfiddle.net/xkych55n/1/. Pay attention to the slight difference at line 163 in the HTML code.

Answer 2

When an element has the fade class, it becomes completely opaque, which is why it may appear invisible. To make it visible again, simply add the in class to the element as well. This adjustment will result in the element being visually displayed properly. For a visual demonstration, you can refer to the following link: http://jsfiddle.net/xkych55n/1/. Pay attention to the slight difference at line 163 in the HTML code.

Answer 3

Answer №2

One issue arises from the script assuming that the files are direct descendants of the "files" container.

For instance, if you have

<table role="presentation" class="table table-striped"><tbody class="files">

, it identifies the children of <tbody> as the individual files wrapped in <tr> tags.

To address this, modifying the structure to

<div class="files"><tableclass="table"><tbody>

results in the script interpreting the <table> itself as a file rather than the <tr> elements.

A simple fix involves altering the HTML to

<div class="files"><table role="presentation" class="table table-striped"><tbody class="files"></tbody></table></div>

, keeping the JavaScript intact without any changes.

An alternative approach entails eliminating the table altogether and ensuring that the files directly populate the container. For example:

Container:

<div class="files"></div>

Template:

<!-- Template for displaying uploadable files -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
   <div class="template-upload fade">
      <div>
          <span class="preview"></span>
      </div>
      <div>
          <p class="name">{%=file.name%}</p>
          <strong class="error text-danger"></strong>
      </div>
      <div>
          <p class="size">Processing...</p>
          <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
      </div>
      <div>
          {% if (!i && !o.options.autoUpload) { %}
              <button class="btn btn-primary start" disabled>
                  <i class="glyphicon glyphicon-upload"></i>
                  <span>Start</span>
              </button>
          {% } %}
          {% if (!i) { %}
              <button class="btn btn-warning cancel">
                  <i class="glyphicon glyphicon-ban-circle"></i>
                  <span>Cancel</span>
              </button>
          {% } %}
      </div>
   </div>
{% } %}
</script>

Subsequently, adjustments must be made to the styling. View a functional jsfiddle here.

Note: Correct the errors on lines 191 and 236 where </table></tbody> should be </tbody></table>.

Answer 4

One issue arises from the script assuming that the files are direct descendants of the "files" container.

For instance, if you have

<table role="presentation" class="table table-striped"><tbody class="files">

, it identifies the children of <tbody> as the individual files wrapped in <tr> tags.

To address this, modifying the structure to

<div class="files"><tableclass="table"><tbody>

results in the script interpreting the <table> itself as a file rather than the <tr> elements.

A simple fix involves altering the HTML to

<div class="files"><table role="presentation" class="table table-striped"><tbody class="files"></tbody></table></div>

, keeping the JavaScript intact without any changes.

An alternative approach entails eliminating the table altogether and ensuring that the files directly populate the container. For example:

Container:

<div class="files"></div>

Template:

<!-- Template for displaying uploadable files -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
   <div class="template-upload fade">
      <div>
          <span class="preview"></span>
      </div>
      <div>
          <p class="name">{%=file.name%}</p>
          <strong class="error text-danger"></strong>
      </div>
      <div>
          <p class="size">Processing...</p>
          <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
      </div>
      <div>
          {% if (!i && !o.options.autoUpload) { %}
              <button class="btn btn-primary start" disabled>
                  <i class="glyphicon glyphicon-upload"></i>
                  <span>Start</span>
              </button>
          {% } %}
          {% if (!i) { %}
              <button class="btn btn-warning cancel">
                  <i class="glyphicon glyphicon-ban-circle"></i>
                  <span>Cancel</span>
              </button>
          {% } %}
      </div>
   </div>
{% } %}
</script>

Subsequently, adjustments must be made to the styling. View a functional jsfiddle here.

Note: Correct the errors on lines 191 and 236 where </table></tbody> should be </tbody></table>.

The table is hidden and the buttons are unresponsive when inserted using jQuery

Answer №1

Answer №2

Similar questions

What is the best way to position a <label> to the left of an <input> field?

Unusual Login Problem Involving Ajax, jQuery, and PHP

What is the best way to load the contents of an HTML file into a <div> element without it behaving as an object?

retrieve the current image source URL using JavaScript

JavaScript - Validation Tool for Bootstrap

Running NPM module via Cordova

Mongoose has a tendency to duplicate the mongodb collection within a single instance

What is the most effective way to use Javascript to update an image depending on the selected value in a dropdown

Discover the inner workings of the code below: set a variable called "start" to the current time using the new Date().getTime() method. Create a loop that continuously checks if

Displaying Previously Selected Value in HTML Dropdown Menu

The PHP script encounters an Ajax request and returns a null response

Is the for loop in Node.js completed when making a MySQL call?

The button is converting my text to a string instead of the integer format that I require

Getting a specific piece of information from a JSON file

Struggling to capture a "moment in time" of a form without losing any of the data

Error in Vue.js: "Trying to access properties of an object that is undefined (specifically '$refs')"

Populate a table cell with a div element in HTML

Showing particular URL text upon opening a new window using JavaScript

Is there a way to soften the repetitive elements in the background image?

What is the best way to include multiple <p> elements in a row using Bootstrap?