Folks, trying to follow example here http://jsfiddle.net/yF45N/. I have JADE file below, which should open up a modal once a table item is clicked. What am I missing?
Thanks!!!!
block Content
if (pendingArray)
legend Pending Requests
table.table-hover.table-condensed
thead
tr
th id
th Email
th foo
th bar
tbody
- each val in pendingArray
tr
data-toggle="modal"
data-id="#{val.id}"
data-target="#orderModal"
href='someModal'
td #{val.id}
td #{val.Email}
td #{val.foo}
td #{val.bar}
orderModal.modal.fade
.modal-dialog
.modal-content
.modal-header
button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
h4.modal-title Title
.modal-body
p body
.modal-footer
button.btn.btn-default(type='button', data-dismiss='modal') Close
button.btn.btn-primary(type='button') Save changes
body
script.
$(function(){
$('#orderModal').modal({
keyboard: true,
backdrop: "static",
show:false,
}).on('show', function(){
var getIdFromRow = $(event.target).closest('tr').data('id');
//make your ajax call populate items or what even you need
$(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'))
});
});
Very Simple, even for a front-end idiot like myself:
tbody
- each val in pendingArray
tr(data-toggle='modal', href='#mvrDisplayModal', data-target="#foo")
td #{val.email}
td #{val.blah}
#mvrDisplayModal.modal.fade
.modal-dialog
.modal-content
.modal-header
button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
h4.modal-title Title
.modal-body
p body
p #{foo}
.modal-footer
button.btn.btn-default(type='button', data-dismiss='modal') Close
button.btn.btn-primary(type='button') Save changes
Related
I have a list of category names that are written in Jade.
ul
li Discussion
li Movie
li Music
li Performance
li Dance
li Theatre
And I have some json, that shows what kind of categories are added to a specific event:
…
values: [
{
ordinal: 50469,
db_value: 626,
id: 50469,
value: "Discussion"
},
{
ordinal: 50470,
db_value: 623,
id: 50470,
value: "Dance"
}
],
…
I have a route, that gets the category values:
res.render("event", {
categories: data.result.properties.category.values
})
How can I achieve an outcome like this, that an if/else checks if the value equals the same thing that's in the li tag and by this adds a class .unactive, if it doesn't exhist in the json array:
<ul>
<li>Discussion</li>
<li class="unactive">Movie</li>
<li class="unactive">Music</li>
<li class="unactive">Performance</li>
<li>Dance</li>
<li class="unactive">Theatre</li>
</ul>
First, as Andrew did, i would simplify the data format. You could either do this in Node before sending it to the template, or using some JS in the template itself. I'll only edit the template here:
- categoryNames = categories.map(function(c){return c.value});
This will create an array of just the names. (And, it doesn't even need underscore.js. ;))
Now, you can simply check if a given name is in the array using indexOf():
ul
li(class=(categoryNames.indexOf("Discussion") > -1 ? "" : "inactive")) Discussion
li(class=(categoryNames.indexOf("Movie") > -1 ? "" : "inactive")) Movie
li(class=(categoryNames.indexOf("Music") > -1 ? "" : "inactive")) Music
li(class=(categoryNames.indexOf("Performance") > -1 ? "" : "inactive")) Performance
li(class=(categoryNames.indexOf("Dance") > -1 ? "" : "inactive")) Dance
li(class=(categoryNames.indexOf("Theatre") > -1 ? "" : "inactive")) Theatre
I would first massage the data a bit to a format that's easier to render, like this:
var _ = require('underscore');
var categoryNames = _.map(data.result.properties.category.values, function(value) {
return value.value;
});
// categoryNames is an array like this: ['Discussion', 'Dance']
res.render("event", {
categoryNames: categoryNames
})
Now you can get the behavior you're looking for like this:
ul
each category in categoryNames
li category
But if you really want to keep the "disabled" cateogry tags around, you can do it with an inline conditional like this:
ul
each category in ['Discussion', 'Movie', 'Music', 'Performance', 'Theatre']
li(class=(categoryNames.indexOf(category) === -1) ? "" : "inactive") #{category}
I'm creating a table container, to which i'm adding select widget,
var layout1 = new dojox.layout.TableContainer({
showLabels: true,
orientation: "horiz",
cols : 2,
spacing: 5,
style: "border: solid 1px LightBlue;",
customClass : "tableContainer"
});
layout.placeAt(divContentNode);
Below is my select widget:
var ran = new dijit.form.Select(
{
id :"srz102" ,
name : "ZEND100",
title : "VAPORTforVA",
maxHeight : '100',
style:"width: 150px",
required:true,
options:v4
}
);
layout1.addChild(ran);
But with this i didn't get title for select widget,so i added
layout1.layout();
which displayed the title for select widget
Now when i try to destroy select widget i'm not able to delete the title
dijit.byId("srz102").destroyRecursive();
I guess you trying to get hold of select node and destroying. That's why your title is not deleting properly. Instead you should try catching its parent and then try destroying the child
If you are using dojo 1.7 + (AMD), you can use:
require(["dojo/dom-construct"], function(domConstruct){
// Destroy a node byId:
domConstruct.destroy("id");
})
For recursive deletion you can use :
dojo.query("id").forEach(dojo.destroy);
However you need to traverse the parent dom-node and delete each of them.
Just FYI dojo.query is very useful to get hold of any node not limited to id, you can get hold through css class like below
dojo.query(".cssClass")
Further ref :http://dojotoolkit.org/reference-guide/1.7/dojo/destroy.html
I have below code in nodejs for selenium using soda script.
If you see my script below, look for verifyData()
There is row testing happening for fixed columns values. I want to generate these asserts dynamically, only row number will vary column will always same, how to achieve this. I can pass row number to this methods.
Second thing, if you see with assert I used function(), can we capture err/assertfail here?
var browser = soda.createClient({
.....
});
browser
.chain
.session()
.setSpeed(speed)
.setTimeout(2000)
.open('/')
.and(login('dev#dev.com', 'x1212GQsdtpS'))
.and(verifyData())
.end(function(err){
console.log('error');
});
function login(user, pass) {
return function(browser) {
browser
.click('css=a#loginButton')
.type('css=input.input-medium.email',user)
.type('css=input.input.pwd',pass)
.clickAndWait('css=a.btn.login')
.assertTextPresent('Clients',function(){ console.log('logged in ok')})
}
}
function verifyData() {
return function(browser) {
browser
//Row 1 testing
.assertText('css=div.keyYears table tbody tr:nth-child(1) td:nth-child(3)','some text',function(){ console.log('looks good')})
.assertText('css=div.keyYears table tbody tr:nth-child(1) td:nth-child(5)','some text')
.assertText('css=div.keyYears table tbody tr:nth-child(1) td:nth-child(6)','some text')
.assertText('css=div.keyYears table tbody tr:nth-child(1) td:nth-child(7)','some text')
//Row 2 testing
.assertText('css=div.keyYears table tbody tr:nth-child(2) td:nth-child(3)','some text1',function(){ console.log('looks good')})
.assertText('css=div.keyYears table tbody tr:nth-child(2) td:nth-child(5)','some text1')
.assertText('css=div.keyYears table tbody tr:nth-child(2) td:nth-child(6)','some text1')
.assertText('css=div.keyYears table tbody tr:nth-child(2) td:nth-child(7)','some text1')
}
}
I got the solution, we have to do something like below:
browser
.chain
.setSpeed(200)
.session()
.open('/')
.click("id=save")
.focus(editor)
.and(function (browser) {
for (var i = 0; i < 10; i++) {
browser.keyDown(editor, '\\40')
}
})
...
First I want render code is:
ul
li
a
the render result should be
<ul>
<li><a></li>
</ul>
then I add conditional:
ul
- if (temp == "blog") {
li.active
- } else {
li
- }
a
but the render result is
<ul>
<li.active></li>
<a>
</ul>
what's wrong with my code? How can I get the same render result as the first one?
Try this:
ul
- if temp === "blog"
li.active
a
- else
li
a
If you prefer not to duplicate the nested a, you can use:
ul
li(class = (temp === 'blog') ? 'active' : '')
a
Also useful for menu lists and tabs, you can inline nesting like this:
ul
li: a
li: a.active
li: a
// ...etc
I have a list (xtype: 'list') and I use an XTemplate to customize it. It looks like this:
itemTpl: new Ext.XTemplate('<div>',
'<span style="display: inline-block; width: 100px">{itemName}</span>',
'<span style="display: inline-block; width: 100px">{price}</span>','</div>')
I would like to change the color of {price} (using css I guess) based on the previous and current value:
If [current value] > [previous value] color it green.
If [previous value] > [current value] color it red.
The price value is updated like this:
var itemList = Ext.getCmp('itemList');
var store = itemList.getStore();
store.getAt(i).set('price', currentPrice);
While i is the number of item (or row in the list) that is updated and currentPrice is the new value. This code is executed by a function that is called once every second.
I know there is an option to have conditions inside an XTemplate, but all the examples I saw compare the new value with a constant. How can I change the color of {price} by comparing the new value to the old one?
You may add 'color' property to store when the store has loaded/created or while it is filling/creating.
store.each(function(item, i) {
var previousItem = store.getAt(i-1);
if (previousItem) {
var previousPrice = previousItem.get('price');
var price = item.get('price');
item.set('color', (price > previousPrice) ? 'green' : 'red');
}
})
Then you can use property in template
itemTpl: new Ext.XTemplate('<div>', '<span style="display: inline-block; width: 100px; color: {color}">{itemName}</span>', '<span style="display: inline-block; width: 100px">{price}</span>','</div>')