I am trying to put an mdl-switch inside an mdl-card which sits inside an mdl-grid.
the mdl-switch works fine if placed outside the card but just appears as a checkbox inside the card.
<script type="text/ng-template" id="nodes.html">
<h4 class="mdl-typography--display-1 pageTitle">asdf</h4>
<div class="mdl-grid">
<div ng-repeat="a in b" class="mdl-cell mdl-cell--4-col">
<div class="status-card mdl-card mdl-shadow--2dp status-green">
<div class="mdl-card__title mdl-card--expand">
<h4 style="width: 100%">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="BSL">
<input type="checkbox" id="BSL" class="mdl-switch__input" ng-model="a.asdfChk" />
<span class="mdl-switch__label">
<small>ASDF</small>
</span>
</label>
</h4>
</div>
<div class="mdl-card__actions mdl-card--border">
<div class="mdl-layout-spacer"></div>
</div>
</div>
</div>
</div>
Related
<div class="row" style="margin: auto; max-width: 850;">
<h1 style="text-align: center">User Registration</h1>
<!-- <div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk" style="color: red"></span>Required Field</strong></div>-->
<form role="form" action="/users/addUser" method="POST">
<div class="form-group">
<div class="span6">
<div class="col-lg-4">
<div class="form-group">
<label for="InputEmail">Username</label>
<div class="input-group">
<input type="text" style="width: 180%" class="form-control" id="username" name="username" placeholder="username" required>
<!--
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
-->
</div>
</div>
</div>
</div>
<div class="span6">
<div class="col-lg-4">
<div class="form-group">
<label for="InputEmail">Password</label>
<div class="input-group">
<input type="password" style="width: 180%" class="form-control" id="password" name="password" placeholder="password" required>
<!--
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
-->
</div>
</div>
</div>
</div>
<!--
<div class="form-group">
<label for="InputMessage">Enter Message</label>
<div class="input-group">
<textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info float-xs-right">-->
<div class="col-lg-5 push-md-1">
<div class="col-md-12">
<% if(isRegistered) { %>
<div class="alert alert-success">
<strong><span class="glyphicon glyphicon-ok"></span> <%= msg %>.</strong>
</div>
<% } else { %>
<div class="alert alert-danger">
<span class="glyphicon glyphicon-remove"></span><strong> <%= msg %> </strong>
</div>
<% } %>
</div>
</div>
<br>
<br>
<br>
<hr>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info float-xs-right">
</form>
</div>
As shown above, if i use "If-else " statement with EJS, my form disappears and if i remove it, my form appears on the browser again.
What i'm trying is to have a registration page where if the user already exists, an alert message to be displayed on the corner side of the browser saying, 'user already exists'. By the way this alert message is coming from my db (Oracle 11g).
My html looks like this:
<div class="row">
<div class="col-md-7">
<ul class="breadcrumb">
<li id="get_data">Get data</li>
<li id="sampling_task">Sampling</li>
<li id="confirm_task">Confirmation</li>
</ul>
<div class="container-fluid">
<form action="#" method="post" enctype="multipart/form-data" role="form" class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label for="id_fileA" class="col-sm-3 control-label" style="text-align: left">
Select dataset A<span class='required_label'>*</span>
</label>
<div class="col-sm-9">
{{ form.fileA|attr:"class:form-control" }}
</div>
</div>
<div class="form-group"></div>
<div class="form-group">
<label for="id_fileB" class="col-sm-3 control-label" style="text-align: left">
Select dataset B<span class='required_label'>*</span>
</label>
<div class="col-sm-9">
{{ form.fileB|attr:"class:form-control" }}
</div>
</div>
<div class="form-group"></div>
<div class="form-group" id="sample_btn" style="display: none">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<input type="button" name="theButton" id="sample-step" value="Start Sampling" class="btn btn-success btn-large disabled" style="border-radius: 5px;">
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3" id="sample_msg" style="display: none;">
<p id="sample_text" style="font-size: medium">
Some ABCD message
</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3" id="get_sample_confirm_msg" style="display: none;">
<p>
<input type="button" style="height: 40px; width: 140px; border-radius: 5px" name="YesButton" id="accept-step" value="Accept & Continue" class="btn btn-success disabled">
<input type="button" style="height: 40px; width: 140px; border-radius: 5px" name="NoButton" id="cancel-step" value="Cancel Sampling" class="btn btn-danger disabled">
</p>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-5">
</div>
</div>
The backend is a javascript and on button click, it do processing and if something fails the javascript code update the message.
var error = "<div class='alert alert-danger'><p>We encountered an error while sampling: <br /><strong>Sampling failed!!</strong></p>"; error += "<p>Please <a href='mailto:abcd#gmail.com'>contact us</a> if this error persists.</p>";
error += "</div>";
$('#sample_msg').html(error);
Now, in my selenium code if I do this:
sample_msg = self.driver.find_element_by_id('sample_msg')
I get an empty list result. What I want is to do is read the error in the "sample_msg" class if any and I have tried few things but its not working out. Help is appreciated. Thanks.
If you want to get access to hidden text you might need to use below code:
sample_msg = self.driver.find_element_by_id('sample_msg').get_attribute('textContent').strip()
Note that text property allows to get text from visible elements only
As you are trying to extract the error message Some ABCD message it is contained within a <p> tag which have parent <div> tag with style attribute set as display: none;. So to extract the text you can use the following code block :
element = driver.find_element_by_xpath("//div[#class='form-group']/div[#id='sample_msg']")
driver.execute_script("arguments[0].removeAttribute('style')", element)
print(driver.find_element_by_xpath("//div[#class='form-group']/div[#id='sample_msg']/p").get_attribute("innerHTML"))
So, you have to wait for sometime after clicking the button and once some message appears then you need to extract that message.
Try below:-
WebDriverWait wait = new WebDriverWait(webDriver, timeoutInSeconds);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id));
or
wait.until(ExpectedConditions.elementToBeClickable(By.id));
to be precise.
See also:
org.openqa.selenium.support.ui.ExpectedConditions for similar shortcuts for various wait scenarios.
org.openqa.selenium.support.ui.WebDriverWait for its various constructors.
You can check the python syntax also on the above links.
in my code, i have a view called "show.ejs" which shows client details. the proble; now is that if i update client details (image, associated docs, ...) the content remains the same and changes only if i refresh the page ( by F5 ) .
this my update and show actions in ClientController :
findOne : function(req,res){
Client.findOne({
id : req.param('id')
})
.populate('docs')
.populate('sites')
.exec(function(err,client){
if(err) throw err;
if(client) {
return res.view('client/show', {
client : client
});
} else {
return res.redirect('/client');
}
})
},
update : function(req,res){
var name = req.param('name'),
id = req.param('id'),
town = req.param('town'),
adress = req.param('adress'),
postalCode = req.param('postalCode'),
telephone = req.param('telephone'),
email = req.param('email'),
fax = req.param('fax'),
responsable = req.param('responsable'),
website = req.param('website'),
activity = req.param('activity');
Client.findOne({id : id}).exec(function(err,client) {
if(err) console.log(err);
client.name = name;
client.town = town;
client.adress = adress;
client.telephone = telephone;
client.fax = fax;
client.website = website;
client.email=email;
client.responsable=responsable;
client.postalCode=postalCode;
client.activity = activity;
client.save();
req.file('logo').upload({
dirname: require('path')
.resolve(sails.config.appPath+'/assets/uploads/clients/logos/')
}, function (err, logo) {
if (err) throw err;
if(typeof logo !== 'undefined' && logo.length > 0 ) {
require('fs').unlink('./assets/uploads/clients/logos/'+client.logo, function(err){
if(err) console.log(err)
client.logo = require('path').basename(logo[0].fd);
client.save();
})
}
return res.redirect('/client/'+client.id );
});
})
}
and this is how i setup the view :
<div class="row">
<div class="col-md-12">
<!-- BEGIN PROFILE SIDEBAR -->
<div class="profile-sidebar" style="background-color: #f5f5f5;">
<!-- PORTLET MAIN -->
<div class="portlet light profile-sidebar-portlet " style="background-color: #f5f5f5;">
<!-- SIDEBAR USERPIC -->
<div class="profile-userpic">
<img src="/uploads/clients/logos/<%= client.logo %>" class="img-responsive img-circle" alt="image client"> </div>
<!-- END SIDEBAR USERPIC -->
<!-- SIDEBAR USER TITLE -->
<div class="profile-usertitle ">
<div class="profile-usertitle-name"><%= client.name %></div>
<div class="profile-usertitle-job"> Client </div>
</div>
</div>
<!-- END PORTLET MAIN -->
<!-- PORTLET MAIN -->
<div class="portlet light " style="background-color: #f5f5f5;">
<!-- STAT -->
<div class="row list-separated profile-stat">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="uppercase profile-stat-title"> <%= 44 %> </div>
<div class="uppercase profile-stat-text"> Sites </div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="uppercase profile-stat-title"><%= 49 %> </div>
<div class="uppercase profile-stat-text"> Documents </div>
</div>
</div>
<!-- END STAT -->
<div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-map-marker"></i>
<span class="profile-desc-text" ><%= client.adress %></span>
</div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-envelope"></i>
<%= client.email %>
</div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-globe"></i>
<%= client.website %>
</div>
</div>
</div>
<!-- END PORTLET MAIN -->
</div>
<!-- END BEGIN PROFILE SIDEBAR -->
<!-- BEGIN PROFILE CONTENT -->
<div class="profile-content">
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title tabbable-line">
<div class="caption caption-md">
<i class="icon-globe theme-font hide"></i>
<span class="caption-subject font-blue-madison bold uppercase">Client N° <strong> <%= client.id %></strong></span>
</div>
<ul class="nav nav-tabs">
<li class="active">
informations
</li>
<li>
Documents
</li>
<li>
Sites
</li>
</ul>
</div>
<div class="portlet-body">
<div class="tab-content">
<!-- PERSONAL INFO TAB -->
<div class="tab-pane active" id="tab_1_1">
<form class="form-horizontal" role="form" action="edit">
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-offset-10 col-md-2">
<input type="text" hidden name="id" value="<%=client.id%>">
<button type="submit" class="btn green">
<i class="fa fa-pencil"></i> Modifier</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-body">
<h3 class="form-section">Informations Personneles </h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">ID :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.id %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Nom :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.name %> </p></strong> </strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Responsable :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"><%= client.responsable %></p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Email :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.email %> </p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Téléphone :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.telephone %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Fax :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.fax %> </p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<h3 class="form-section">Adresse</h3>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">#</label>
<div class="col-md-9">
<strong> <p class="form-control-static"> <%= client.adress %> </p></strong>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Ville:</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.town %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Code postal:</label>
<div class="col-md-6">
<strong> <p class="form-control-static"> <%= client.postalCode %></p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
</div>
</form>
</div>
<!-- END PERSONAL INFO TAB -->
<!-- CHANGE AVATAR TAB -->
<div class="tab-pane" id="tab_1_2">
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<button type="submit" class="btn green" data-toggle="modal" href="#basic">
<i class="fa fa-plus"></i> Ajouter un doc </button>
</div>
</div>
</div>
</div>
</div>
<!--- doc model -->
<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Ajouter un Document</h4>
</div>
<div class="modal-body">
<form action="/client/addDocument" method="POST" enctype="multipart/form-data">
<input type="text" hidden name="id" value="<%= client.id %>">
<div class="form-group" style="padding-bottom: 22px;">
<label class="col-md-3 control-label">Titre</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-info-circle"></i>
</span>
<input type="text" class="form-control input-circle-right" placeholder="titre du document" name="title"> </div>
</div>
</div>
<br>
<div class="form-group" style="padding-bottom: 22px;">
<label class="col-md-3 control-label">Description</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-info-circle"></i>
</span>
<textarea type="text" class="form-control input-circle-right" name="description" placeholder="description du document"> </textarea>
</div>
</div>
</div>
<div class="form-group" style="padding-bottom: 22px; padding-top: 40px;">
<label class="col-md-3 control-label">Document</label>
<div class="col-md-9">
<div class="input-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<span class="btn green btn-file">
<span class="fileinput-new"> Selectionner Fichier </span>
<span class="fileinput-exists"> Changer </span>
<input type="file" name="fichier"> </span>
<span class="fileinput-filename"> </span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn green">Enregistrer</button>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- fin doc model -->
<br>
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption font-green">
<i class=" fa fa-file font-green"></i>
<span class="caption-subject bold uppercase" style="margin-right : 11px;">Liste des Documents</span>
</div>
</div>
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover dt-responsive" width="100%" id="sample_1">
<thead>
<tr>
<th class="all">#</th>
<th class="min-tablet">Titre</th>
<th class="desktop">Description</th>
<th class="all" style="width : 66px">Action.</th>
</tr>
</thead>
<tbody>
<% _.each(client.docs, function (doc) { %>
<tr>
<td ><%=doc.id%></td>
<td ><%= doc.title %></td>
<td ><%= doc.description %></td>
<center> <td>
<a href="#" title="telecharger" class="btn btn-circle btn-icon-only green" ><i class="fa fa-download" ></i></a>
<a href="#" title="Supprimer" class="btn btn-circle btn-icon-only purple-sharp" data-toggle="confirmation" data-placement="left" data-btn-ok-label="Continuer" data-btn-ok-icon="icon-like" data-btn-ok-class="btn-success" data-btn-cancel-label="Annuler!"
data-btn-cancel-icon="icon-close" data-btn-cancel-class="btn-danger"><i class="fa fa-trash-o"></i></a>
</td></center>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
Actually following your code, the problems reside in
client.save()
which is an asynchronous function.
the problem is you are changing the client and you are not waiting for the changes to be saved to upload the logo and reload the data.
here's the official doc, which is stating that model.save has a callback to it.
client.save(function(){
/*your code */
})
The view, with those EJS functions is doing what is expected to do. You see, you are not providing some way to magically change data on-the-fly. Instead what EJS and your controller is doing is this: Get all data needed - with findOne -> Put that data on the view - with EJS and <% %> markers -> Render and serve a static HTML document - res.view.
If you need data to change on the fly you need a more powerful framework on the frontend, like Vuejs or Angular... EJS is meant to assembly a static page with dynamic data ONCE. Take a look at the docs
I am working with ASP.net MVC 5, I have created a bootstrap carousel/slideshow with 4 images, I want to get the id of the active slide on this carousel. Then, when an user is clicking on an submit button, I can redirect him to another page recording the active slide id in the URL.
<form method="post">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class=""></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<a class="carousel-buttonleft" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-buttonright" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div class="carousel-inner" role="listbox" style="height:300px">
<div class="item active" align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>NORMAL SKIN</p>
</div>
</a>
</div>
<div class="item ">
<div align="center" class="carousel-image">
<img src="../images/saumon.png" alt="saumon1" />
</div>
<div class="carousel-caption">
<p>SILVER SKIN</p>
</div>
</div>
<div class="item " align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>DEEP SKIN</p>
</div>
</div>
<div class="item " align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>WITH SKIN</p>
</div>
</div>
</div>
</div>
Thanks.
sorry i'm currently using my phone. You must select by className.
In css :
.carousel-inner .item .active
In jQuery :
$('.carousel-inner .item .active')
then... .attr('id') and for the value .val() or .text()
In C#, I found this topic to show you how to iterate inside your page controls depending a specific className target :
StackOverflow
I have a very weird problem with CMSMS. I have some HTML in my header file, there should be 2 links, but every time I paste a second one and click Apply- it disappears from editor. Although it shows on website.
CMSMS version: 1.11.9
<div class="header">
<div class="container">
<div class="row-fluid">
<div class="logo_wrapper">
<div class="logo"><img src="{root_url}/ui/images/logo.png" alt="" /></div>
</div>
<div class="span6 pull-right">{if $sid == 1 }
<div class="kabinet pull-right"><a class="rounded" href="apps/customer/web/profile/edit"> Профиль</a></div>
{else}
<div class="kabinet pull-right"><a class="rounded dark" href="#"> Статус доставки</a> <a class="rounded" href="apps/customer/web/login"> Личный кабинет</a></div>
{/if}</div>
</div>
<hr />
<div>
<div class="nav">
<div class="nav-inner">{menu loadprops=0}</div>
</div>
</div>
</div>
</div>
It should be after save:
<div class="header">
<div class="container">
<div class="row-fluid">
<div class="logo_wrapper">
<div class="logo"><img src="{root_url}/ui/images/logo.png" alt="" /></div>
</div>
<div class="span6 pull-right">{if $sid == 1 }
<div class="kabinet pull-right"><a class="rounded" href="apps/customer/web/profile/edit"> Профиль</a>
(this link keeps disappearing)
<a class="rounded no-bg-color" href="apps/customer/web/logout"><i class="icon-off icon-white"></i></a>
</div>
{else}
<div class="kabinet pull-right"><a class="rounded dark" href="#"> Статус доставки</a> <a class="rounded" href="apps/customer/web/login"> Личный кабинет</a></div>
{/if}</div>
</div>
<hr />
<div>
<div class="nav">
<div class="nav-inner">{menu loadprops=0}</div>
</div>
</div>
</div>
</div>
It's probably the HTML editor (MicroTiny I expect) believing that link is invalid HTML and throwing it away.
Set the editor to HTML mode so that you can edit the HTML directly (not WYSIWYG). It will then accept your edits and not try to edit them.