Please help me with the below XSL template. I am using iframe to display video but I'm keep getting error.
<xsl:template match="Row">
<div id="listitem-{#ID}">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="catalog-item">
<img height="70" width="70" class="catalog-icon pull-left"><xsl:attribute name="src"><xsl:value-of select="#Picture" /></xsl:attribute></img>
<span class="catalog-item-title"><xsl:value-of select="#Title" disable-output-escaping="yes"/></span>
<div class="aliases">Aliases: <xsl:value-of select="#Aliases" disable-output-escaping="yes"/> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="catalog-descr"><xsl:value-of select="#Description" disable-output-escaping="yes"/></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="video-responsive">
<iframe width="420" height="315" src="{#Youtube}"></iframe>
</div>
</div>
</div>
</div>
</xsl:template>
Related
I'm trying to implement a "Count No. of Entries" and "Filtering" functionality to my List.js list, like in this example: Codepen. But in this implementation the list item data is part of the JS file itself and not of the HTML (what I would like to have). So I'm having problems "translating" this JS code for my list. What would I need to write in the JS file? Cf. Codepen Could you please help? 🙏
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Total Number:<span class="count"></span></p>
</div>
</div>
</div>
<div id="users">
<div class="container">
<div class="row">
<div class="col-md-12">
<input class="search form-control" placeholder="Search" />
<button class="sort btn btn-primary" data-sort="name">
Sort by name
</button>
<button class="sort btn btn-primary" data-sort="title">
Sort by title
</button>
<div class="tags">
<div>Filter by:</div>
<div class="tag filter" data-filter="Baseball">Baseball </div>
<div class="tag filter" data-filter="Kitties">Kitties </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group list">
<a href="#" class="list-group-item">
<div class="col-md-10">
<h4 class="list-group-item-heading name">Alex</h4>
<p class="list-group-item-text title">Leader</p>
</div>
<div class="col-md-2">
<div class="expertise">
<span class="expertise-label">Tags </span>
<p class="labels">
<span class="label label-default expertise">Baseball</span>
</p>
</div>
</div>
<div class="clearfix"></div>
<a href="#" class="list-group-item">
<div class="col-md-10">
<h4 class="list-group-item-heading name">Dennis</h4>
<p class="list-group-item-text title">Super Leader</p>
</div>
<div class="col-md-2">
<div class="expertise">
<span class="expertise-label">Tags </span>
<p class="labels">
<span class="label label-default expertise">Kitties</span>
</p>
</div>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
</div>
</div>
</div>
Django data is saved in the database but, when access the data in template its display nothing.the models.py, views.py and home.html file code is below, when I entered data in the field and print it in add function it display but does not display in the template. Im using the modal to display the data
models.py
from django.db import models
class ToDo(models.Model):
title = models.CharField(max_length=100)
detail = models.TextField()
published_date = models.DateTimeField()
def __str__(self):
return self.title
views.py
from django.shortcuts import render, HttpResponse, redirect
from django.utils import timezone
from todoapp.models import ToDo
def home(request):
todo_items = ToDo.objects.all()
context = {'todoItems': todo_items}
return render(request, 'todoapp/home.html', context)
def add(request):
if request.method=="POST":
addTitle = request.POST['addTitle']
addDetail = request.POST['addDetail']
current_date = timezone.now()
addedObject = ToDo.objects.create(title=addTitle, detail=addDetail, published_date=current_date)
return redirect('home')
return render(request, 'todoapp/home.html')
home.html "Template file"
{%load static%} {%include 'header.html'%}
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="{% url 'home'%}">todo application</a>
<button class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" data-toggle="modal" data-target="#addModal" href="add">add new</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="{%url 'home'%}">todo list</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Masthead -->
<header class="masthead bg-primary text-white text-center">
<div class="container d-flex align-items-center flex-column">
<!-- Masthead Avatar Image -->
<img class="masthead-avatar mb-5" src="{%static 'images/avataaars.svg' %}" alt="">
<!-- Masthead Heading -->
<h1 class="masthead-heading text-uppercase mb-0">Todo Application </h1>
<!-- Icon Divider -->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Masthead Subheading -->
<p class="masthead-subheading font-weight-light mb-0">Web Developer - Web Designer - Coder</p>
</div>
</header>
<!-- Portfolio Section -->
<section class="page-section portfolio" id="portfolio">
<div class="container">
<!-- Portfolio Section Heading -->
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">portfolio</h2>
<!-- Icon Divider -->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Grid Items -->
<div class="row">
<!-- Portfolio Item 1 -->
<div class="col-md-6 col-lg-4">
<div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white">
<i class="fas fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="{% static 'images/portfolio/cabin.png'%}" alt="">
</div>
</div>
</div>
<!-- /.row -->
</div>
</section>
<!-- About Section -->
<section class="page-section bg-primary text-white mb-0" id="about">
<div class="container">
<!-- About Section Heading -->
<h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
<!-- Icon Divider -->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- About Section Content -->
<div class="row">
<div class="col-lg-12 ml-auto text-center">
<p class="lead">Hi! Im Zeeshan Tariq. I have 3 plus years of experience in web Application Development, Software Development, Front End Development, WordPress theme customization , woocommerce customization, wordpress security, SEO, keywords research, on-page seo, off-page seo,speed optimization, custom web application development using python django web framework, API design, database design and development.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Modals -->
<!-- add Modal -->
<div class="portfolio-modal modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModal" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="fas fa-times"></i>
</span>
</button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title -->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Add Todo</h2>
<!-- Icon Divider -->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image -->
<!-- Portfolio Modal - Text -->
<p class="mb-5">
<div class="row">
<div class="col-lg-8 mx-auto">
<form action="{% url 'add'%}" method="post">
{%csrf_token%}
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Title </label>
<input class="form-control" id="addTitle" name="addTitle" type="text" placeholder="Title" required="required" data-validation-required-message="Please enter the title.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Detail</label>
<input class="form-control" id="addDetail" name="addDetail" type="text" placeholder="Detail" required="required" data-validation-required-message="Please enter the description.">
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-xl" id="sendMessageButton">Add</button>
</div>
</form>
</div>
</div>
</p>
<button class="btn btn-primary" href="#" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i> Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-labelledby="portfolioModal1Label" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="fas fa-times"></i>
</span>
</button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title -->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">{{todoItems.title}}</h2>
<!-- Icon Divider -->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image -->
<img class="img-fluid rounded mb-5" src="img/portfolio/cabin.png" alt="">
<!-- Portfolio Modal - Text -->
<p class="mb-5">{{todoItems.detail}}</p>
<button class="btn btn-primary" href="#" data-dismiss="modal">
<i class="fas fa-times fa-fw"></i> Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{%include 'footer.html'%}
I have a html page with 3 checkboxes. Each text box has a text beside it.
The checkboxes are nested in div tags.
I would like to select the checkbox which has the text "Clean"
My Xpath is selecting 3 checkboxes.
How do I select the checkbox which has the text Clean?
It is inside the div tag with the id id="operations_edit_process_list_task_1"
My Xpath is:
//div[#id="operations_edit_process_list_task_1"]//span[text()="Clean"]//following::span[#title="Turn group off or on."]/input[1]
The HTML is:
<div id="operations_edit_process_list_task_1">
<span>
<span/>
<span>
<span title="Turn group off or on." style="">
<input type="checkbox" checked="" tabindex="-1"/>
</span>
</span>
<span/>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="overflow: hidden; display: none;"/>
</div>
<div aria-selected="false" role="treeitem" aria-setsize="3" aria-posinset="2" aria-expanded="false" aria-level="1">
<div class="GJPPK2LBIF GJPPK2LBAG" style="padding-left: 0px;">
<div class="GJPPK2LBIF GJPPK2LBKF GJPPK2LBCG" style="padding-left: 16px;position:relative;" onclick="">
<div class="GJPPK2LBJF GJPPK2LBBG" style="left: 0px;width: 15px;height: 15px;position:absolute;">
<div class="GJPPK2LBLF">
<div style="padding-left: 22px;position:relative;zoom:1;">
<div style="left:0px;margin-top:-8px;position:absolute;top:50%;line-height:0px;">
<div>
<div id="operations_edit_process_list_task_2">
<span>
<span class="myinlineblock" title="Match"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;width:100%;">Match</span>
</span>
<span/>
<span>
<span title="Turn group off or on." style="">
<input class="" type="checkbox" checked="" tabindex="-1"/>
</span>
</span>
<span/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div aria-selected="false" role="treeitem" aria-setsize="3" aria-posinset="3" aria-expanded="false"
aria-level="1">
<div class="GJPPK2LBIF GJPPK2LBAG" style="padding-left: 0px;">
<div class="GJPPK2LBIF GJPPK2LBKF GJPPK2LBCG" style="padding-left: 16px;position:relative;" onclick="">
<div class="GJPPK2LBJF GJPPK2LBBG" style="left: 0px;width: 15px;height: 15px;position:absolute;">
<div class="GJPPK2LBLF">
<div style="padding-left: 22px;position:relative;zoom:1;">
<div style="left:0px;margin-top:-8px;position:absolute;top:50%;line-height:0px;">
<div>
<div id="operations_edit_process_list_task_3">
<span>
<span class="myinlineblock" title="PossMatch"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;width:100%;">PossMatch</span>
</span>
<span/>
<span>
<span title="Turn group off or on." style="">
<input class="" type="checkbox" checked="" tabindex="-1"/>
</span>
</span>
<span/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks,
Riaz
Xpath to select the input box in the div id="operations_edit_process_list_task_2" and having the text "Clean" :
"//div[#id='operations_edit_process_list_task_2'][.//span='Clean']//input"
Or:
"//div[#id='operations_edit_process_list_task_2' and contains(.,'Clean')]//input"
In my bootstrap form there is unusual gap between rows though they have similar declarations.Also, select boxes looks bigger than what I see in examples,
Here is the problem,
Any idea what's wrong ?
Here is the code,
<div class="panel-body">
<div class="tab-content">
<div id="content_obsinfo" class="tab-pane active">
<div class="col-sm-12">
<div class="row">
<div class="panel-body form-horizontal form-padding">
<div class="form-group">
<!-- BEGIN: Logged By Name -->
<div class="col-sm-2">
<label for="pro_LoggedByName" class="col-sm-12 control-label">Logged by name</label>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="pro_LoggedByName" name="pro_LoggedByName" value="" > </div>
<!-- END: Logged By Name-->
<!-- BEGIN: Manager-->
<div class="col-sm-2">
<label for="top_Manager" class="col-sm-12 control-label">Manager</label>
</div>
<div class="col-sm-4">
<div class="radio">
<label class="form-radio form-normal form-text form-success "><input type="radio" name="top_Manager" value="Yes">Yes</label><label class="form-radio form-normal form-text form-success "><input type="radio" name="top_Manager" value="No">No</label>
</div>
</div>
<!-- END: Manager-->
</div>
</div>
</div> <!-- End of row 1 -->
<div class="row">
<div class="panel-body form-horizontal ">
<div class="form-group">
<!-- BEGIN: Conducted On -->
<div class="col-sm-2">
<label for="pro_ConductedOn" class="col-sm-12 control-label">Conducted on</label>
</div>
<div class="col-sm-4">
<div class="input-group date" id="conductedon">
<input type="text" class="form-control" id="pro_ConductedOn" name="pro_ConductedOn" value="8-Oct-2015" >
<span class="input-group-addon">
<i class="fa fa-calendar fa-lg" title="Open Calendar"></i>
</span>
</div>
</div>
<!-- END: Conducted On -->
<!-- BEGIN: Employed By-->
<div class="col-sm-2">
<label for="top_EmployedBy" class="col-sm-12 control-label">Employed by</label>
</div>
<div class="col-sm-4">
<select data-placeholder="Select employed by" id="top_EmployedBy" name="top_EmployedBy" class="chosen-select" >
<option value=""></option><option value="Company">Company</option><option value="Maritime">Maritime</option><option value="Other">Other</option><option value="Subcontractor">Subcontractor</option><option value="Third party">Third party</option>
</select>
</div>
<!-- END: Employed By-->
</div>
</div>
</div> <!-- End of row 2 -->
<div class="row">
<div class="panel-body form-horizontal ">
<div class="form-group">
<!-- BEGIN: Confidentiality -->
<div class="col-sm-2">
<label for="pro_Confidentiality" class="col-sm-12 control-label">Confidentiality</label>
</div>
<div class="col-sm-4">
<div class="radio">
<label class="form-radio form-normal form-text form-success "><input type="radio" name="pro_Confidentiality" value="Public">Public</label><label class="form-radio form-normal form-text form-success "><input type="radio" name="pro_Confidentiality" value="Private">Private</label>
</div>
</div>
<!-- END: Confidentiality -->
<!-- BEGIN: Job Position-->
<div class="col-sm-2">
<label for="top_JobPosition" class="col-sm-12 control-label">Job position</label>
</div>
<div class="col-sm-4">
<select data-placeholder="Select Job position" id="top_JobPosition" name="top_JobPosition" class="chosen-select" >
<option value=""></option><option value="Administration">Administration</option><option value="Catering">Catering</option><option value="Client">Client</option><option value="Communication">Communication</option><option value="Deck hand">Deck hand</option><option value="Deck office">Deck office</option><option value="Drivers">Drivers</option><option value="Engineer / electrician">Engineer / electrician</option><option value="Gun mechanic">Gun mechanic</option><option value="Laborers">Laborers</option><option value="Maintenance">Maintenance</option><option value="Management">Management</option><option value="Mechanic">Mechanic</option><option value="Navigator">Navigator</option><option value="Observer">Observer</option><option value="Other">Other</option><option value="Pilot / aviator">Pilot / aviator</option><option value="Processing">Processing</option><option value="Safety - HSE / medic">Safety - HSE / medic</option><option value="Shore">Shore</option><option value="Subcontractor">Subcontractor</option><option value="Support vessel crew">Support vessel crew</option><option value="Technician">Technician</option>
</select>
</div>
<!-- END: Job Position-->
</div>
</div>
</div> <!-- End of row 3 -->
</div>
</div>
</div>
</div>
When I inspect first and second rows,clearly see the difference
Another CSS in the project maybe?
row inside col-sm?
row inside row?
I want to display the text box for phone number in the following format
(555)-555-5555.
Whenever I try to add the dashes or bracket they do not align correctly.
How can I achieve this?
Fiddle
Code:
<div class="row">
<div class="large-2 columns">
<label class="inline right">* Phone:</label>
</div>
<div class="large-3 columns">
<span>(</span>
<input type="text" id="areaCode" name="areaCodeTab" maxlength="3" />
<span>)</span> -
</div>
<div class="large-3 columns">
<input type="text" id="phoneMiddle" name="phoneMiddleTab" maxlength="3" /> -
</div>
<div class="large-3 columns end">
<input type="text" id="phoneYearTab" name="phoneYearTab" maxlength="4" />
</div>
<div class="row">
<div class="large-2 columns">
<label class="inline right">* Phone:</label>
</div>
<div class="large-6 columns">
<div class="row collapse">
<div class="large-3 columns">
<span class="prefix"> ( </span>
</div>
<div class="large-6 columns">
<input type="text" id="areaCode" name="areaCodeTab" maxlength="3" />
</div>
<div class="large-3 columns">
<span class="postfix"> ) - </span>
</div>
</div>
</div>
<div class="large-2 columns">
<input type="text" id="phoneMiddle" name="phoneMiddleTab" maxlength="3" /> -
</div>
<div class="large-2 columns end">
<input type="text" id="phoneYearTab" name="phoneYearTab" maxlength="4" />
</div>
</div>
I think this is right, you may want to change the sizes of things but it all fit's together the way I think you're after.
EDIT
Like this then?
<div class="row">
<div class="large-3 columns">
<label class="inline right">* Phone:</label>
</div>
<div class="large-3 columns">
<div class="row collapse">
<div class="large-1 columns">
<p class="">(</p>
</div>
<div class="large-10 columns">
<input type="text" id="areaCode" name="areaCodeTab" maxlength="3" />
</div>
<div class="large-1 columns">
<p class="">)-</p>
</div>
</div>
</div>
<div class="large-3 columns">
<input type="text" id="phoneMiddle" name="phoneMiddleTab" maxlength="3" /> -
</div>
<div class="large-3 columns end">
<input type="text" id="phoneYearTab" name="phoneYearTab" maxlength="4" />
</div>
</div>
Can't help but think it looks better with the post and pre fix though.