Twitter Bootstrap not recognizing class set through Javascript - javascript

I'm a very seasoned writer of JavaScript, so I like to experiment in weird ways to further understand how things work. I've attempted to write an application that works using angular.js and Twitter Bootstrap, yet I am creating all of my elements via JavaScript, not hard-coding them into HTML (I hate writing HTML). So far, everything appears to be working fine, except that Bootstrap will not recognize a class list that I've attached to a table element via JavaScript. Here's a quick snippet example:
var myTbl = document.createElement('table');
myTbl.setAttribute('class', 'table table-hover table-striped table-bordered table-condensed');
The table is created just fine and the class is viewable as an atrribute in the debugger, yet the styles associated to this class list are not being applied to the table via Bootstrap.
I've tried including Bootstrap before I called the function which builds this table as well as I've tried including Bootstrap after I build this table, and this did not make any difference. I am also including angular.min.js after constructing this table and after including Bootstrap. I've also written the same application in HTML, associated an ID to the table with the class, and later pulled that table into a JavaScript variable to investigate it within the debugger, and it is exactly identical to the JavaScript generated table, yet the hard-coded HTML table has the style effects of the class list and the JavaScript generated one does not. If anyone can help me out, it would be greatly, greatly appreciated.
Thanks.

Related

React - creating accordion with bootstrap doesnt expand/close on click

Iam trying to create a accordion from the bootstrap website in React. Iam following this website https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example
I copied their example code and it looks exactly just as the example on the website but the problem is when I click on the accordion nothing happends, it doesn't expand or close. Is there suppose to be a onClick function somewhere in the code that needs to be included?
you need to copy the JS as well as the css code from bootstrap lib.
i suggest to use code from my google search bellow, create a component and just adapt the css style to bootstrap
https://www.google.it/search?q=accordion+example+jsfiddle&oq=accordion+example+jsf&aqs=chrome.1.69i57j0l5.12453j0j1&sourceid=chrome&ie=UTF-8
actually is very easy to build it
Forgive me if I'm totally wrong here, as I am fairly new to web development- but I've used that accordion before and simply copying and pasting their code should do the trick, provided you have added the proper link tags from their "Getting Started" section in documentation set in your index.html (not just CSS but all of the JS links, too).
I hope this helps!!

Using JavaScript with Adobe PDF Action Wizard to modify tags

I am attempting to modify some tags in a PDF document by using the Action Wizard and creating a new JavaScript action.
My eventual goal is to find all tables and keep the inner tags, but remove the table tags (table, tr, td).
I am not sure if it is even possible to do this or not.
For now, just to test to see if I could find all of the table tags (and get the number), I tried this, but it isn't working:
var tables = app.document.getElementsByTagName('table');
var numTables = tables.length;
app.alert(numTables);
If this isn't possible, do you have any other suggestions to modify the tags in a PDF document?
It's not possible using JavaScript. The Acrobat JavaScript API does not have access to the structure tags in a PDF.

Rewriting whole DOM via Javascript

I have searched ALOT for this question and didnt find an answer,
I designed a complex HTML template and I tried to make a Joomla template based on it
I found the whole process time consuming and I cant get exactly same result as I wanted, also even If I do this I dont have a user friendly Joomla panel and for changing every module and component the Admin should know a basic HTML understanding to edit my tags and doesnt mess up my code
so I realized what If I use modern Joomla template instead with a user friendly panel
and bring the content to the page and rewrite the whole DOM via Javascript like this
1)first make variables and store the content on the rendered template
2)$('body').innerHTML = "" (make the DOM empty)
3)$('body').innerHTML => rerwrite my structure using variables I stored
then every element is exactly the same and my css, js files do the rest
Is it usual to do this way?
whats the problem with this method?
Thanks

Riot JS still not rendering yielded tables properly

I am currently writing a generic table component that provides some basic functionality to all tables I want to display on my site. Each actual table will then use this generic table and yield headers and content into the generic table.
With the - at the time of writing - latest version of Riot JS, there still appears to be a problem when yielding content into a table.
More specifically, when I yield into a table, Riot puts this information into the main tag (minus the tr and td tags) but keeps the actual table empty.
https://jsfiddle.net/ytgv5o5k/1/
Is there a fix coming up or a workaround that I can use right now? Some sources mention the data-is qualifier, but I don't see how to use this if I would like to re-use a generic table component.
Thanks a lot!
This is a major pain point when using a framework that utilizes custom html tags. It actually has nothing to do with riot. What you're trying to do is not valid html, so the browser kicks the invalid tags out of the table.
See here: http://riotjs.com/guide/#riot-dom-caveats
If it makes sense in your application to break your table into separate tags, you should be able to handle it like this:
<table-container>
<table>
<tr data-is='table-row' each={ row in rows } row={ row }></tr>
</table>
</table-container>
You won't be able to yield anything into a table that isn't valid html. As far as I know, riot has no concept of processing html before placing it in the DOM, which is when your tags will be moved out of the table. The only possibility of using <yield/> is to place content into cells
<td>
<yield/>
</td>

Using Ajax with Jquery on a Node in Drupal 7

I'm very new to PHP/Drupal. The idea here is I'm trying to grab a dataset from an Energy Star API and transfer that information into a table I created using Ajax. On localhost this works perfectly using Jquery's GETJSON and appending the necessary information to the table with append(). When I try to do this in Drupal, however, nothing works. There is no physical file for this page, it's just a node. I've included the Javascript and CSS pages to the page template with the necessary page path and I know the page can access both because I used Jquery to go between tabs and that works, but I can't get anything Ajax/renewing CSS with table to work.
Do I have to create a module and use a hook menu? I've seen that places but it doesn't seem right seeing that I only have the node to work with.
Thanks in advance!

Categories