There are two each loops , the outer loop 'fields' 'name' value is referenced by the inner loop using {{lookup this ../name}} and is rendering correctly.Each {{../message}} can contain an element {{name}}. I wish with the '{{lookup this ../name}}' being null or undefined that renders nothing rather that a blank space. I was hoping there was an easy way to us if to resolve this.I tried to use an {{#if this ../name}} {{/if} around the area but an error generated e.g.
{{#each ../message}}
{{#if this ../name}}
<a href = "https://issues.jboss.org/browse/{{key}}">
<button class="mini ui blue button"><i class="key icon"></i> {{key}}</button></a>
<button class="mini ui blue basic button">{{lookup this ../name}}</button><br>
{{/if}}
{{/each}}
TypeError: Cannot read property 'includeZero' of undefined
Here is the code as it stands.
<div class="ui raised segment">
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i>
Results
</div>
<div class="content">
<p class="transition hidden">
<div class="ui styled accordion">
{{#each fields}}
<div class="title">
<i class="dropdown icon"></i>
{{name}}
</div>
<div class="content">
<p class="transition hidden">
{{#each ../message}}
<button class="mini ui blue button"><i class="key icon"></i> {{key}} </button>
<button class="mini ui blue basic button">{{lookup this ../name}}</button><br>
{{/each}}
</p>
</div>
{{/each}}
</div>
</p>
</div>
Related
So I'm struggling to format an accordian in bootstrap 4 which I'm using alongside django
The basic issue with my formatting is illustrated in the picture below. The headline in the text is spilling over to outside the column of the accordian. I feel like this should be a simple fix but I can't figure it out. Code pasted below
<div class='col-xs-12 col-md-4'>
<h3> ATP tennis </h3>
<hr/>
<div id="accordion">
{% for obj in tennis %}
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<button class="first1 btn btn-link collapsed newwrap" data-toggle="collapse"
data-artid="{{obj.id}}" data-target="#tnis_{{ obj.id }}" aria-expanded="false"
aria-controls="tnis_{{ obj.id }}">
{{obj.headline}}
</button>
</h5>
</div>
<div id="tnis_{{ obj.id }}" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body body_pad"><a href='{{obj.url}}' target="_blank" class='body_col'>
{{obj.summary}} </a><br>
<div class="rght3">
<i id="{{obj.id}}" class="likes fa fa-thumbs-up" data-artid="{{obj.id}}" style="font-size:25px;color:#6666ff;"></i>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
I feel like this should in theory be a pretty simple fix. Any help would be much appreciated. The {{obj.headline}} is the culprit that is spilling over (which sits within a button tag)
I use the Handlebars template engine:
`{{#each classes}}
<div class="col_4">
<h4>{{this.title}}</h4>
<p>{{this.description}}</p>
<a class="button" href="/classes/{{_id}}/details">View Class</a>
</div>
{{/each}}`
Why is it not possible to address title and description as individual fields of this?
If I use "this" like this:
{{#each classes}}
<div class="col_4">
<h4>{{this}}</h4>
<p>{{this}}</p>
<a class="button" href="/classes/{{_id}}/details">View Class</a>
</div>
{{/each}}
all fields are displayed merged.
The following code works with an earlier version:
{{#each classes }}
<div class="col_4">
<h4>{{title}}</h4>
<p>{{description}}</p>
<a class="button" href="/classes/{{_id}}/details">View Class</a>
</div>
{{/each}}
I am trying to style the post in the loop in alternate styling using Custom Content Short code plugin. Some what like this.
Example image of post styling using bootstrap col-offset
This is what i'm trying
<?php start_short(); ?>
[loop type=service orderby=date order=ASC]
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
[/loop]
<?php end_short(); ?>
What I want to display is:
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
<div class="jumbo" style="background-image: url([field image-url]);">
<div class="blackBG row">
<div class="col-md-5 col-md-offset-7 BGdark opaque page-block-full wow fadeInRight" data-wow-duration="0.40s" data-wow-delay="0.50s">
<h1><b class="square BGsec">1</b><small>[field title]</small></h1>
<p>[content more=true more=... length=200]</p>
<a class="btn btn-default light" href="[field url]" title="DUX Technology - [field title]">Check Now <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
</div>
How can I achieve this?
The above code was generating a loop of post in WordPress with single class of col-md-offset-7 to every post.
What I did was use jQuery even function to delete class from alternate post.
$("div.service-post:even").removeClass("col-md-offset-7");
I'm trying to use Semantic.ui's dropdown in my Meteor.js + React.js app. Everything else with Semantic.ui works fine, but I can't make the dropdown menu work. Here's my code:
NavigationMain = React.createClass({
componentDidMount() {
$('.ui.dropdown.right').dropdown();
},
componentDidUpdate() {
$('.ui.dropdown.right').dropdown('refresh');
},
_openChat(){
console.log("click");
},
render(){
return (
<div className="ui top attached menu">
<div className="ui dropdown icon item" onClick={this._openChat}>
<i className="comments outline icon"></i>
</div>
<div className="ui dropdown right icon item">
<i className="wrench icon"></i>
<div className="menu">
<div className="item">
<i className="dropdown icon"></i>
<span className="text">New</span>
<div className="menu">
<div className="item">Document</div>
<div className="item">Image</div>
</div>
</div>
<div className="item">
Open...
</div>
<div className="item">
Save...
</div>
<div className="item">Edit Permissions</div>
<div className="divider"></div>
<div className="header">
Export
</div>
<div className="item">
Share...
</div>
</div>
</div>
</div>
);
}
});
I have also tried using Reacts ref attribute to reference the element like this:
$(this.refs.menu).dropdown();
But it doesn't seem to help either.
All the examples I've found, for example the Semantic.ui's official integration doc (http://semantic-ui.com/introduction/integrations.html), work like this and I've made it work before without React. That's why I'm starting to feel helpless.
Any help with this would be appreciated.
Works for me.
var Content = React.createClass({
componentDidMount: function() {
$('.ui.dropdown').dropdown()
},
render: function () {
return <div className="ui dropdown">
<div className="text">File</div>
<i className="dropdown icon" />
<div className="menu">
<div className="item">New</div>
<div className="item">
<span className="description">ctrl + o</span>
Open...
</div>
<div className="item">
<span className="description">ctrl + s</span>
Save as...
</div>
<div className="item">
<span className="description">ctrl + r</span>
Rename
</div>
<div className="item">Make a copy</div>
<div className="item">
<i className="folder icon" />
Move to folder
</div>
<div className="item">
<i className="trash icon" />
Move to trash
</div>
<div className="divider"></div>
<div className="item">Download As...</div>
<div className="item">
<i className="dropdown icon" />
Publish To Web
<div className="menu">
<div className="item">Google Docs</div>
<div className="item">Google Drive</div>
<div className="item">Dropbox</div>
<div className="item">Adobe Creative Cloud</div>
<div className="item">Private FTP</div>
<div className="item">Another Service...</div>
</div>
</div>
<div className="item">E-mail Collaborators</div>
</div>
</div>
}
});
ReactDOM.render(
<Content />,
document.getElementById('container')
);
Here is a fiddle
https://jsfiddle.net/85z7o3n2/
I am trying to use watir to download files from a web page. Trying to figure out how to click the 'download icon' and then save the file.
The files are in a table, and I want to download each file with the word 'done' in the column and then same it as the report name.
The HTML is below:
<div class="portlet" id="homeStatus">
<div class="portletHeader statusHeader">
Reports and Request Status
</div>
<div class="portletContent" id="statusContent">
<div class="status">
<div class="row-fluid boldText statusHeaderRow">
<div class="span3">Name</div>
<div class="span2">ID</div>
<div class="span3">Date</div>
<div class="span1">Status</div>
<div class="span3">Actions</div>
</div>
<div class="row-fluid statusResultsText">
<div class="span3 bold">
<span class="reportName">report2</span>
</div>
<div class="span2">429696109</div>
<div class="span3">2015-06-14 20:06:55</div>
<div class="span1">Done</div>
<div class="span3 statusResultsActions iconSize16 statusActionPad" id="374189255">
<i class="icon-download-alt mediumBlueIcon downloadIcon" id = "/decision_support/Status_retrieve_request.aspx?questionid=Q10201&applicationid=300&JobId=429696109&status=D&Extension=xls&filename=/Outbound06/q3bk06m_429696109_A14A90C6XB906X4F05X8539XDE448240CE97&reqname=report2,429696109" title="Download"></i>
</i>
<i class="icon-cog mediumBlueIcon modifydrequestIcon" id = "d_/decision_support/Report_Builder.aspx?country_cd=CA&qid=Q10201&exe_id=291&AppId=300&divid=1&JobId=429696109&reopen=true" title="Modify"></i>
</div>
</div>
<div class="row-fluid statusResultsText alternateBackground">
<div class="span3 bold">
<span class="reportName">Report Sun Jun 14 20:56:46 2015</span>
</div>
<div class="span2">429695641</div>
<div class="span3">2015-06-14 20:01:34</div>
<div class="span1">User Error</div>
<div class="span3 statusResultsActions iconSize16 statusActionPad" id="374188794">
</div>
</div>
</div>
</div>
</div>
# iterate through rows
Browser.divs.each do |row|
if row.div(:class => "span1").text == "Done"
report_name = row.span(:class => "reportName").text
row.divs.last.is.each do |i|
# move the mouse to <i> tag and click the <a> link, if <i> is an icon and <a> link is not present
Browser.driver.action.move_to(i.wd).click.perform
end
end
end