I'm trying to use Dojo (1.3) checkBoxes to make columns appear/hide in a Dojo Grid that's displayed below the checkBoxes. I got that functionality to work fine, but I wanted to organize my checkBoxes a little better. So I tried putting them in a table. My dojo.addOnLoad function looks like this:
dojo.addOnLoad(function(){
var checkBoxes = [];
var container = dojo.byId('checkBoxContainer');
var table = dojo.doc.createElement("table");
var row1= dojo.doc.createElement("tr");
var row2= dojo.doc.createElement("tr");
var row3= dojo.doc.createElement("tr");
dojo.forEach(grid.layout.cells, function(cell, index){
//Add a new "td" element to one of the three rows
});
dojo.place(addRow, table);
dojo.place(removeRow, table);
dojo.place(findReplaceRow, table);
dojo.place(table, container);
});
What's frustrating is:
Using the Dojo debugger I can see that the HTML is being properly generated for the table.
I can take that HTML and put just the table in an empty HTML file and it renders the checkBoxes in the table just fine.
The page renders correctly in Firefox, just not IE6.
The HTML that is being generated looks like so:
<div id="checkBoxContainer">
<table>
<tr>
<td>
<div class="dijitReset dijitInline dijitCheckBox"
role="presentation" widgetid="dijit_form_CheckBox_0"
wairole="presentation">
<input class="dijitReset dijitCheckBoxInput"
id="dijit_form_CheckBox_0"
tabindex="0" type="checkbox"
name="" dojoattachevent=
"onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick"
dojoattachpoint="focusNode" unselectable="on"
aria-pressed="false"/>
</div>
<label for="dijit_form_CheckBox_0">
Column 1
</label>
</td>
<td>
<div class="dijitReset dijitInline dijitCheckBox"
role="presentation" widgetid="dijit_form_CheckBox_1"
wairole="presentation">
<input class="dijitReset dijitCheckBoxInput"
id="dijit_form_CheckBox_1"
tabindex="0" type="checkbox"
name="" dojoattachevent=
"onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick"
dojoattachpoint="focusNode" unselectable="on"
aria-pressed="false"/>
</div>
</td>
</tr>
<tr>
...
</tr>
</table>
</div>
I would have posted to the official DOJO forums, but it says they're deprecated and they're using a mailing list now. They said if a mailing list doesn't work for you, use StackOverflow.com. So, here I am!
It looks like you forgot to create a <tbody> element.
I also encountered this issue when trying to generate a table using dojo in IE7. The html is there but nothing is rendered. Again, the solution is to use thead, tbody tags.
Related
I want to append an element to a specific element when the user clicks the button. The scenario goes like this. Is there another way to deal with that kind of problem?
<table>
<tbody>
<tr>
<td>
One
<button>delete</button>
<button x-on:click="edit(passIdToFunc)">edit</button>
</td>
</tr>
<tr id="one" style="display: hidden"></tr>
<!-- append x-teleport dom node to here when current value is id = one -->
<tr>Two</tr>
<tr id="two" style="display: hidden"></tr>
<tr>Three</tr>
<tr id="three" style="display: hidden"></tr>
...
</tbody>
</table>
<!--
For the initial render, or if there is no table data,
I would like to append it to somewhere else with display none.
-->
<template x-teleport="computedString">
...
</template>
This looks like the wrong usage for x-teleport, though it's not clear from the example where you are teleporting to. You can just use x-show to toggle display:none if that's what you're looking for.
I've finally made my app in angular 2. Everything is solved, except one thing. When I add item into my table or edited it, I can't see the change until I refresh page or click for example next page button (I have implemented pagination). I included:
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
in this order. My method for adding item is very simple:
addDepartment(item){
this._departmentService.addDepartment(item)
.subscribe(departments => this.department = departments.json());
this.getAll();}
Whhen I add item, and put breakpoint on get method, It is called correctly and I get right information from my DB, but I don't know why view isn't refreshed then. Do you have any idea why is it happened? Thanks for suggestions!
EDIT: department is just department: Department, where Department is interface with properties (departmentNo, departmentName, departmentLocation). The view for adding item looks like:
<form [ngFormModel]="myForm"
(ngSubmit)="addDepartment(newItem); showAddView=false" [hidden]="!showAddView" align="center">
<div>
<label for="editAbrv">Department name:</label><br>
<input type="text" [(ngModel)]="newItem.departmentName" [ngFormControl]="myForm.controls['departmentName']" >
<div *ngIf="myForm.controls['departmentName'].hasError('required')" class="ui error message"><b style="color:red;">Name is required</b></div>
</div>
<br/>
<div>
<label for="editAbrv">Department Location:</label><br>
<input type="text" [(ngModel)]="newItem.departmentLocation" [ngFormControl]="myForm.controls['departmentLocation']" >
<div *ngIf="myForm.controls['departmentLocation'].hasError('required')" class="ui error message"><b style="color:red;">Location is required</b></div>
</div>
<br/>
<div>
<button type="submit" [disabled]="!myForm.valid" class="ui button">Add item</button>
<button><a href="javascript:void(0);" (click)="showHide($event)" >
Cancel
</a></button>
</div>
</form>
and my department table is:
<table align="center">
<thead>
<tr>
<td>#</td>
<td><strong>Department</strong></td>
<td><strong>Department Location</strong></td>
<td><strong>Edit</strong></td>
<td><strong>Delete</strong></td>
</tr>
</thead>
<tbody>
<tr *ngFor="#department of departments | searchString:filter.value ; #i = index">
<td>{{i + 1}}.</td>
<td> {{department.departmentName}}</td>
<td>{{department.departmentLocation}}</td>
<td>
<button class="btnEdit" (click)="showEdit(department)">Edit</button>
</td>
<td>
<button class="btnDelete" (click)="deleteDepartment(department)" >Delete</button>
</td>
</tr>
</tbody>
</table>
With this code, you don't wait for the response of the addDepartment request and execute the getAll request directly.
addDepartment(item){
this._departmentService.addDepartment(item)
.subscribe(departments => this.department = departments.json());
this.getAll();
}
You should move the call to getAll within the callback registered in subscribe. At this moment, the addDepartment is actually done and you can reload the list...
The code could be refactored like this (it's a guess since I haven't the content of addDepartment and getAll methods):
addDepartment(item){
this._departmentService.addDepartment(item)
.subscribe(addedDepartment => {
this.department = this.getAll();
});
}
This issue occurs because of the way you're using departmant and how change detection works. When you use *ngFor="#department of departments", angular change detection looks for a object reference on departments array. When you update/change one of the items in this array object reference to the array itself doesn't change, so angular doesn't run change detection.
You have few options:
1) change reference of the array by replacing it with new array with updated values
2) tell angular explicitly to run change detection (which I think is easier in your case):
constructor(private _cdRef: ChangeDetectorRef) {...}
addDepartment(item){
this._departmentService.addDepartment(item)
.subscribe(departments => this.department = departments.json());
this.getAll();
this._cdRef.markForCheck();
}
I am trying to click on checkbox (which represents as ) in Firefox using Watir. I have code left to me from the previous tester, and this code works in Chrome, but not Firefox.
Here is what I have.
Here is the code that leads to this div:
<div class="x-grid3-body" style="width:515px;" id="ext-gen201">
<div class="x-grid3-row x-grid3-row-first" style="width:515px;">
<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width:515px;">
<tbody>
<tr>
<td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first " style="width: 158px;" tabindex="0">
<div class="x-grid3-cell-inner x-grid3-col-0 x-unselectable" unselectable="on">Organisation</div>
</td>
<td class="x-grid3-col x-grid3-cell x-grid3-td-1 " style="width: 298px;" tabindex="0">
<div class="x-grid3-cell-inner x-grid3-col-1 x-unselectable" unselectable="on">Catch Software</div>
</td>
<td class="x-grid3-col x-grid3-cell x-grid3-td-scopeCheckColumn x-grid3-cell-last x-grid3-check-col-td" style="width: 53px;" tabindex="0">
<div class="x-grid3-cell-inner x-grid3-col-scopeCheckColumn x-unselectable" unselectable="on">
<div class="x-grid3-check-col x-grid3-cc-scopeCheckColumn"> </div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
What I need essentially is to click on this div
<div class="x-grid3-check-col x-grid3-cc-scopeCheckColumn"> </div>
I can't attach screenshots (rating is low), but this div is the checkbox that I need to click.
This piece of code works in Chrome:
#browser.div(:class => 'x-box-inner', :index => 1).table(:class => 'x-grid3-row-table').td(:text => 'Organisation').parent.td(:index => 2)
But in Firefox I can see that Watir is just click on the whole parent div (can see selection appear in browser), not on the checkbox div.
Thank you.
First off, there is only one element in the html you've showed that has the class 'x-grid3-cc-scopeCheckColumn', so is there a reason you can't do:
#browser.td(class: 'x-grid3-cc-scopeCheckColumn').click
If not, you can simplify your element location drastically to get the td you want, since there is only one td that has the text 'Organisation', and .parent would only get the td above it, but it looks like you want the tr tag above that, so perhaps you want:
#browser.td(text: 'Organisation').parent.parent.td(index: 2)
Using an XPath worked for me in Firefox:
#browser.div(:xpath, "//*[#id='ext-gen201']/div/table/tbody/tr/td[3]/div/div").click
I was able to verify it with .flash in place of .click since your div just contains a space and there was nothing to otherwise see.
I'm implementing a jQuery tab in my MVC3 application, but one of the tabs is not sized properly. That is, some of the content is inside the tab, but the following strange formatting on my part is only partially inside the tab:
<div id="tabs">
<ul>
<li>Edit Schedule</li>
...
</ul>
<div id="tabs-1">
...
<div id = "scheduleData">
#Html.Partial("_partialView", ViewData["data"])
</div>
</div>
...
</div>
My partial view renders many tables, one with just a head, and the rest nested inside a jQuery selectable list:
<table>
<thead>
<tr>
<td>ID</td>
...
</tr>
</thead>
</table>
<ol id="selectable>
#foreach (var obj in Model)
{
<li class="ui-widget-content">
<table>
<tr>
<td>#obj.ID</td>
...
</tr>
</table>
</li>
}
</ol>
I'm not sure whether the tab sizing problem is happening because of the partial view, or my very strange formatting, or both.
It is worth noting that only the first table is inside the tab, and any other tables are consistently not in the tab, no matter how large or small the partial view is.
This is obviously a sloppy solution, and I was wondering if there is a better way to render a table row inside a selectable list so the jQuery tab is sized correctly, such as having all the rows in the first table? (which won't work because you can't nest a selectable list inside a table, to my knowledge) I appreciate your input.
The possibility exists to make a table a selectable item, instead of each row, but due to formatting issues I adopted the following solution instead:
$(document).ready(function () {
$("#scheduleTable tr").click(function () {
var href = $(this).find("a").attr("href");
if (href) {
$("#editDialog").dialog({ modal: true });
}
});
});
The markup then has an edit link in each row, which the Javascript watches, then creates a jQuery dialog box.
<table>
<thead>
<th> </th>
...
</thead>
<tbody>
#foreach (var obj in Model)
{
<tr>
<td>Edit</td>
...
</tr>
}
</tbody>
</table>
<div id="editDialog" title="Edit Entry" style="display:none">
...
</div>
This view works well with IE9 and Chrome. However, not with IE8.
When the page is rendered, this is how it looks like:
My HTML (MVC3 View) is as shown below.
<div id="machinedisplay" data-bind="with: selectedMachine" >
<h2><span data-bind="text: MachineDesciption" /></h2>
<!-- ko with: my.vm.machineData -->
<table>
<thead><tr>
<th>Point Name</th><th>Description</th><th>Points Data</th>
</tr></thead>
<tbody data-bind="foreach: Points">
<tr>
<td data-bind="text: PointName()"></td>
<td data-bind="text: PointDesciption()"></td>
<td>
<table style="width:100%;">
<thead><tr>
<th>Name</th><th>Description</th><th>Value</th><th></th>
</tr></thead>
<tbody data-bind="foreach: Params">
<tr>
<td data-bind="text: ParameterName"></td>
<td data-bind="text: ParameterDescription"></td>
<td data-bind="text: StringValue"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- /ko -->
</div>
Any ideas on IE8 work around?
EDIT:
To illustrate this problem on a simpler model, check out this fiddle http://jsfiddle.net/ericpanorel/nzKvb/
I figured that I am running into problems because I am using the "with" or "if" bindings. I read somewhere that this causes problems with IE8.
I used IE9, and if you use your developer tools to switch from IE9 to IE8, this Fiddle doesn't work properly anymore. This fiddle is actually derived from one of knockout's samples (http://knockoutjs.com/examples/gridEditor.html)
EDIT:
I updated the fiddle... http://jsfiddle.net/nzKvb/20/
It has something to do with short-hand closing of tags inside the nested containerless bindings
<!-- ko if: Allowed-->
<h2>
<span data-bind="text: Dummy"/> <===== This will bomb in IE8
</h2>
The jsFiddle had an extra comma at the end of the array, which IE8 was treating as a null object:
var viewModel = new GiftModel([
{ name: "Tall Hat", price: "39.95"},
{ name: "Long Cloak", price: "120.00"},
{ name: "HK 416", price: "2420.00"}, <-- HERE !!!
]);
ko.applyBindings(viewModel);
The fiddle works fine without the comma:
http://jsfiddle.net/XPMUA/
Not sure if this solves your underlying problem but at least the fiddle is working now :-)
The problem is here because
<!-- ko if: Allowed-->
Older IE versions can be picky about using JavaScript reserved words
for property names.
So you should write 'if'
Check Same problem in another link!