Need help in clicking an image that is with a td inside a table. The table is defined as
html is below:
`<html class=" myapp>
<head id="head1">
<body id="body1">
<div id = "container" class>
<div id = "Header" class="header">..</div>
<div id = "navbar" class="topnavbar">..</div>
<form name = "form1"....>
.
.
.
<div id = "Layout container" class>
<div id="appcontectinfo">...</div>
<div class="tabcontent">
<div id="allinfo">
<table id="tablename"> </table>
<table>
<tbody>
<tr>
<td>
<table id style = "height 100%">
<tbody>
<tr style ="height : 16">
<td class = "clsClassname1">
<table cellpadding = "0" cellspacing = "0">
<tbody>
<tr>
<td class = "clsMyexpClass1>
<input src = "https://www.mylinkhere.com/lookup.gif" name = "myimage1" type = "image" id = "imgLookup1">
</td>`
I tried the below:
image(:lookup1, :id => 'imgLookup1')
lookup1_element.click
I get the error message- >"Watir::Exception::UnknownObjectException: unable to locate element, using {:id=>"imgLookup1", :tag_name=>"img"}
I then tried
table(:lookuptab1) {div_element(:id =>'allinfo' ).table_element(:style => 'height: 100%; text-align: left;')}
and again the same error message. Please help!
The page-object-gem and watir treat input elements of type "image" (ie <input type="image">) as buttons.
The element should be located if you change your page object accessor to use button:
button(:lookup1, :id => 'imgLookup1')
Note that then you can click the input using lookup1 instead lookup1_element.click.
Here is a working example:
class MyPage
include PageObject
button(:lookup1, :id => 'imgLookup1')
end
browser = Watir::Browser.new
browser.goto("data:text/html,#{DATA.read}")
page = MyPage.new(browser)
page.lookup1
browser.close
__END__
<html>
<body>
<input src = "https://www.mylinkhere.com/lookup.gif" name = "myimage1" type = "image" id = "imgLookup1" onclick="alert();">
</body>
</html>
Related
I'm kind of new to ejs ,I have been working on this ejs project we're part of my code involves me having to create a for statement which will loop through data in an object "data1" which is nested together with "data2" as follows
Data 1: var data1 = <%='some data'%> and
Data 2: var data2 = <%='second data'%>.
The code :
<% for (var i in data2.data1) {%>
"some action"
<%}%>
Problem is data2 is not being rendered when you include in the ejs 'Scriptlet' tag <% %>
Full code :
<html>
<body>
<table id="customers">
<tr>
<th align="center">
<% var clss = d2.className %>
<% for (var i in data[0].classes.clss.Monday
) {%>
<% var object = data[0].classes.clss.Monday
%>
<% if (object.hasOwnProperty(i)) { %>
<th><%- object[i][0] %></th>
<%}%>
<%}%>
</th>
</tr>
</body>
</html>
how can i redirect to a different action using redirect or forward functions ? My solution doesn't seem to work
public function listAction() {
$products = $this->productRepository->findAll();
$this->view->assign('products', $products);
}
public function showAction() {
$var = $this->request->getArgument('searchProduct');
$foundProd = new \MyVendor\Inventory\Domain\Model\Product($var);
$prod = $this->productRepository->getProduct($foundProd);
\TYPO3\CMS\Core\Utility\DebugUtility::debug($prod);
$this->view->assign('test',$prod);
$this->redirect('list',NULL,NULL,array(''));
// $this->forward('list',NULL, NULL, $this->request->getArguments());
}
In the view , i'm trying to show the foundProduct in the same page (not by creating a new file show.html)
<f:widget.paginate objects="{products}" as="paginatedProducts"
configuration="{itemsPerPage: 10, insertAbove: 0, insertBelow: 1, maximumNumberOfLinks: 10}">
<f:for each="{paginatedProducts}" as="productx">
<tr>
<td align="top">{productx.uid}</td>
<td align="top">{productx.name}</td>
<td align="top"><f:format.crop maxCharacters="100">{productx.description}</f:format.crop></td>
<td align="top">{productx.quantity}</td>
</tr>
</f:for>
</f:widget.paginate>
</table>
</div>
<div class="col-sm-5">
<f:form method="post" controller="Inventory" action="show" name="searchProduct" object="{searchProduct}">
<label> Product Name <span class="required"></span><br />
<f:form.textfield property="name" /></label><br />
<f:form.submit class="submit" value="Submit"/>
<div>
<f:for each ="{test}" as ="p">
<P>Numele produsului : {p.name}</P>
<p>Descriere : {p.description}</p>
<p>Cantitate : {p.quantity} </p>
</f:for>
</div>
</div>
EDIT : list.html file. Basically when i click Submit i want to show on the same page the product found from the database.
This is how it works atm
it won't work that way.
If you use redirect or forward the variable assignment is reset.
You can assign multiple Properties within the listAction:
public function listAction() {
$products = $this->productRepository->findAll();
// from your showAction
$var = $this->request->getArgument('searchProduct');
$foundProd = new \MyVendor\Inventory\Domain\Model\Product($var);
$prod = $this->productRepository->getProduct($foundProd);
$this->view->assignMultiple(
array(
'products' => $products,
'test' => $prod
)
);
}
This will fill the template you mentioned above
I wanted that when I change my selection in my checkbox the only selected checkbox will be selected and the previous selected checkbox will be uncheck.
My code is working but i really wanted to select only one checkbox.
In my view.
<center><table></center>
<tr>
<th><center>
List of Names</center></th>
<th colspan="3">
Actions
</th></tr>
<tr ng-repeat="role in roles">
<td>
<label>
<ion-checkbox ng-model="isChecked" ng-
change="format(isChecked,role,$index)"
ng-init="isChecked=false"><div class="wew">
{{role}}
</div></ion-checkbox>
</label>
</td>
<td>
<button ng-hide="!isChecked" ng-click="present()">P </button> </td>
<td>
<button ng-hide="!isChecked" ng-click="late()">L</button></td>
<td><button ng-hide="!isChecked" ng-click="absentss()">A</button></td>
<td><button ng-hide="!isChecked" ng-click="delete()">D</button></td>
</tr> </table>
And I think in my controller is the part where i need to change my codes to achieved the correct result.
$scope.isChecked = false;
$scope.selected = [];
$scope.format = function (isChecked, role, index) {
if (isChecked==true) {
$scope.selected.push(role);
}
else {
var _index = $scope.selected.indexOf(role);
$scope.selected.splice(_index, 1);
}
var students = $scope.selected;
console.log(students);
for( var s=0; s<students.length; s++) {
$scope.stud = [
students[s]
]
};
Thank you in advanced! I hope that someone can help in this matter.
Checkboxes are for multiple selections within a group.
Use radio buttons instead.
Example With AngularJs
This is way you can also implement.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('app', []).controller('appc', ['$scope',
function($scope) {
$scope.selected = 'other'; //default selection
}
]);
</script>
</head>
<body ng-app="app" ng-controller="appc">
<label>SELECTED: {{selected}}</label>
<div>
<input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male
<br>
<input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female
<br>
<input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other
</div>
</body>
</html>
I have a custom module 'banner' and in which I have added a button in its second tab(only two tabs for the module). when click on that button, it is submitting my banner automatically and then go to the grid page(i e it acts as just another save button). But the function of this button is to add an uploading image field.ie whenever the button is clicked, it should add an image form field to my tab file. This is my tab file.
<?php
class Karaokeshop_Banner_Block_Adminhtml_Banner_Edit_Tab_Image extends Mage_Adminhtml_Block_Widget_Form
{
protected function _prepareForm()
{
$form = new Varien_Data_Form();
$this->setForm($form);
$fieldset = $form->addFieldset('banner_image', array('legend'=>Mage::helper('banner')->__('Banner Image')));
//declaring a new custom form field and adding
$fieldset->addType('add_button', 'Karaokeshop_Banner_Block_Adminhtml_Banner_Edit_Tab_Field_Custom');
$fieldset->addField('banner_img_add_button', 'add_button', array(
'title' => Mage::helper('banner')->__('Add Banner Image'),
'id' => 'add_banner_img_button',
'class' => 'scalable save',
'style' => '',
'onclick' => 'banner.add(this)',
'type' => 'button',
));
return parent::_prepareForm();
}
}
this is my button defining file
<?php
class Karaokeshop_Banner_Block_Adminhtml_Banner_Edit_Tab_Field_Custom extends Varien_Data_Form_Element_Abstract
{
public function __construct($attributes=array())
{
parent::__construct($attributes);
}
public function getElementHtml()
{
$value = $this->getTitle();
$onclick=$this->getOnclick();
$class=$this->getClass();
$id=$this->getId();
$style=$this->getStyle();
$type=$this->getType();
$html='<button id="'.$id.'" class="'.$class.'" style="'.$style.'" onclick="'.$onclick.'" type="'.$type.'" title="'.$value.'">'.$value.' </button>';
$html .= '<p id="' . $this->getHtmlId() . '"'. $this->serialize($this->getHtmlAttributes()) .'>
<script type="text/javascript">
//<![CDATA[
var banner =
{
add : function(obj)
{
},
};
//]]>
</script>
</p>';
return $html;
}
}
what should i do to change my button to an add button? what should I do to avoid this submitting functionality of the button. Please help me. Thanks in advance
First you need to call your phtml from block like this :
class My_Moudles_Block_Adminhtml_Image_Edit_Tab_Form extends Mage_Adminhtml_Block_Widget_Form
{
public function __construct()
{
parent::__construct();
$this->setTemplate('modules/imageupload.phtml');
$this->setFormAction(Mage::getUrl('*/*/imageupload'));
}
then create file in adminhtml/default/default/template/yourmodule/imageupload.phtml and put this code there.
<div class="entry-edit">
<div class="entry-edit-head">
<h4 class="icon-head head-edit-form fieldset-legend"><?php echo $this->__('General')?></h4>
<div class="form-buttons"></div>
</div>
<form id="imageform" method="post" action="<? echo $this->getFormAction(); ?>">
<div id="rules_form" class="fieldset ">
<div class="hor-scroll">
<table cellspacing="0" class="form-list">
<tbody>
<tr>
<td class="label"><?php echo $this->__('Add Image')?></td>
<td class="grid tier" colspan="10">
<table cellspacing="0" id="chain_tiers" class="chain border" style=" width:465px; ">
<thead>
<tr class="headings">
<th><?php echo $this->__('Image')?></th>
<th class="last"><?php echo $this->__('Action')?></th>
</tr>
<tr class="template no-display" id="email_chain_add_template">
<td class="nobr">
<input type="file" id="chain_Image" value="0" name="imageg" class="requried-entry input-text">
</td>
<td class="last"><input type="hidden" value="" disabled="no-template" class="delete" name="email_chain[__index__][delete]"><button onclick="emailsControl.deleteItem(event);return false" class="scalable delete icon-btn delete-product-option" title="Delete Image"><span><?php echo $this->__('Delete')?></span></button></td>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td class="a-right" colspan="6">
<button style="" onclick="emailsControl.addItem()" class="scalable add" type="button" title="Add email" id="id"><span><span><span><?php echo $this->__('Add Image')?></span></span></span></button></td>
</tr>
</tfoot>
<tbody id="email_chain_container">
<tr>
<td class="nobr">
<input type="file" id="chain_Image" value="" name="Image[]" class="input-text">
</td>
<td class="last"><input type="hidden" value="" class="delete" name="email_chain[delete][]"><button onclick="emailsControl.deleteItem(event);return false" class="scalable delete icon-btn delete-product-option" title="Delete Image"><span><?php echo $this->__('Delete')?></span></button></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//<![Cchain[
var emailsControl = {
itemsCount : 0,
deleteButton : false,
addItem : function () {
var chain = {};
chain.TEMPLATE_ID = 0;
chain.index = this.itemsCount++;
if (arguments.length == 1) {
chain.TEMPLATE_ID = arguments[0];
}
var s = '<tr>' + $('email_chain_add_template').innerHTML.replace(/__index__/g, '#{index}').replace(/\sdisabled="?no-template"?/g, ' ').replace(/disabled/g, ' ').replace(/="'([^']*)'"/g, '="$1"') + '</tr>';
var template = new Template(s);
Element.insert($('email_chain_container'), {'bottom': template.evaluate(chain)});
$('chain_row_'+chain.index+'_TEMPLATE').value = chain.TEMPLATE_ID;
maxItemsCount++;
},
deleteItem : function(event) {
var tr = Event.findElement(event, 'tr');
if (tr) {
jQuery(tr).remove();
}
}
}
var maxItemsCount = 2;
//]]>
</script>
</td>
</tr>
</tbody>
</table>
</div></form>
</div>
</div>
Hopes this will solve your issue.
For edit you can do it like this :
<tbody id="email_chain_container">
<?php foreach($images as $row){ ?><tr>
<td class="nobr">
your image code
</td></tr>
[[UPDATED AGAIN]] And I am sorry if this question gets wordy.
I am a hobby coder, and I am looking for some help with syntax and functionality within javaScript which will allow copied delimiters such as "\t" and "\n" to skip appropriate <input>'s in an online form.
I think I am about 33% there right now (again: hobby coder - self taught wanna be)
<script type="text/javascript">
function splitInput()
{
var x=document.forms["simpleForm02"]["dataInput_0"].value;
var delimiterT = x.split("\t");
var delimiterN = x.split("\n");
for (var i=0;i<delimiterT.length;i++)
if (x.indexOf("\t") >-1)
{
document.getElementById("dataInput_" + i ).value = (delimiterT[i]);
}
else
for (var i=0;i<delimiterN.length;i++)
if (x.indexOf("\n") >-1)
{
document.getElementById("dataInput_" + (i * 3) ).value = (delimiterN[i]);
}
}
</script>
<form name="simpleForm02">
<table>
<tr>
<th>Color</th>
<th>Model</th>
<th>Qty</th>
</tr>
<tr>
<td><input class="colorInput" id="dataInput_0" name="colorInput_row_1" value="" onKeyUp="splitInput()"></td>
<td><input class="modelInput" id="dataInput_1" name="modelInput_row_1" value="" onKeyUp=""></td>
<td><input class="qtyInput" id="dataInput_2" name="qtyInput_row_1" value="" onKeyUp=""></td>
</tr>
<tr>
<td><input class="colorInput" id="dataInput_3" name="colorInput_row_2" value="" onKeyUp=""></td>
<td><input class="modelInput" id="dataInput_4" name="modelInput_row_2" value="" onKeyUp=""></td>
<td><input class="qtyInput" id="dataInput_5" name="qtyInput_row_2" value="" onKeyUp=""></td>
</tr>
<tr>
<td><input class="colorInput" id="dataInput_6" name="colorInput_row_3" value="" onKeyUp=""></td>
<td><input class="modelInput" id="dataInput_7" name="modelInput_row_3" value="" onKeyUp=""></td>
<td><input class="qtyInput" id="dataInput_8" name="qtyInput_row_3" value="" onKeyUp=""></td>
</tr>
</table>
</form>
This code kinda works, in a limited way. If I copy three excel cells aligned side by side, and paste it into <input class="colorInput" id="dataInput_0" name="colorInput_row_1" value="" onKeyUp="splitInput()">, then the script correctly splits and pastes the contents of the three cells across the top three inputs.
However, I obviously have flaws in the script because it doesn't recognize the '\n' delimiter at all. And I also know that I have coding issues with the circumstance: applying the code to all cells relatively, and not just ["dataInput_0"].
And lets presume I had the following data in an Excel sheet:
I am trying to find functionality that if I copied the Excel sample data above, it would overwrite/write the top 6 of the inputs in the sample <form name="simpleForm">.
Sorry to be long winded.
So, this question has been up for about a week, and during that time I have continued to look for ideas and help.
The solution which has presented to finest potential, but not a complete solution is via the code below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<script>
function splitInput() {
var x = document.forms["simpleForm02"]["dataInput_0"].value;
if (x.indexOf('\t') > 0) {
var delimiterT = x.split('\t');
for (var i = 0; i < delimiterT.length ; i++)
document.getElementById("dataInput_" + i).value = (delimiterT[i]);
}
else
if (x.indexOf('\n') > 0) {
var delimiterN = x.split('\n');
var j = 0;
for (var i = 0; i < delimiterN.length ; i++) {document.getElementById("dataInput_" + j).value = (delimiterN[i]);
j += 4;
}
}
else
return false;
}
function classFocused() {
var d = document.getElementById("dataInput_0");
d.className = d.className + " InFocus";
}
function classBlured() {
var d = document.getElementById("dataInput_0");
d.className = "inputArea";
}
</script>
<form name="simpleForm02">
<table>
<tr>
<th>Color</th>
<th>Model</th>
<th>Qty</th>
<th>Cost</th>
</tr>
<tr>
<td>
<textarea data-id="0" class="inputArea colorInput" id="dataInput_0" name="colorInput_row_1" onFocus="classFocused();" onBlur="classBlured();" onKeyUp="splitInput();"></textarea>
</td>
<td>
<textarea data-id="1" class="inputArea modelInput" id="dataInput_1" name="modelInput_row_1" onkeyup="" ></textarea></td>
<td>
<textarea data-id="2" class="inputArea qtyInput" id="dataInput_2" name="qtyInput_row_1" onkeyup="" ></textarea></textarea></td>
<td>
<textarea data-id="3" class="inputArea costInput" id="dataInput_3" name="costInput_row_1" onkeyup="" ></textarea></td>
</tr>
<tr>
<td>
<textarea data-id="4" class="inputArea colorInput" id="dataInput_4" name="colorInput_row_2" onkeyup="splitInput()" ></textarea></td>
<td>
<textarea data-id="5" class="inputArea modelInput" id="dataInput_5" name="modelInput_row_2" onkeyup="" ></textarea></td>
<td>
<textarea data-id="6" class="inputArea qtyInput" id="dataInput_6" name="qtyInput_row_2" onkeyup="" ></textarea></td>
<td>
<textarea data-id="7" class="inputArea costInput" id="dataInput_7" name="costInput_row_2" onkeyup="" ></textarea></td>
</tr>
<tr>
<td>
<textarea data-id="8" class="inputArea colorInput" id="dataInput_8" name="colorInput_row_3" onkeyup="splitInput()" ></textarea></td>
<td>
<textarea data-id="9" class="inputArea modelInput" id="dataInput_9" name="modelInput_row_3" onkeyup="" ></textarea></td>
<td>
<textarea data-id="10" class="inputArea qtyInput" id="dataInput_10" name="qtyInput_row_3" onkeyup="" ></textarea></td>
<td>
<textarea data-id="11" class="inputArea costInput" id="dataInput_11" name="costInput_row_3" onkeyup="" ></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
In the above example of the textarea's, if a '\t' delimiter exists then the split is made and the data is spread over the course of the data's inherit length.
Also, in the above example of the text areas, if a '\n' delimiter exists then the split is made and the data is spread over the course of the data's inherit length vertically instead. The statement: "j += 4" is in essence the number of columns you have in the form.
Though I still need for it to work across all text area inputs, not just the identified as ["dataInput_0"]. A jQuery $(this) identifier maybe?
Also, the coding is limited because if you copy and paste cells which have both \t and \n, then the code doesn't work.
But it is a step in the right direction.