I am running AngularJS 1.2.3 and Bootstrap3 to create a simple task list app.
The code and Bootstrap3 CSS works everywhere (IE11.x, Chrome v31.0.1650.63 m, Opera v18.0.1284.63), except FireFox 25.0.1
If I add the link to bootstrap3 via
<link href="3rdPartyLibs/bootstrap3/css/bootstrap.min.css" rel="stylesheet">
then when AngularJS ng-repeat runs to create the table rows then FireFox v25.0.1 does not render the table header or rows and display them to the user However, if you look at the source, they are being created.
Here's an image of the page and an image of the source:
It should look like this:
FireFox displays this (notice there are no rows):
In FireFox, if I click the [Add New Task] button numerous times, it actually alters the DOM as I expect it to (adding rows to the table), but it doesn't display that to the user. However, the source is altered -- rows are added to the table -- and the source looks like this:
Referencing Bootstrap2 Makes It Work
All I have to do to make it work is reference Bootstrap2 on my machine (i have both locally) by altering the link to : (notice there is no 3 in the bootstrap directory.
<link href="3rdPartyLibs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
After I do that, it works in FireFox too and looks like:
Does bootstrap3 work in FireFox? Is there some special initialization I have to do?
Is Bootstrap3 not ready for prime-time, or is it FireFox?
Figured It Out While Attempting To Convert To Bootstrap2
I decided to convert this thing to work with Bootstrap2 since that would mean all browsers would work. While doing that I discovered that if I simply add a wrapper to my table, then it fixes the problem.
Here's a summary of what I had and what I did:
***note:**If you see unclosed tags, that is bec. it's a summary, please don't try to tell me I need to close those tags. It is valid HTML in the real thing. thanks.*
I had
<html>
<div>
<button1>
<button2>...
</div>
<table>
<thead>
<th>
</thead>
<tbody>
<tr ng-repeat="t in allTasks"
</tbody>
</table>
</html>
I simply wrapped my table in another div and now it works in FireFox. Looks like this:
<html>
<div>
<button1>
<button2>...
</div>
<div>
<table>
<thead>
<th>
</thead>
<tbody>
<tr ng-repeat="t in allTasks"
</tbody>
</table>
</div>
</html>
Now it looks like it should in FireFox
Related
I am working on selenium webdriver and i want to insert data into the tables which are provided on web site, i have used sendkeys method but its not working for me. is there any other way to insert data into tables ?
Inserting data using selenium the only way to use is sendkeys() method. If I understand correct, your html table will be like below:
<html>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>
<input></input>
</td>
<td>
<input></input>
</td>
<td>
<input></input>
</td>
</tr>
</table>
</body>
</html>
Get the xpath of the input table row of nth column, and use sendkeys() method
driver.findElement(By.xpath("html/body/table/tbody/tr[2]/td[1]/input")).sendKeys("Alice");
driver.findElement(By.xpath("html/body/table/tbody/tr[2]/td[2]/input")).sendKeys("Smith");
which works for me as code written above. Hope it will help you.
Before clicking to the cell it was having class attribute value emplty after clicking it switches from empty to current.
So now i am clicking every cell and then inserting value within it.
It is working like this now.
I am using express server and angular client. I use jade to write express template and the code is very clean.
for example, in index.jade
html
head
title!= title
body
h1!= message
Then I can just compile the jade file into html file
app.get('/', function (req, res) {
res.render('index', { title: 'Hey', message: 'Hello there!'});
});
Now I am moving some logic to the client to prevent page loading. The drawback is that angular template is as verbose as normal html code. Files get long and messy soon.
For example, in my profile template, I have this
<div class="my-panel-body">
<table class="my-table">
<!--email-->
<tr>
<th>Email</th>
<td>{{entity.email}}</td>
</tr>
<!--gender-->
<tr>
<th>Gender</th>
<td>{{entity.meta.gender}}</td>
</tr>
<!--dob-->
<tr>
<th>Date of Birth</th>
<td>{{entity.meta.dob}}</td>
</tr>
<!--country-->
<tr>
<th>Country</th>
<td>{{entity.meta.country}}</td>
</tr>
<!--city-->
<tr>
<th>City</th>
<td>{{entity.meta.city}}</td>
</tr>
<!--status-->
<tr>
<th>Status</th>
<td>{{entity.meta.status}}</td>
</tr>
It would be great if I can write things like
div
table
head
tr
th Date of Birth
td {{entity.dob}}
tr
th Email
td {{entity.email}}
It doesn't have to be jade. I am ok with any language as long as its clean and short
Jade runs on the server and Angular runs on the client. When Angular requests the template, it will ask the server and the server will process the Jade template and respond with the generated HTML which is then a valid Angular template.
As long as you're not using any kind of pre-processor to package the Angular templates into a single file, then using Jade on the server to generate Angular templates for the client works fine. If you are using a pre-processor, then you need to run Jade first (which is also possible--Jade is not tied to Express).
Not necessarily related to this question, but it's also useful to note that Angular is not tied to HTML. Any tag based language that the browser supports will work with Angular--SVG, VRML, MathML, etc.
So what you can do is write them how you want and then before angular loads create a module called templates that uses $templateCache. You can put them in there once they're parsed: https://docs.angularjs.org/api/ng/service/$templateCache
If you need it rendered on the fly you'll have to modifiy how $http.get works in your .config and check to see if it's a template and if it is pass it through your renderer.
<td id="ext-gen383" class="x-toolbar-cell">
<table id="ext-comp-1144" class="x-btn x-btn-icon" cellspacing="0">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<tr>
<td class="x-btn-ml">
<td class="x-btn-mc">
<em class=" x-unselectable" unselectable="on">
**<button id="ext-gen384" class="x-btn-text x-tbar-page-last" type="button">** </button>
</em>
I tried to click the button. Please see the html above. Tried so many ways.
eg:
//*[contains(#class,'x-btn-text x-tbar-page-last')] or
//button[contains(#class,'x-btn-text x-tbar-page-last')]
But still not working.
I'm guessing that only the number at the end is generated. Try:
By.cssSelector("em.x-unselectable > button[id^='ext-gen']")
Also, looking at that <em>, are you sure that that class isn't making the button NOT clickable? By the name, it looks like it disables clicks.
Its hard to tell without seeing the full html of the page. Since ExtJS generates random ids, there really are not any good properties to use for finding the element.
I would recommend just using an XPath, and then use an index (if your page has multiple button elements):
//button[1]
And adjust the index accordingly until you get the correct button to click.
Likewise, you could use the WebDriver API for driver.findElements, which will return a collection of all matching items, and then you could apply the index to that collection to get the correct button.
I am developing a application in which one of my template renders a table with n number of rows. Now in each row, i have a column with buttons like edit and delete.
When clicked on edit, a edit form appears in the same window in some div. That form needs to be populated with values fetched from backend.
Now nothing great in this.
My problem is this:
I have a view which renders the complete table using the following template structure:
<script type="text/template" id="ledgersing">
<div class="span6 widget">
<div class="widget-header">
<span class="title">Ledgers</span>
<button class="btn btn-danger pull-right" id="addLedgerButton">Add Ledger</button>
</div>
<div class="widget-content">
<table width="100%" class="table table-striped dataTable">
<thead>
<tr><th>Name</th><th>Email</th><th>Phone</th><th>Action</th></tr>
</thead>
<tbody>
<% _.each(ledgers,function(data){ %>
<tr>
<td><%= data.name %></td>
<td><%= data.email %></td>
<td><%= data.contact_number %></td>
<td><span onClick="alert(<%= data.id %>)">x</span></td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div >
</script>
In this it just alerts a id when clicked on x. Now do i need to necessarily use onClick event like this? I mean that i will need the id in whatever construct i use for processing. What can be a better solution? I know backbonejs can handle this mess with ease if application is structured properly.
So essentially i want to know from experts, what will they do in such a scenario. How will they structure the application? I am novice to this frontend framework.
Instead of using _.each in your templates, I'd go with one view per table row as each one has some bit of complexity (edit, delete)
In these view, you use the events hash to register your DOM events. Never use onclick in your HTML, this is a really bad practice.
Don't hesitate to look at the TodoMVC Backbone example for ideas on how to organize your app.
I'm also developing a backbone application for the first time and went thru exactly the same mistake.
I first I just tried to translate my php / asp / ruby / whatever_server_side_template_technology into underscore templates, and got something pretty much like what you had.
Now I can realize it's a mistake. You should use subviews. The events and the associated model will be connected to that subview. Pretty soon you'll have lots of view listening to events and updating themselves when data changes, but if you're carefull it will be ok.
Here's a demo app I'm working on: https://bb-jugar.rhcloud.com/index.html#Wine
and here's the github repo: https://github.com/opensas/BackboneBootstrap
This is how I solved it: https://github.com/opensas/BackboneBootstrap/blob/master/demoapp/js/src/views/crud/RowsView.js
Getting this error when a page is being loaded with angular js in IE9. No issues with Chrom/FF.
"Unable to get value of the property 'nodeName': object is null or undefinedundefined"
Any pointers would help.I thought this was fixed as part of Angular js 1.0.1 release.
I got this error in IE9 when I accidentally had the following illegal markup.
<table>
<h3>foo</h3>
..... blah
</table>
Maybe run a html lint to make sure you're not violating any rules like that.
The problem was:
<table>
<tr ng-repeat="p in list">
<td>{{p.f1}}</td> {{p.f2}}
</tr>
<table>
Remember <tr> should contain only <td> tag not any another tag or raw text according to the HTML specification. Modern browsers (including IE 10) can deal with that mistake but in IE 9 angular raises an error.
Most probably you messed up with the syntax inside the
<table> <SOMETHING> </table>
I suggest you copy the DOM from browser and do a check on the https://validator.w3.org/check .
Look for errors like : document type does not allow element "SOMETHING" here; missing one of "TH", "TD" start-tag .
I got this error on angular-perf.js. If you add an conditional comment to exclude IE, it will work, but you won't be able to use angular-perf in IE.
For me the culprit was a thead tag in the table:
<table>
<thead>bla</thead>
...
</table>
For me, it was a case of having a table row inside of a div. I was fine as soon as I removed the intervening div.
<table>
<div>
<tr></tr>
</div>
</table>
for me the issue was << before Back hyperlink. I used htmllint and resolved all illegal mark up error except the ones for angular.
I had the same problem and it was because in a <table> I had put some <h3> not wrapped in <tr> and <td>, and also, I have some <br> and <br/> tags, which should better be <br />, for XHTML's sake.