I am trying to rewrite this function to remove the document.all and replace with document.getElementById, but so far I am not having much luck.
This is the original function:
if (document.all.DeptFundingYN.value == "TRUE") {
This is what I have:
function VoidRtn(fRecNum,fReferenceNum) {
var DeptFundingYNField = document.getElementById("VoidID");
if(DeptFundingYNField.value == "TRUE") {
var href = "PaymentsEntry.asp?speedpay=false&CLAIM=YES&LevelCode=Void&Mode=Update&Reference_Num=" + document.PayClaimGridForm.ReferenceNum.value;
href += "&RecNum=" + fRecNum;
document.location.href = href;
} else {
alert("No Department Funding");
}
}
This button:
<button title=""Void This Payment"" id=""VoidID"" class=""whitefontbutton"" onclick=""VoidRtn(" & fRecNum & "," & fReferenceNum & ");"" style=""width: 15px; height: 15px;BACKGROUND: #6a7dae; FONT-SIZE: 7 PT"" onmouseover=""this.style.background='#000066'"" onmouseout=""this.style.background='#6a7dae'"">V</button></font>
I don't understand why the double-quotes appear twice in your <button>, for example:
<button title=""Void This Payment"" ...
It should be:
<button title="Void This Payment" ...
And there is no "TRUE" value anywhere in your markup.
The only way your condition can work is if you add a value="TRUE" attribute to the button, for example:
<button title="Void This Payment" value="TRUE" ...
With these changes, it should work.
Related
Could you help to fix this error. Received error as:
Unable to find element with xpath
Below the tags for the element which is a Text area
<td nowrap="">
<script>
function clipBrdAction(evt, fieldName) {
evt = evt||window.event;
if(evt.ctrlKey && evt.keyCode==67) {
document.execCommand('copy');
//var temp = $(fieldName).value;
//clipboardData.setData('Text', temp);
//$(fieldName).value = clipboardData.getData('Text');
}
else if(evt.ctrlKey && evt.keyCode==86) {
document.execCommand('paste');
//$(fieldName).value = clipboardData.getData('Text');
}
else if(evt.ctrlKey && evt.keyCode==88) {
document.execCommand('cut');
//var temp = $(fieldName).value;
//clipboardData.setData('Text', temp);
//$(fieldName).value = '';
} else if(evt.keyCode==46) {
document.execCommand('delete');
//var selStart = $(fieldName).selectionStart;
//var selEnd = $(fieldName).selectionEnd;
//var fieldLen = $(fieldName).value.length;
//if (selEnd == fieldLen)
// temp = $(fieldName).value.substr(0,selStart);
//else if (selEnd > selStart)
// temp = $(fieldName).value.substr(0,selStart)+ $(fieldName).value.substr(selEnd, fieldLen);
//else
// temp = $(fieldName).value.substr(0,selStart)+ $(fieldName).value.substr((+selEnd + +1), fieldLen);
//clipboardData.setData('Text', temp);
//$(fieldName).value = clipboardData.getData('Text');
}
</script>
<textarea id="nrpsFilter" rows="3" onkeypress="return checkIt(event,'');" cols="30" title="" onblur="this.value=trim(this.value);" onkeyup="" onkeydown="return clipBrdAction(event, 'nrpsFilter');" name="nrpsFilter"/>
</td>
And my code is:
driver.findElement(By.xpath("//*[#id='nrpsFilter']")).sendKeys("*1??0*");
In Firepath, the element is identifiable, after when i search for another element that is under same division (div tag) but not identifiable after searching for an element from different division. Does that mean I should Switch to the division in my code? Both the divisions are under same Frame.
Ok then just before using Sendkeys please switch to the iframe first after that your code will work without any problem.
driver.switchTo().frame("frame name");
// perform your action
// after you have performed all your action inside the iframe
// plz switch back to the default content
driver.switchTo().defaultContent();
// now perform your user action outside that iframe
Hope this helps you
Try this and see if it works. I took it from your comment but rearranged a couple statements. I think you want the final sendkeys() to be in the IFRAME also, right? We really need more complete HTML to help any further.
driver.findElement(By.xpath("//*[#id='first']//span")).click(); // (1. Click Dropdown)
driver.findElement(By.xpath("//*[#id='ui-id-33']/span")).click(); // (2. Click SubDropDown )
driver.findElement(By.xpath("//a[contains(text(),'Quick Search')][#id='referential_quicksearch']")).click(); // (3.Click the link)
driver.findElement(By.xpath("//*[#id='nrpsFilter']")).sendKeys("1?0*");// (Enter in textArea)
driver.switchTo().defaultContent();
A button is clicked to trigger LoadImages method to load a series of pictures into the web page. I want to add an onclick event for each picture so when user click it, the picture name is displayed. How to use Dojo to achieve this?
LoadImages(PictureNames){
var resultUl = new Builder('<ul />');
for (i = 0; i < PictureNames.length; i++){
resultUl.append('<li><img id=' + PictureNames[i] + ' src="./images/' + PictureNames[i] + '.jpg" height="200" width="250" class="photo"/></li>');
}
dom.byId('Pictures').innerHTML = resultUl;
}
DisplayPictureName(picturename)
{
dom.byId('PictureName').value = picturename;
}
<label id="PictureName">here displays picture name</label>
<div id="Pictures"></div>
Make the elements using dojo/dom-construct and attach events using dojo/on.
var resultUl = domConstruct.create('ul');
for (i = 0; i < PictureNames.length; i++){
var image= domConstruct.create('img', {
id: PictureNames[i]',
src: "./images/"+ PictureNames[i],
style: {"height: 200px; width: 250px"},
class: "photo"});
var li= domConstruct.create('li');
domConstruct.place(li, resultUl);
domConstruct.place(image, li);
dojo.on(image, 'click', this.DisplayPictureName());
}
dom.byId('Pictures').innerHTML = resultUl;
In my JQM 1.4 + Phonegap 3.6 app, I am using a listview as in the following code.
HTML:
<div id="boardselection">
<ul id="modelsListview" data-role="listview" data-icon="false">
</ul>
</div>
JS:
function resetModelsListView(prodata, firsttime, funfeatureOn, specificBrand, specificPro) {
console.log("on passe dans resetModelsListView");
// funfeatureOn = 0;
//debug timer
var time = [];
var dummy;
var i;
var listviewdeferred = $.Deferred();
var optionspro = '';
var optionsbrand = '';
var optionsmodel = '';
var countpros = 0;
var countbrands = 0;
var countmodels = 0;
var chosenmodelListViewHandle = $('#modelsListview');
var chosenbrandSelect = $('#chosenbrand');
optionsmodel += '';
var alreadyusedbrands = [];
prodata.sort(SortByName);
// get previously selected model to reselect it later
//var previouslySelectedModelId =parseInt(chosenmodelSelect.find('li:selected').val());
if (!funfeatureOn) {
prodata.sort(SortByModel);
} else {
prodata.sort(SortByFUN);
}
//populate model list
//~ if (firsttime){
//~ var perfIsChecked = true;
//~ var smallwaveIsChecked = true;
//~ var stepupIsChecked = true;
//~ }else {
var perfIsChecked = $('#checkboxperf').is(":checked");
var smallwaveIsChecked = $('#checkboxsmallwave').is(":checked");
var stepupIsChecked = $('#checkboxstepup').is(":checked");
//~ }
console.log("perfIsChecked, smallwaveIsChecked, stepupIsChecked =");
console.log(perfIsChecked);
console.log(smallwaveIsChecked);
console.log(stepupIsChecked);
//if none checked then no filter
if (!perfIsChecked && !smallwaveIsChecked && !stepupIsChecked) {
perfIsChecked = true;
smallwaveIsChecked = true;
stepupIsChecked = true;
}
for (i = 1; i < prodata.length; ++i) {
if (specificBrand && prodata[i]['brand'] != specificBrand) {
} else if (specificPro && prodata[i]['name'] != specificPro) {
} else {
if (prodata[i]['fun'] == 0 && perfIsChecked) {
optionsmodel += '<li><a class="optionfuninit" href="#" data-proid="' + prodata[i]['id'] + '"><div class="listviewtexts"><span class="listviewtextsmodel">' + prodata[i]['model'] + '</span> - <span class="listviewtextspro">as surfed by ' + prodata[i]['name'] + '</span></div></a></li>';
} else if (prodata[i]['fun'] == 1 && smallwaveIsChecked) {
optionsmodel += '<li><a class="optionfuninit" href="#" data-proid="' + prodata[i]['id'] + '"><div class="listviewtexts"><span class="listviewtextsmodel">' + prodata[i]['model'] + '</span> - <span class="listviewtextspro">as surfed by ' + prodata[i]['name'] + '</span></div></a></li>';
} else if (prodata[i]['fun'] == 2 && stepupIsChecked) {
optionsmodel += '<li><a class="optionstepupinit" href="#" data-proid="' + prodata[i]['id'] + '"><div class="listviewtexts"><span class="listviewtextsmodel">' + prodata[i]['model'] + '</span> - <span class="listviewtextspro">as surfed by ' + prodata[i]['name'] + '</span></div></a></li>';
} else if (prodata[i]['fun'] == 3 && smallwaveIsChecked) {
optionsmodel += '<li><a class="optionkidsinit" href="#" data-proid="' + prodata[i]['id'] + '"><div class="listviewtexts"><span class="listviewtextsmodel">' + prodata[i]['model'] + '</span> - <span class="listviewtextspro">as surfed by ' + prodata[i]['name'] + '</span></div></a></li>';
}
if (prodata[i]['model'] !== prodata[i - 1]['model']) { //eliminate name duplicates if prodata sorted by model
countmodels = countmodels + 1;
}
}
}
chosenmodelListViewHandle.html(optionsmodel);
if (chosenmodelListViewHandle.listview("option", "disabled")) {
chosenmodelListViewHandle.listview("option", "disabled", false);
}
//~ if (resetModelsOnly) {
//~ if ( !isNaN(previouslySelectedModelId) ) {
//~ chosenmodelListViewHandle.find('li[href="' + previouslySelectedModelId + '"]').attr("selected", "selected").siblings('li').removeAttr('selected');
//~ }
//~ }
//~ highlightFunModels(funfeatureOn, 1);
//~ highlightStepupModels(funfeatureOn, 0);
chosenmodelListViewHandle.listview("refresh", true);
$("#chosenmodel-button").addClass("ui-icon-carat-d ui-btn-icon-right");
if (!funfeatureOn) {
} else {
$('ul#chosenmodel-menu').find("a.ui-btn:contains(SMALL-WAVE)").addClass("optionfun");
$('ul#chosenmodel-menu').find("a.ui-btn:contains(STEP-UP)").addClass("optionstepup");
}
prodata.sort(SortById); //we need this otherwise prodata is not usable by the $('#chosenpro').trigger
$("#chosenmodel-button span").attr({ 'data-i18n': 'select.3' });
$("#boardselection").i18n();
listviewdeferred.resolve();
return listviewdeferred;
}
This dynamically displays a long list of images and text, depending on wether filters (checkboxes) are checked or not, and this list is quite long to generate and particularly difficult to scroll in iOS.... The performance is bad.
Can you help me figure out a way to improve the performance.
The accepted answer is not correct. Your code is slow, but not because of jQuery Mobile. Take a look at the loop in your jsFiddle: jsfiddle.net/L3gr46s8/4
for (i = 0; i <= 50; i++) {
$('ul[data-role="listview"]').append('<li>' + 'list item ' + i + '</li>');
$('ul[data-role="listview"]').listview('refresh');
}
There are a couple very significant problems in those four lines of code.
First, your code executes two DOM traversals to locate the ul on the page. You could execute $('ul[data-role="listview"]') before the loop and store the result in a variable:
var listView = $('ul[data-role="listview"]');
Second, your code inserts the list item directly to the DOM and you instruct jQuery Mobile to immediately apply markup enhancement with .listview('refresh');. This is extraordinarily expensive! Especially on under-powered mobile devices. Depending upon the browser and page layout, those two lines could trigger a full page re-draw with every iteration of the loop.
You should render the content as a DocumentFragment (in memory), insert it all to the DOM in one action and tell JQM to enhance the markup once at the end. Even simply moving $('ul[data-role="listview"]').listview('refresh'); out of the loop would be a dramatic improvement.
Here is some additional reading on the importance of rendering your content first in memory before inserting it into the DOM:
How expensive is it to dynamically insert DIVs using JavaScript?
John Resig - DOM DocumentFragments
To put it short, jQuery Mobile is simply slow.
I have a dynamic listview in my app and also had performance issues when using jQuery Mobile. I came to a conclusion that the issue was in rendering and was caused by jQuery Mobile. I implemented my own styling and the rendering time came down from 170ms to 25ms.
Here's some backup to my point (3 articles): http://apachecordova.blogspot.fi/search/label/jQuery%20Mobile
EDIT:
As an answer to your question in the comments, I don't think it would help if I posted my code here. The whole point is that you only write the code YOU need. My listview probably is totally different than yours.
To prove my point (again), I made two listviews. The first one is a basic jQM listview. The other one is styled with custom CSS and it's pretty close to what I use in my app. There's a button in both which renders the listview. What is happening under the hood is very different:
jQM: As you can see, there's a lot of stuff (that you may not need) going on
Custom CSS: attached an event listener to all the elements to make the comparison more fair
These profiles have been recorded with Chrome Developer Tools and the difference is obvious: 173ms vs 12ms. This custom CSS took me about 5min to write:
#custom-listview {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#custom-listview li {
display: block;
position: relative;
overflow: visible;
}
#custom-listview a {
display: block;
position: relative;
text-overflow: ellipsis;
text-decoration: none;
color: white;
padding: .7em 1em;
font-size: 16px;
background-color: #333;
border: solid 1px #1f1f1f;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
}
I had to add some code here, because SO won't let me link to Fiddle without:
jQM
Custom CSS
I'm not saying jQuery Mobile is all bad. It's good for many things. But if you have complex structure and/or a lot of data, the performance may become an issue especially in PhoneGap apps. That's the conclusion I have come to with my little experience.
I have a grid with a subgrid, editable as cellEdit. In this subgrid I have one column that is a dropdownlist. What I want to do is disable inmediately two other cells in the grid (only in the same column) if the selected value of the list is "LIBRE".
I'm doing as follows (in the subgrid definition part):
afterEditCell:function(id, cellname, value, iRow, iCol){
var grid=jQuery("#" + subgrid_table_idHilos);
var ret = jQuery("#" + subgrid_table_idHilos).jqGrid('getRowData',id);
if(ret.nombreestadoe1=="LIBRE"){
grid.jqGrid('setCell',id,'conectadoe1','','not-editable-cell');
grid.jqGrid('setCell',id,'puertohiloe1','','not-editable-cell');
}
else if(ret.nombreestadoe1!="LIBRE"){
var iCol = getColumnIndexByName(grid,"conectadoe1"),
tr = grid[0].rows.namedItem(id),
td = tr.cells[iCol];
$(td).removeClass("not-editable-cell");
iCol = getColumnIndexByName(grid,"puertohiloe1"),
tr = grid[0].rows.namedItem(id),
td = tr.cells[iCol];
$(td).removeClass("not-editable-cell");
}}
The thing is: it is working, but only after clicking two times in different cells, and that's because right after the selected value is changed, the content of ret.nombreestadoe1 is:
<select role="select" id="10_nombreestadoe1" name="nombreestadoe1"><option style="background-color: green;" value="1" role="option">LIBRE</option><option style="background-color: red;" value="2" role="option">OCUPADO</option><option style="background-color: purple;" value="3" role="option">ROTO</option><option style="background-color: grey;" value="0" role="option">SIN DEFINIR</option></select>
After clicking somewhere else, it works fine, as the right value is already set in the list.
How can I get what it was just selected?
Thanks!
I found what to do. First, I do it in the 'change' function in dataevents of the column where the first list is. This way I get the selected value inmediately, I check it, and depending on the value, I disable the cell with the same code. Here the code:
{name:"nombreestadoe1",stype:'select',searchoptions: {dataUrl:'json/estadosHilos.jsp',searchhidden:true},editable:true,edittype:'select',editoptions: {dataUrl:'json/estadosHilos.jsp',
dataEvents: [
{ type: 'change', fn: function(e) {
var grid=jQuery("#" + subgrid_table_idHilos);
var id=grid.jqGrid('getGridParam', 'selrow');
switch (e.currentTarget.selectedIndex){
case 0:
color="green";
grid.jqGrid('setCell',id,'conectadoe1','','not-editable-cell');
grid.jqGrid('setCell',id,'puertohiloe1','','not-editable-cell');
break;
case 1:
color="red";
break;
case 2:
color="purple";
break;
case 3:
color="grey";
break;
default:
color="white";
break;
}
if(color!="green"){
var iCol = getColumnIndexByName(grid,"conectadoe1"),
tr = grid[0].rows.namedItem(id),
td = tr.cells[iCol];
$(td).removeClass("not-editable-cell");
iCol = getColumnIndexByName(grid,"puertohiloe1"),
tr = grid[0].rows.namedItem(id),
td = tr.cells[iCol];
$(td).removeClass("not-editable-cell");
}
e.currentTarget.parentElement.style.backgroundColor=color;
}},
]},index:"nombreestadoe1",width:70,hidden:false
},
I would like to have a button when u click on it, it would add 0.25. If I hold the ctrl button and click on the same button it will add 1 instead of 0.25. Is this possible in AngularJs?
Please let me know.
(UPDATED)
HTML :
<input type="text" id="field" value="0" />
<input type="button" id="but" value="ADD" />
JS :
document.onkeydown = downkey;
document.onkeyup = upkey;
var ctrl = 0;
function downkey(e) {
e = e || window.event;
if (e.keyCode == '17') {
ctrl = 0.75;
}
}
function upkey(e) {
e = e || window.event;
if (e.keyCode == '17') {
ctrl = 0;
}
}
var clickbut =function(){
var tmp = document.getElementById('field').value*1;
var value =tmp+0.25+ctrl;
document.getElementById('field').value=value;
}
Thank you #Youness I already got my answer. I used Angular Hotkeys to make this work.
For other people i'll put a link:
http://chieffancypants.github.io/angular-hotkeys/