Okay so I have a YUI Datatable. Most of it is exactly as the how to guide says to construct it.
I have an event that governs changing the rows per page. It's linked to the rows per page drop down element and it saves the value of that drop down as a cookie when the drop down is changed.
var onRPPChange1 = YAHOO.util.Event.addListener("yui-pg0-1-rpp24", "change", getRPP_1);
The problem is that "yui-pg0-1-rpp24" (the ID of the drop down) changes whenever I make updates to my data table. I would like to extend this so that when the page loads it will dynamically insert the ID of that drop down into this event listener so that I don't have to keep editing it after future updates.
I've managed to construct that following that will capture the ID and I can alert it after the table loads, but so far, including the result of this function in the above addListener code isn't working.
var setRPPVars = function() {
YAHOO.util.Event.onAvailable("rppSpan", this.handleOnAvailable, this);
}
var rppSpanIds = new Array();
var rppArray = new Array();
setRPPVars.prototype.handleOnAvailable = function() {
var spans = document.getElementsByTagName("span");
var n = 0;
for(var i=0; i<spans.length; i++){
if(spans[i].id == "rppSpan"){
rppSpanIds[n] = spans[i];
if(n == 0){
rppTopID = rppSpanIds[n].firstChild.id;
rppArray[0] = rppTopID;
}
else if(n==1){
rppBottomID = rppSpanIds[n].firstChild.id;
rppArray[1] = rppBottomID;
}
n++;
}
}
alert(rppTopID);
alert(rppBottomID);
alert(rppArray);
}
var rppEvent = new setRPPVars();
//this is the part that doesn't work:
var onRPPChange0 = YAHOO.util.Event.addListener(rppArray[0], "onchange", getRPP_0);
function getRPP_0(){setRPPVars();oRPP = rppTopID;alert("rppTopID: "+rppTopID); alert("oRPP: "+oRPP);};
Any suggestions you've got would be awesome!
EDIT: For clarity's sake, this element is the rows per page drop down:
<span id="rppSpan">
<select id="yui-pg0-1-rpp24" class="yui-pg-rpp-options" title="Rows per page">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</span>
Subscribe to YAHOO.widget.Paginator's rowsPerPageChange instead:
http://developer.yahoo.com/yui/docs/YAHOO.widget.Paginator.html#event_rowsPerPageChange
Then you don't have to find the actual element.
Related
working on the follow code. Having some issues with taking the user input from the day and the temp. I have a start but again running into an issue with Step 2 & 3 unable to pass the information to the array and figure out how to display it. Any insight and direction would be greatly appreciated. Thanks
var temperatures = [];
var days = ["Monday", "Tuesday","Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
var $ = function (id) {
return document.getElementById(id);
}
var takeTemps = function () {
//###STEP 2
//Get the user inputted temp, validate it making sure it's a number
//if it's valid add it to the temperatures array at the index that
// corresponds with the day of week, e.g. 0 for Monday, 2 for Wednesday
var userTemp=(parseFloat($("tempIn").value));
while (!isNaN(tempIn)==true)
{
alert("Please enter a numeric value");
$("tempIn").focus();
}
//This gets the value from the selected menu option
var index = $("daySelect").value;
for(var dayTemp in temperatures)
{
var daily=temperatures[index]
}
//remove this when done, this just tests your menu you wrote for step 1
alert( index + " indexes day " + days[index]+ userTemp);
//Call displayTemps ONLY if the temp input was valid.
displayTemps();
//EXTRA work / not credit
// have it auto advance the selected day in the menu
// by assigning into $("daySelect").value
// If it was on Sunday change it to Monday and only on valid input
}
var displayTemps = function () {
//###STEP 3
//loop through non-undefined indexes in the temperatures array
//appended them to tempString adding the day .e.x
//Tuesday: 89
//Friday: 98
//display the string to the page by setting the value of the textarea
//
//In the same loop sum the temperatures and count
// how many there are so you can calculate the average
// and output the average temp on the page.
tempString = "";
tempTemp = 0;
for(var i in temperatures) {
tempString += index + ": " + temperatures[i];
}
document.write(tempString + "<br>");
var average =tempTemp+10;
$("tempList").value=tempString;
$("avgOut").value=average;
}
window.onload = function () {
$("addTemp").onclick = takeTemps;
//###STEP 1
//Use a for loop here to write options to the select for each day of the week
// <option value="0">Monday</option>
// using += here with innerHTML property takes the existing values and concats this on the end
for (var i =0; i<7; i++)
{
$("daySelect").innerHTML += "<option value=\""+ i + "\">" + days[i] + "</option>\n";
$("daySelect").value = "";
//var day=i-1;
//var day = days[i];
}
$("tempIn").focus();
}
Struggles with Step 2 and 3 Beleive i have #1 good to go I have enclosed the HTML for reference
<html>
<head>
<script src=script.js></script>
<head>
<body>
<section>
<select id="daySelect">
<option value="">Select a day</option>
</select>
<input type="text" id="tempIn">
<input type="button" id="addTemp" value="add temperature">
<br>
<br>
<label for="tempList">Temperature List</label>
<br>
<textarea id="tempList" rows="7" cols="50"></textarea>
<br>
<label>Average Temperature</label>
<input type="text" id="avgOut" disabled>
</section>
</body></html>
I would suggest to provide more specific information about which part of the code you are concerned with, and especially, provide the HTML code as well since that would enable us to see more clearly what you are trying to do.
When you are done, I will edit this answer and you will get appropriate guidance.
Keep coding!
EDIT
Take a look:
var userTemp=(parseFloat($("tempIn").value));
while (!isNaN(tempIn)==true)
{
alert("Please enter a numeric value");
$("tempIn").focus();
}
Looking at this little piece of code from "Step 2", I can think of a number of bugs already. Of course I'm not sure since I haven't seen your HTML yet, but it seems like:
You have put the value of the input into a variable named userTemp, yet you are checking for a variable named "tempIn" for validation. The second one probably doesn't exist at that point in time. "tempIn" was the name of your DOM element, not the JS variable you've assigned its value. You have to check for the userTemp variable.
In your validation, you are checking for the opposite of isNaN. NaN means "Not a Number", so the opposite of that would be actually number, so the statement is wrong. Not to mention that in this, you would not need to explicitly express "==true", you can check like this: while(isNaN(userTemp))
If you want to iterate a while statement for validation until you get a valid number, you need to put the variable assignment inside the while statement, since you'll need to try to assign the new number each time the validation loop iterates.
EDIT 2 - finished
Your code is live here:
https://codepen.io/bradib0y/pen/OBEdvp?editors=1010
Please note that if you are working your way through a course and this was your assessment, you've gained exactly nothing with me making these tasks for you. You will only gain from getting throught these challenges yourself.
I suggest to spend at least 1 hour with analyzing this code step by step and try to replicate it in a similar project. If you still have struggle with understanding, do yourself a favor and start over with basic javascript once again. You will be an expert on this within a week, if you put the basics down right. But if you still can't grasp the basics and keep pushing forward with more complex issues, you will have a hard time.
I'm newbie in using WebRTC and I am using this git project by Muaz-khan. I have problem when divided chat output into two columns (User name 1 and User name 2), this is default of chat output
id of this div is #chat-output
Can you show code for example? I think you just create two html containers (left and rigth for example) and push messages first to the left, and messages from the second to the right.
I am using this demo of him , [ https://github.com/muaz-khan/RTCMultiConnection/blob/master/demos/TextChat%2BFileSharing.html].
Here is function that Text Message Out Put will put here in . I want to change it in two columns, such as for User name 1 : <div id="usename1"></div>, for user name 2 : <div id="username2"></div>
document.getElementById('input-text-chat').onkeyup = function(e) {
if (e.keyCode != 13) return;
// removing trailing/leading whitespace
this.value = this.value.replace(/^\s+|\s+$/g, '');
if (!this.value.length) return;
connection.send(this.value);
appendDIV(this.value);
this.value = '';
};
var chatContainer = document.querySelector('.chat-output');
function appendDIV(event) {
var div = document.createElement('div');
div.innerHTML = event.data || event;
chatContainer.insertBefore(div, chatContainer.firstChild);
div.tabIndex = 0;
div.focus();
document.getElementById('input-text-chat').focus();
}
Modify function appendDIV().
function appendDIV(event) {
var div = document.createElement('div');
div.innerHTML = event.data || event;
chatContainer.insertBefore(div, chatContainer.firstChild);
div.tabIndex = 0;
div.style.width = '100%';
if (event.data)
div.style.textAlign = 'left';
else
div.style.textAlign = 'right';
div.focus();
document.getElementById('input-text-chat').focus();
}
P.S. I apologize for the late reply :)
I'm trying to show all the selected options from a multi select drop down list. But not getting the proper way to do this. Please help me on this.
Here is the html code for the drop down:
<select multiple id="fruits">
<option value="banana">Banana</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
</select>
Here is the code i'm trying with:
public void dropDownOperations()
{
driver.get("http://output.jsbin.com/osebed/2");
Select DDLIST = new Select(driver.findElement(By.id("fruits")));
DDLIST.selectByIndex(0);
String currentvalue = DDLIST.getFirstSelectedOption().getText();
System.out.println(currentvalue);
DDLIST.selectByIndex(1);
String currentvalue1 = DDLIST.getFirstSelectedOption().getText();
System.out.println(currentvalue1);
}
I also tried with this code:
Here i'm getting this output:
[[[[[ChromeDriver: chrome on XP (69aee19e9922ca218ff47c0ccdf1bbbc)] ->
id: fruits]] -> tag name: option], [[[[ChromeDriver: chrome on XP
(69aee19e9922ca218ff47c0ccdf1bbbc)] -> id: fruits]] -> tag name:
option]]
public void dropDownOperations1()
{
driver.get("http://output.jsbin.com/osebed/2");
Select DDLIST = new Select(driver.findElement(By.id("fruits")));
DDLIST.selectByIndex(0);
DDLIST.selectByIndex(1);
List<WebElement> currentvalue1 = DDLIST.getAllSelectedOptions();
System.out.println(currentvalue1);
}
Your second approach should work fine with a minor fix. getAllSelectedOptions() will return a List of selected options as WebElement. You need to iterate over the list to get the text from WebElement.
List<WebElement> selectedOptions = DDLIST.getAllSelectedOptions();
for (WebElement option : selectedOptions){
System.out.println(option.getText());
}
Try This:
List<WebElement> allSelected = select.getAllSelectedOptions();
Iterator itr = allSelected.iterator();
while(itr.hasNext()){
WebElement item = (WebElement) itr.next();
System.out.println(item.getText());
}
Try this below code, It will select one by one options from dropdown.
Select DDLIST = new Select(driver.findElement(By.id("fruits")));
DDLIST.selectByIndex(0);
DDLIST.selectByIndex(1);
List<WebElement> selectedOptions = DDLIST.getAllSelectedOptions();
for(int i=0; i<selectedOptions.size(); i++)
{
System.out.println(DDLIST.getOptions().get(i).getText());
}
Try This:
System.out.println(DDLIST.selectByIndex(0).getText());
System.out.println(DDLIST.selectByIndex(1).getText());
And so on. Instead of using a variable and trying it.
Try this:
Select DDLIST = new Select (driver.findElement(By.id("fruits")));
for(int i=0; i<DDLIST.getOptions().size(); i++)
System.out.println(DDLIST.getOptions().get(i).getText());
I know there is a few post about it. I've tryed to work with the answer but I must be missing something somewhere (I'm pretty noob).
As I said in the title, I would like to have a page that show a big list of item checked or not according to database information. The page load with an Id.
Type: CSHTML, Razor
Database: defect
Table name: defectqc
The table is looking a bit like that so far:
<table>
<tr><td><p><input type="checkbox" name="ltcheck1" checked="#ltcheck1"></td></tr>
<tr><td><p><input type="checkbox" name="ltcheck2" checked="#ltcheck2"></td></tr>
<tr><td><p><input type="checkbox" name="ltcheck3" checked="#ltcheck3"></td> </tr>
</table>
So the code script I've tryed at the begining is this one...
var Id = "";
var ltcheck1 = "";
var ltcheck2 = "";
var ltcheck3 = "";
if(!IsPost){
if(!Request.QueryString["Id"].IsEmpty() && Request.QueryString["Id"].IsInt()) {
Id = Request.QueryString["Id"];
var db = Database.Open("defect");
var dbCommand = "SELECT * FROM defectqc WHERE Id = #0";
var row = db.QuerySingle(dbCommand, Id);
if(row != null) {
ltcheck1 = row.ltcheck1;
ltcheck2 = row.ltcheck2;
ltcheck2 = row.ltcheck3;
}
The database got column written "True" or "False" into it. I want the checkboxes to be checked if the column is "true"
Please MTV! Pimp my ride! ;D
Sorry for my english, I'm trying hard
<input type="checkbox"/>
Will only be checked if you use the attribute
checked
or
checked="checked"
So try to generate this:
<input type="checkbox" checked/>
Following your logic Schaemelhout Would it be possible if I use this kind of statement
var Id = "";
var ltcheck1 = "";
var ltcheck2 = "";
var ltcheck3 = "";
if(!IsPost){
if(!Request.QueryString["Id"].IsEmpty() && Request.QueryString["Id"].IsInt()) {
Id = Request.QueryString["Id"];
var db = Database.Open("defect");
var dbCommand = "SELECT * FROM defectqc WHERE Id = #0";
var row = db.QuerySingle(dbCommand, Id);
if(row.ltcheck1 = "true") {
ltcheck1.checked
}
if(row.ltcheck2 = "true") {
ltcheck1.checked
}
(I know the syntax isn't correct)
I found this which is in PHP
<input type="checkbox" name="ltcheck1" value="True" <?php echo $checked; ?> />
if ($row['letcheck1'] == 'True') $checked = 'checked="checked"';
Assuming that the data have already been pulled out. It would do exactly what I need... Is there a way to translate it?
Why don't you use the html helpers?
#Html.CheckBox("ltcheck1")
#Html.CheckBox("ltcheck2")
#Html.CheckBox("ltcheck3")
First, you have to know that I am developing my project with Struts (J2EE
Here is my problem :
I have 2 dijit.form.Select widgets in my page, and those Select are filled with the same list (returned by a Java class).
When I select an option in my 1st "Select widget", I would like to update my 2nd Select widget, and disable the selected options from my 1st widget (to prevent users to select the same item twice).
I succeed doing this (I'll show you my code later), but my problem is that when I open my 2nd list, even once, it will never be refreshed again. So I can play a long time with my 1st Select, and choose many other options, the only option disabled in my 2nd list is the first I've selected.
Here is my JS Code :
function removeSelectedOption(){
var list1 = dijit.byId("codeModif1");
var list2 = dijit.byId("codeModif2");
var list1SelectedOptionValue = list1.get("value");
if(list1SelectedOptionValue!= null){
list2.reset();
for(var i = 0; i < myListSize; i++){
// If the value of the current option = my selected option from list1
if(liste2.getOptions(i).value == list1SelectedOptionValue){
list2.getOptions(i).disabled = true;
} else {
list2.getOptions(i).disabled = false;
}
}
}
Thanks for your help
Regards
I think you have to reset() the Select after you've updated its options' properties. Something like:
function removeSelectedOption(value)
{
var list2 = dijit.byId("codeModif2"),
prev = list2.get('value');
for(var i = 0; i < myListSize; i++)
{
var opt = myList[i];
opt.disabled = opt.value === value;
list2.updateOption(opt);
}
list2.reset();
// Set selection again, unless it was the newly disabled one.
if(prev !== value) list2.set('value', prev);
};
(I'm assuming you have a myList containing the possible options here, and the accompanying myListSize.)