How to write javascript inside kendo grid row template?
Here is my sample code
<script id="rowTemplate" type="text/x-kendo-tmpl">
<div>
<dl>
<dt>
<label class="iconPlace"><i class="fas fa-plane"></i></label>
<label class="iconPlace"><i class="fas fa-building"></i></label>
<label class="Info"> #:traineeId# (#:traineeName#) </label>
<label class="rank">#:rank#</label>
</dt>
</dl>
</div>
</script>
I want like this
<script id="rowTemplate" type="text/x-kendo-tmpl">
<div>
<dl>
<dt>
// if(condition) then
<label class="iconPlace"><i class="fas fa-plane"></i></label>
// end condition
<label class="iconPlace"><i class="fas fa-building"></i></label>
<label class="Info"> #:traineeId# (#:traineeName#) </label>
<label class="rank">#:rank#</label>
</dt>
</dl>
</div>
</script>
I applied javascript condition start and end with #, but not working
Use this:
<script id="rowTemplate" type="text/x-kendo-tmpl">
<div>
<dl>
<dt>
# if (condition) { #
<label class="iconPlace"><i class="fas fa-plane"></i></label>
# } #
<label class="iconPlace"><i class="fas fa-building"></i></label>
<label class="Info"> #:traineeId# (#:traineeName#) </label>
<label class="rank">#:rank#</label>
</dt>
</dl>
</div>
</script>
Related
I have some problems with the construction of my portfolio CV someone who understands HTML, CSS and JavaScript could help you thank you for your help.
My doubts are as follows:
My title of my image gallery has disappeared, how do I make the title "My Portfolio" be like in the 2nd file below?
How do I center my source code so that my image gallery is like in the image below (attached)?
I send the source code. And i appreciate you for your help with source code.
https://codepen.io/Quencyjones79/pen/XWYNwxj
index.html
`
<section class="container" id="portfolio">
<div class="main-title">
<h2>My <span>Portfolio</span><span class="bg-text">My Work</span></h2>
</div>
<p class="port-text">
Here is some of my work that I've done in various programming languages.
</p>
<div class="container_images">
<div class="full-view"></div>
<div class="preview-list">
<ul>
<li>
<input type="radio" id="tab-1" name="gallery-group">
<label for="tab-1">
<div class="tab">
<img
src="img/bandacoldplay.jpeg" />
</div>
</label>
<div class="content">
<img
src="img/bandacoldplay.jpeg" />
</div>
</li>
<li>
<input type="radio" id="tab-2" name="gallery-group">
<label for="tab-2">
<div class="tab">
<img
src="img/mascaraNY.jpg" />
</div>
</label>
<div class="content">
<img
src="img/mascaraNY.jpg" />
</div>
</li>
<li>
<input type="radio" id="tab-3" name="gallery-group">
<label for="tab-3">
<div class="tab">
<img
src="img/Dutchplan.jpg" />
</div>
</label>
<div class="content">
<img
src="img/Dutchplan.jpg" />
</div>
</li>
<li>
<input type="radio" id="tab-4" name="gallery-group" checked>
<label for="tab-4">
<div class="tab">
<img
src="img/planogeralPonteLima.jpg" />
</div>
</label>
<div class="content">
<img src="img/planogeralPonteLima.jpg" />
</div>
</li>
</ul>
</div>
</div>
</section>
`
(continue in codepen)
I would like to put the data of a form into a session
The action of the form depends on the choice made in the buttons .bien especially in the onclick() function .
for that I made this code:
title = "formulaire_commun_1"
url = "/formulaire_commun_1"
layout = "sidebar_layout"
is_hidden = 0
==
<?php
function onStart()
{
$this['transaction'] = Session::get('transaction');
$this['bien'] = Session::get('type_bien');
}
function onTest()
{
Session::put('transaction', input('TYPE_transaction'));
Session::put('type_bien', input('radio_type_bien'));
}
function onRedirectMe()
{
return Redirect::to('http://google.com');
}
?>
==
<ul class="progressbar">
<li class="active">transaction</li>
<li>details</li>
<li>confirmation</li>
</ul>
<br><br><br><br>
<form method="POST" data-request="onTest" data-request-success="onRedirectMe" name="formu" accept-charset="UTF8" enctype="multipart/form-data">
<input type="hidden" name="_handler" value="onUpdate">
{{form_token()}}
{{form_sessionkey()}}
<div class="form-group">
<label for="TYPE_transaction" class="col-sm-3">type de transaction:</label>
<div class="col-sm-9">
<select class="form-control" id="TYPE_transaction" name="TYPE_transaction">
<option>vendre</option>
<option>louer</option>
</select>
</div>
<br><br><br>
<p>choisissez un type de bien:</p>
<br><br>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(0)" >
<img src="{{ 'assets/img/icones/icone_maison.png'|theme }}">
</button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(1)"><img src="{{ 'assets/img/icones/icone_villa.jpg'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(2)"><img src="{{ 'assets/img/icones/icone_riad.jpg'|theme }}"></button>
</div>
<br><br><br><br><br>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(3)"><img src="{{ 'assets/img/icones/icone_appartement.png'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(4)"><img src="{{ 'assets/img/icones/icone_ferme.png'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-defaul bien" onclick="type_bien(5)"><img src="{{ 'assets/img/icones/icone_magasin.jpg'|theme }}"></button>
</div>
<br><br><br><br>
<div style="display: none;">
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=0 value="maison" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=1 value="villa"></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=2 value="riad" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=3 value="appartement" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=4 value="formulaire_appartement" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=5 value="magasin" ></label>
</div>
</div>
<br><br><br><br><br><br
<div class=" col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">Register</button>
</div></div>
</form>
<script type = "text/javascript">
$(function() {
var $buttonBien = $('.bien');
$buttonBien.on('click',function (event) {
event.preventDefault();
});
});
function type_bien(x){
switch( x) {
case 0:
document.getElementById(0).checked="true";
document.forms["formu"].action="formulaire_villa";
break;
case 1:
document.getElementById(1).checked="true";
document.forms["formu"].action="formulaire_villa";
break;
case 2:
document.getElementById(2).checked="true";
document.forms["formu"].action="formulaie_riad";
break;
case 3:
document.getElementById(3).checked="true";
document.forms["formu"].action="formulaire_appartement";
break;
case 4:
document.getElementById(4).checked="true";
break;
case 5:
document.getElementById(5).checked="true";
break;
default:
alert('local_commerce est selected');
}
}
</script>
_____________
but unfortunately there is a conflict between ajax and the form
if i put data-request = "onTest" action = "" for example
I have no redirection
so I need a way to redirect the form to another page after the submit:
please help me
thank you in advance
pinterest js
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>
css files
<link rel='stylesheet' href='css/fab-sales.css' media='all' type='text/css' />
<link rel='stylesheet' href='css/basic.css' media='all' type='text/css' />
codes
{if isset($products)}
<!-- Products list -->
<ul id="product_list" class="clear">
{foreach from=$products item=product name=products}
{assign var=foo value=$product.link}
<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
<div class="left_block">
{if isset($comparator_max_item) && $comparator_max_item}
<p class="compare">
<input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} />
<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
</p>
{/if}
</div>
<div class="center_block">
<div align="center" id="prodList">
<div class="product">
<div class="prodImgBlock filler" style="cursor:pointer"><a href="{$foo|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
</a></div>
<div class="newSocialCt">
<div class="newSocialToolBar"> <span style="left: 10px;" class="newSocialTool faveIt"> <span style="position: relative;top: 4px;display: none;" class="loader"> <img src="img/tmp/ajax-loader-white.gif"> </span></span> <span class="loaderCt newSocialTool"></span> <span class="newSocialTool pinItTool" style="float:left; margin-left:-10px; margin-right:5px;"> <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /> </span> <span class="newSocialTool" style="float:left; width:85px; margin-left:15px;">
<div id='basic-modal'> <a href='#' class='basic'><img alt="Share" src="img/tmp/tellafriend.png" border="0" /></a> </div>
</span> <span class="newSocialTool" style="float:none; margin-right:20px;">
<div class="fb-like" data-href="$foo" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
</span> </div>
</div> </div>
</div>
<div class="productCt">
<div class="productDet" id="0"><h4>{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}</h4>
<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:130:'...'}</a></p>
</div>
</div></div>
<div id="push" class="clear"></div>
<div id="basic-modal-content">
<div id="tellFriendBox">
<div class="popUpHd">
<h2>Tell A Friend!</h2>
</div>
<div class="error" id="tf"></div>
<form class="" id="" method="post" action="" enctype="multipart/form-data">
<div class="eachRow">
<div>Your Name
<label style="color:#FF0000">*</label>
:</div>
<div class='field'>
<input type='text' id="name" class="required email" name="name" size='33'/>
</div>
</div>
<div class="eachRow">
<div>Friends Email Address
<label style="color:#FF0000">*</label>
:</div>
<div class='field'>
<input type='text' id="email_id" class="required email" name="email" size='33'/>
</div>
</div>
<div class="eachRow">
<div>Matter:</div>
<div class='field'>
<textarea rows='4' cols='25' id="matter" class="required" name="matter" ></textarea>
</div>
</div>
<div class="eachRow">
<div class='field'>
<input class="button" type='submit' name="tellafriend" onclick="return TellFriend(); " value="Send Mail"/>
</div>
</div>
</form>
</div>
</div>
<div style='display:none'> <img src='img/tmp/x.png' alt='' /> </div>
***after putting following javascript code for validation smarty template getting blank
<script type="text/javascript">
function TellFriend()
{
var em = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if(document.getElementById("name").value == "")
{
document.getElementById("tf").innerHTML= "* Marks Fields are Mandatory ";
document.getElementById("name").focus();
return false;
}
if(document.getElementById("email_id").value == "")
{
document.getElementById("tf").innerHTML= "* Marks Fields are Mandatory ";
document.getElementById("email_id").focus();
return false;
}
if (document.getElementById("email_id").value.search(em) == -1)
{
document.getElementById("tf").innerHTML= "Invalid Email "+"</span>";
document.getElementById("email_id").focus();
return false;
}
}
</script>
need help..and after putting $foo as URL in pinterest..pinterest count button disappering..
You should enclose the javascript in {literal}{/literal} tags
There is the great article for undestand debug process: http://blog.belvg.com/showing-php-and-sql-errors-and-debugging-a-blank-white-page-in-prestashop.html
Say we have the following HTML code
<label for="467578">AgendaShowCapacity (1 remaining)</label>
I tried with the following xpath expression in Chrome but can't locate to that element:
//label[text()='AgendaShowCapacity (1 remaining)']
I was wondering whether the parenthese is to be blamed for this. If it is, how should I deal with it under such situation?
Any comments would be appreciated, thanks!
Edit 2012-9-18 real code block posted below
<div id="pageContent">
<fieldset>
<legend>Agenda</legend>
<ol class='fieldList custom' data-section='0'>
<li class="checkboxLeft" data-id="467578" data-z="1">
<div class="fieldHolder1">
<input id="467578" type="checkbox" name="467578" />
</div>
<div class="fieldHolder2">
<label for="467578">AgendaShowCapacity (1 remaining)</label>
</div>
</li>
<li class="checkboxLeft" data-id="467579" data-z="2">
<div class="fieldHolder1">
<input id="467579" type="checkbox" name="467579" />
</div>
<div class="fieldHolder2">
<label for="467579">AgendaHideReached</label>
</div>
</li>
<li class="checkboxLeft" data-id="467580" data-z="3">
<div class="fieldHolder1">
<input id="467580" type="checkbox" name="467580" />
</div>
<div class="fieldHolder2">
<label for="467580">AgendaShowMessage</label>
</div>
</li>
<li class="checkboxLeft" data-id="467584" data-z="4">
<div class="fieldHolder1">
<input id="467584" type="checkbox" name="467584" />
</div>
<div class="fieldHolder2">
<label for="467584">AgendaWaitlist</label>
</div>
</li>
</ol>
</fieldset>
<div class="buttonGroup">
<button type="button" name="ctl00$cph$ctlNavigation$btnAddAnother" class="button" onclick="SubmitForm(this);return false;">Add Another Person</button>
<span class="textBetweenButtons">or</span>
<button type="submit" name="ctl00$cph$ctlNavigation$btnContinue" class="button" onclick="SubmitForm(this);return false;">Continue</button>
</div>
</div>
Here is the essential part of the html page in which I want to locate to that //label element.
Second edit 2012/9/19
Sample C# code using selenium-webdriver to locate that element.
IWebDriver driver = new FirefoxDriver();
IWebElement = driver.FindElement(By.XPath("//div[#id='pageContent']//legend/following-sibling::ol/li/div/label[text()='AgendaShowCapacity (1 remaining)']"));
// Do something to that element
I am trying to log some input values into an array via jquery and then use those to run a method server side and get the data returned as JSON.
The HTML looks like this,
<div class="segment">
<div class="label">
<label>Choose region: </label>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[Nationwide]" id="inp_Nationwide">
</div>
<div class="label ">
<label for="inp_Nationwide">Nationwide</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[Lancashire]" id="inp_Lancashire">
</div>
<div class="label ">
<label for="inp_Lancashire">Lancashire</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[West_Yorkshire]" id="inp_West_Yorkshire">
</div>
<div class="label ">
<label for="inp_West_Yorkshire">West Yorkshire</label>
</div>
<div class="s"> </div>
</div>
<div class="s"> </div>
</div>
I have this javascript the detect whether the items are checked are not
if($('input.radio:checked')){
}
What I dont know is how to get the values of the input into an array so I can then send the information through AJAX to my controller. Can anyone help me?
You can use jQuery's each() function.
$('input.radio:checked').each(function() {
//put each of the selected check boxes into an array
});
You need to serialize your input with - serialize()
var data = $('#MYFORM').serialize();