I want to add the selected users to a separate table from the list of all users. Similar to the Trello feature, just # and tag their name. I have no idea what to write this function. Any ideas?
This is the form on my interface, and I do not know what to do next in the controller and the form block.
<div class="tab-pane fade" id="group-add-members" role="tabpanel">
<div class="users-manage" data-filter-list="form-group-users">
<div class="mb-3">
<div class="form-group row">
<textarea class="form-control col" name="group-description"
placeholder="Add users by email, each email separated by
commas
e.g: matt#.edu.com, joe#edu.com" rows="3">
</textarea>
</div>
<div class="row align-items-center">
<div class="col">
<button class="btn btn-outline-primary" type="button">
<i class="fad fa-user-plus"></i>Add</button>
<span> or </span>
</div>
<div class="d-none d-md-block col-4 col-lg-5 text-right">
</div>
</div>
<div class="row align-items-center mt-2">
<div class="d-block d-md-none d-sm-block ml-2">
</div>
</div>
</div>
<hr>
<h6>Member info</h6>
<div class="row justify-content-center">
<div class="table-responsive mt-3">
<table class="stripe" id="example" style="width:100%">
<thead>
<tr>
<th></th>
<th class="text-left">Full name</th>
<th class="text-left">Email</th>
<th class="text-left">Student ID</th>\
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="text-left">My name</td>
<td class="text-left">qnv164#edu.com</td>
<td class="text-left">123456789</td>
<td>
<span class="ic-dark"><i class="fad fa-trash-alt"></i></span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th class="text-left">Full name</th>
<th class="text-left">Email</th>
<th class="text-left">Student ID</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
<!-- end div table responsive -->
</div>
<!-- end div row -->
</div>
</div>
{{ profile->description ?? 'Not Available' }}
I am creating a friends component that lists users friends based on a response from an endpoint.
I want to render the responses into rows of a table as part of this I would like to use the bootstrap striped-table class
https://getbootstrap.com/docs/4.0/content/tables/#striped-rows
when I do a v-for the table renders correctly but the rows are only showing one background color
This is my template code
<template>
<div>
<h5 class="mb-4">Friends</h5>
<table class="table table-borderless table-striped ">
<tbody>
<div v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</div>
</tbody>
</table>
<div v-if="!UserStore.friends">
<h6>You don't have any friends :(</h6>
Lets solve that Right now!
</div>
</div>
</template>
You should use a template element to render these rows. .table-striped works with sibling rows and in your code the rows are not siblings because they each have a div parent, so each row is seen as the first row.
<tbody>
<template v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</template>
</tbody>
I am using following bootstrap menu items with My laravel application,
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
</span> Content Management</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Category
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Brand
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Model
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-flash text-success"></span>Province
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
and using this menu bar with #include('menubar) with other blade files. now I need highlight current menu item when I visit each pages. how can I do this?
use
{{ request()->route()->getName() }}
or
{{ route()->currentRouteName() }}
then you can do something like
<a class="{{ request()->route()->getName() === "brands.index" ? "active" : "not-active" }}">
You can use this package I've written to do this: https://packagist.org/packages/arcesilas/active-state
Example with your code:
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Category
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Brand
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Model
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-flash text-success"></span>Province
</td>
</tr>
</table>
</div>
</div>
This package also allows you to check a url, a route with given parameters or a query.
just wondering if anyone knows how i can get an angular expression from within the ng-repeat, in the same object. eg
<!..This is the abgpankit..>
<div ng-repeat="equip in portal[0].equipment[0].sub" id="{{equip.id}}" class="displaydiv">
<div class="contentimg">
<h3>{{equip.item}}</h3>
</div>
<a ng-repeat="x in equip.links" href="#pdfdiv" onclick ="return iframeSrc("{{x.links}}");">
<li>{{x.desc}}</li></a>
<div class="information">
<p>{{equip.info}}</p>
</div>
<div class="items">
<table>
<tr>
<th>Items in Kit</th>
</tr>
<tr>
<td class="icons">
<a href="#panharness" class="panharnessicon">
<div class="iconimg">
<h2>Pan Harness</h2></div></a>
</td>
<td class="icons">
<a href="#displaymodule" class="displaymodicon">
<div class="iconimg">
<h2>Display Module</h2></div></a>
</td>
<td class="icons">
<a href="#halo" class="haloicon">
<div class="iconimg">
<h2>Halo</h2></div></a>
</td>
<td class="icons">
<a href="#edm" class="edmicon">
<div class="iconimg">
<h2>EDM</h2></div></a>
</td>
<td class="icons">
<a href="#dm" class="dmicon">
<div class="iconimg">
<h2>DM</h2></div></a>
</td>
<td class="icons">
<a href="#sft" class="sfticon">
<div class="iconimg">
<h2>SFT</h2></div></a>
</td>
</tr>
</table>
</div>
</div>
Sorry just changed it to the actually code from the site. I believe i have the syntax right, i just though there might be some limitation using an expression in the same object the ng-repeat is defined in.
Once i sort this out i can move further down and fix things up.
Cheers,
Mitchell
For the following link,
<td style="padding-top:3px" align="center">
GNWL200/WL102
<br/>
<a id="17235-SL-GN-0" href="javascript:jpBook($('#17235-SL-GN-0'),'17235','HSRA','SRT','22-9-2017','SL','GN',3,false,0,0,'S');" tabindex="1">Book Now</a>
</td>
If I uses the link as shown below, it succeeds to click
browser.element(link: "Book Now").click
But if I uses the id as shown below it says element is not visible(not present). May I know why?
browser.link(:id, "17235-SL-GN-0").click
Error
Uncaught exception: element located, but timed out after 30 seconds, waiting for #<Watir::Anchor: located: true; {:id=>"17235-SL-GN-0", :tag_name=>"a"}> to be present
C:/Ruby23/lib/ruby/gems/2.3.0/gems/watir-6.8.4/lib/watir/elements/element.rb:633:in `raise_present'
C:/Ruby23/lib/ruby/gems/2.3.0/gems/watir-6.8.4/lib/watir/elements/element.rb:672:in `rescue in element_call'
C:/Ruby23/lib/ruby/gems/2.3.0/gems/watir-6.8.4/lib/watir/elements/element.rb:684:in `element_call'
C:/Ruby23/lib/ruby/gems/2.3.0/gems/watir-6.8.4/lib/watir/elements/element.rb:136:in `click'
C:/Users/rajagopalan.m/RubymineProjects/SeleniumLearning/Rest/TrainTicketBooking.rb:18:in `<top (required)>'
If link is not visible for regular Click() use jsClick:
"arguments[0].click();"
I'm not sure how it looks like in Ruby, but C#, Java looks simillar to:
JavascriptExecutor executor = (JavaScriptExecutor) driver;
executor.executeScript("arguments[0].click();", element);
I found the solution to my question from #yong comment
Actually there are two element present in the page with same id and the first one is invisible and the second one is actual element which I wanted to click, that's what it's throwing the error.
Here is the html file
<td style="padding-top:3px" align="center">
GNWL203/WL105
<br/>
**<a id="17235-SL-GN-0" href="javascript:jpBook($('#17235-SL-GN-0'),'17235','HSRA','SRT','22-9-2017','SL','GN',3,false,0,0,'S');" tabindex="1">Book Now</a>**
</td>
<td style="padding-top:3px" align="center">
<td style="padding-top:3px" align="center">
<td style="padding-top:3px" align="center">
<td style="padding-top:3px" align="center">
<td style="padding-top:3px" align="center">
</tr>
</tbody>
</table>
<span style="font:11px arial;color:red;float:right">* CURR_AVBL : Current Booking Available | RAC : Reservation Against Cancellation | WL # : Wait List | REGRET/WL : No more booking allowed | AVAILABLE : Available | NOT AVAILABLE : Not Available</span>
<br/>
</div>
</div>
<div id="j_idt413" class="rf-p ">
<div id="enqpanelid1" class="rf-p ">
</div>
</span>
<form id="avlAndFareForm" name="avlAndFareForm" method="post" action="/eticketing/trainbetweenstns.jsf" enctype="application/x-www-form-urlencoded">
<input name="avlAndFareForm" value="avlAndFareForm" type="hidden"/>
<div id="avlAndFareForm:trainSchedPanel" style="visibility: hidden;">
<div id="avlAndFareForm:j_idt480" class="rf-p " style="min-height:383px;width:99%;">
<div id="avlAndFareForm:j_idt480_body" class="rf-p-b ">
<ul id="tabul">
<div id="tabcontent">
<div id="c1" class="container-div">
<div id="j_idt382" class="rf-p ">
<div id="j_idt382_header" class="rf-p-hdr ">
<div id="j_idt382_body" class="rf-p-b ">
<table class="t1" cellspacing="0" cellpadding="4px">
<tbody>
<tr>
<tr>
<td style="text-align: left;padding-left: 1em;">
<td style="padding-top:3px" align="center">
GNWL203/WL105
<br/>
**<a id="17235-SL-GN-0" href="javascript:jpBook($('#17235-SL-GN-0'),'17235','HSRA','SRT','22-9-2017','SL','GN',3,false,0,0,'S');" tabindex="1">Book Now</a>**
</td>