I have a ajax call that retreives data and its success portion looks like this:
$("table.table").append("<tr><td>ID: " + item.ID + "</td><td>Name: " + item.name +" Url:</td><td><a href='https://.......sharepoint.com/" +item.url+ "'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a>" + "</td></tr>");
My html table look like this:
<table class="table"></table>
I am trying to show elements like a table:
But instead it's shows like single sentence, like this one: ID: 002 Name: toysrus Url:(icon)
How can I solve this problem and is there any way that I can make items look little bit more modern and useful.
Any suggestion will be highly appreciated.
var uri = 'sharepointmodel.json';
function find() {
var info = $('#KUNDE').val()
$("#loader").show();
$.getJSON(uri)
.done(function (data) {
var item = data.filter(function (obj) {
return obj.name === info || obj.ID === info;
})[0];
if (typeof item ==='undefined'){
alert("Ukendt navn eller ID");
}
else if (typeof item !== 'undefined' || item !== null){
$("table.table").append("<tr><td>ID: " + item.ID + "</td><td>Name: " + item.name +" Url:</td><td><a href='https://........sharepoint.com/" +item.url+ "'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a>" + "</td></tr>");
}
})
.fail(function (jqXHR, textStatus, err) {
$('#ERROR').text('Kan ikke oprette forbindelse til serveren! '/* + err*/);}).always(function (){$("#loader").hide();
});
}
and Html part is:
<body>
<header>
<a href="index.html" id="logo">
<h1></h1>
<h2></h2>
</a>
<nav>
<ul>
<li>SearchBox</li>
<li>.com</li>
<li>Support&Aflastning</li>
</ul>
</nav>
</header>
<div class="container">
<li class="li-myLeagues">
<div style="float:left;margin-left:10px;">
<input type="text" id="KUNDE" placeholder="Search by name or ID." value="" size="60" />
<div id="loader" style="display:none;"><img src="loader.gif" /></div> </div>
<div style="float:left;margin-left:10px;">
<button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button>
</div>
</li>
</div>
<div id="loader" style="display:none;"><img src="loader.gif" /></div>
<section class="section">
<div class="liper">
<table class="table"></table>
<p id="ERROR" /> </p>
</div>
</section>
Sorry its looks very messy.
Like this?
$("table.table").append("<thead><tr><th>ID</th><th>Name</th><th>URL</th></tr></thead>");
$("table.table").append("<tr><td>1</td><td>MARC</td><td><a href='https://.......sharepoint.com'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a></td></tr>");
$("table.table").append("<tr><td>2</td><td>MICHAEL</td><td><a href='https://.......sharepoint.com'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a></td></tr>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1 class="table"></table>
$(() => {
var jsonObject = [{ id: '002', name: 'Google', Icon: 'https://t0.rbxcdn.com/98aeff8137da4af6157fb1c29836d9bc' },
{ id: '002', name: 'Fb', Icon: 'https://t0.rbxcdn.com/875e717ac7ae0df8d133278d0c52f963' },
{ id: '002', name: 'Yahoo', Icon: 'https://t0.rbxcdn.com/875e717ac7ae0df8d133278d0c52f963' }]
;
//Get the external template definition using a jQuery selector
var template = kendo.template($("#javascriptTemplate").html());
//Create some dummy data
var data = jsonObject;
var result = template(data); //Execute the template
$("table").html(result); //Append the result
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<table></table>
<script id="javascriptTemplate" type="text/x-kendo-template">
<table>
<tr> <td><b>ID</b> </td> <td> <b>Name </b> </td> <td> <b>icon </b> </td> </tr>
# for (var i = 0; i < data.length; i++) { #
<tr> <td> #= data[i].id #</td> <td> #= data[i].name # </td> <td> <img src="#= data[i].Icon #" width="150px" height="150px"/> </td> </tr>
# } #
</table>
</script>
</body>
</html>
Related
I am working on jQuery homework again and I am having an issue getting my results to display for a search function using the Google Books API. I have a form getting a search term, number of max results to show along with the page to show. My page also has a section to display my GB Bookshelf, which is functioning as it should I am not getting errors in the Dev Tools console of Chrome and VS Code is not showing any errors. I took my search string and put it in Chrome and put in values for the variables to ensure I am getting results, which I am. I am sure I am missing something small that is escaping my eyes.
JS Code
/*jQuery code to show advanced search bar*/
/*Also hides advanced search link once clicked*/
$(document).ready(function(){
$("#advanced-search").hide();
$("#showAdvancedSearch").on('click',function(){
$("#advanced-search-show").hide();
$("#advanced-search").show();
});
});
/*begin bookshelf*/
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var gbaObject = JSON.parse(this.responseText);
var gbaHTML = '';
gbaObject.items.forEach(function (item) {
if (typeof item.volumeInfo.imageLinks != "undefined" && item.volumeInfo.imageLinks != null && item.volumeInfo.imageLinks != "") {
gbaHTML += `<div class="div200 border" onclick="singleGoogleBooks('` + item.id + `');">
<div>
<img src="` + item.volumeInfo.imageLinks.smallThumbnail + `" alt="` + item.volumeInfo.title + `" title="` + item.volumeInfo.title + `"/>
<div class="title"><strong>Title:</strong> ` + item.volumeInfo.title + `</div>
</div>
</div>`;
}
});
$('#displayBookshelf').html(gbaHTML);
}
};
xmlhttp.open("GET", "https://www.googleapis.com/books/v1/users/115951386289303716892/bookshelves/1001/volumes?startIndex=0&maxResults=10", true);
xmlhttp.send();
/*end bookshelf*/
/*begin booksearch*/
function bookSearch() {
var term = $("#q-term").val();
var maxResults = parseInt($("#maxResults").val());
var goToPage = parseInt($("#goToPage").val());
var startIndex = parseInt(goToPage) * parseInt(maxResults);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var gbaSearchObject = JSON.parse(this.responseText);
var gbaSearchHTML = '';
gbaSearchObject.items.forEach(function (item) {
if (typeof item.volumeInfo.imageLinks != "undefined" && item.volumeInfo.imageLinks != null && item.volumeInfo.imageLinks != "") {
gbaSearchHTML += `<div class="div200 border" onclick="singleGoogleBooks('` + item.id + `');">
<div>
<img src="` + item.volumeInfo.imageLinks.smallThumbnail + `" alt="` + item.volumeInfo.title + `" title="` + item.volumeInfo.title + `"/>
<div class="title"><strong>Title:</strong> ` + item.volumeInfo.title + `</div>
</div>
</div>`;
}
});
$('#displayBookResults').html(gbaSearchHTML);
}
};
xmlhttp.open("GET", "https://www.googleapis.com/books/v1/volumes?q=" + term + "&startIndex=" + startIndex + "&maxResults=" + maxResults + "", true);
xmlhttp.send();
return false;
}
/*end booksearch*/
/*send user to details page onclick of results (PDP)*/
function singleGoogleBooks(bid) {
window.location.href = '/single-google-books/?bid=' + bid + '';
}
/*end PDP*/
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lee Baldwin - Milestone 2</title>
<!--import external stylesheet-->
<link href="styles/main.css" rel="stylesheet" />
<!-- import jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--import external javascript-->
<script src="scripts/main.js"></script>
</head>
<body>
<div class="header">
<h1>Lee Baldwin</h1>
<h3>Kennesaw State University Student</h3>
</div>
<div>
<ul>
<li>Milestone 1a</li>
<li>Milestone 1b</li>
<li>Milestone 2</li>
<li>Milestone 3</li>
<li>Milestone 4</li>
</ul>
</div>
<div class="search-bar">
<label for="searchForm">Keywords:</label>
<form method="post" action="javascript:;" id="searchForm" onsubmit="return bookSearch()">
<input type="text" id="q-term" required="required"/>
<button type="submit">Submit</button>
<span id="advanced-search-show">Advanced Search</span>
<span class="search-bar" id="advanced-search">
<label for="maxResults">Max Results:</label>
<select id="maxResults" onchange="bookSearch()">
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
</select>
<label for="goToPage">Go to Page:</label>
<select id="goToPage" onchange="bookSearch()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
</select>
</span>
</div>
<h2>Search Results</h2>
<div class="grid-container" id="displayBookResults">
</div>
<h2>My Bookshelf</h2>
<div class="grid-container" id="displayBookshelf">
</div>
</body>
</html>
console.log
main.js:19 (5) [{…}, {…}, {…}, {…}, {…}]0: {kind: "books#volume", id: "eSIsAwAAQBAJ", etag: "vL5v8dEFNzc", selfLink: "https://www.googleapis.com/books/v1/volumes/eSIsAwAAQBAJ", volumeInfo: {…}, …}1: {kind: "books#volume", id: "LpctBAAAQBAJ", etag: "DoHITbafozc", selfLink: "https://www.googleapis.com/books/v1/volumes/LpctBAAAQBAJ", volumeInfo: {…}, …}2: {kind: "books#volume", id: "Wmfr1Zp7d5EC", etag: "R1DNX3Ho1hU", selfLink: "https://www.googleapis.com/books/v1/volumes/Wmfr1Zp7d5EC", volumeInfo: {…}, …}3: {kind: "books#volume", id: "PXa2bby0oQ0C", etag: "2NYLWaSh5Wc", selfLink: "https://www.googleapis.com/books/v1/volumes/PXa2bby0oQ0C", volumeInfo: {…}, …}4: {kind: "books#volume", id: "ptiYBAAAQBAJ", etag: "mpwwx7aWosM", selfLink: "https://www.googleapis.com/books/v1/volumes/ptiYBAAAQBAJ", volumeInfo: {…}, …}length: 5__proto__: Array(0)
I solved my own issue, but want to thank #Greg for his assistance. To solve the issue, I created the bookshelf code as its' own function, then used an onLoad trigger in the body tag to load it. I also made a couple of enhancements such as hiding the search results display until a search is performed.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lee Baldwin - Milestone 2</title>
<!--import external stylesheet-->
<link href="styles/main.css" rel="stylesheet" />
<!-- import jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--import external javascript-->
<script src="scripts/main.js"></script>
</head>
<body onload="bookshelf()">
<div class="header">
<h1>Lee Baldwin</h1>
<h3>Kennesaw State University Student</h3>
</div>
<div>
<ul>
<li>Milestone 1a</li>
<li>Milestone 1b</li>
<li>Milestone 2</li>
<li>Milestone 3</li>
<li>Milestone 4</li>
</ul>
</div>
<div class="search-bar">
<label for="searchForm">Keywords:</label>
<form method="post" action="javascript:;" id="searchForm" onsubmit="return bookSearch()">
<input type="text" id="q-term" required="required"/>
<button type="submit">Submit</button>
<span id="advanced-search-show">Advanced Search</span>
<span class="search-bar" id="advanced-search">
<label for="maxResults">Max Results:</label>
<select id="maxResults" onchange="bookSearch()">
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
</select>
<label for="goToPage">Go to Page:</label>
<select id="goToPage" onchange="bookSearch()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
</select>
</span>
</div>
<div class="grid-container" id="displayBookResults">
<h2>Search Results</h2>
</div>
<h2>My Bookshelf</h2>
<div class="grid-container" id="displayBookshelf">
</div>
</body>
</html>
JS
/*jQuery code to show advanced search bar*/
/*Also hides advanced search link once clicked*/
$(document).ready(function(){
$("#displayBookResults").hide();
$("#advanced-search").hide();
$("#showAdvancedSearch").on('click',function(){
$("#advanced-search-show").hide();
$("#advanced-search").show();
});
});
/*begin bookshelf*/
function bookshelf(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var gbaObject = JSON.parse(this.responseText);
var gbaHTML = '';
console.log(gbaObject.items);
gbaObject.items.forEach(function (item) {
if (typeof item.volumeInfo.imageLinks != "undefined" && item.volumeInfo.imageLinks != null && item.volumeInfo.imageLinks != "") {
gbaHTML += `<div class="div200 border" onclick="singleGoogleBooks('` + item.id + `');">
<div>
<img src="` + item.volumeInfo.imageLinks.smallThumbnail + `" alt="` + item.volumeInfo.title + `" title="` + item.volumeInfo.title + `"/>
<div class="title"><strong>Title:</strong> ` + item.volumeInfo.title + `</div>
</div>
</div>`;
}
});
$('#displayBookshelf').html(gbaHTML);
}
};
xmlhttp.open("GET", "https://www.googleapis.com/books/v1/users/115951386289303716892/bookshelves/1001/volumes?startIndex=0&maxResults=10", true);
xmlhttp.send();
}
/*end bookshelf*/
/*begin booksearch*/
function bookSearch() {
var term = $("#q-term").val();
var maxResults = parseInt($("#maxResults").val());
var goToPage = parseInt($("#goToPage").val());
var startIndex = parseInt(goToPage) * parseInt(maxResults);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var gbaSearchObject = JSON.parse(this.responseText);
var gbaSearchHTML = '';
console.log(gbaSearchObject.items);
gbaSearchObject.items.forEach(function (item) {
if (typeof item.volumeInfo.imageLinks != "undefined" && item.volumeInfo.imageLinks != null && item.volumeInfo.imageLinks != "") {
gbaSearchHTML += `<div class="div200 border" onclick="singleGoogleBooks('` + item.id + `');">
<div>
<img src="` + item.volumeInfo.imageLinks.smallThumbnail + `" alt="` + item.volumeInfo.title + `" title="` + item.volumeInfo.title + `"/>
<div class="title"><strong>Title:</strong> ` + item.volumeInfo.title + `</div>
</div>
</div>`;
}
});
$("#displayBookResults").show();
$('#displayBookResults').html(gbaSearchHTML);
}
};
xmlhttp.open("GET", "https://www.googleapis.com/books/v1/volumes?q=" + term + "&startIndex=" + startIndex + "&maxResults=" + maxResults + "", true);
xmlhttp.send();
return false;
}
/*end booksearch*/
/*send user to details page onclick of results (PDP)*/
function singleGoogleBooks(bid) {
window.location.href = '/single-google-books/?bid=' + bid + '';
}
/*end PDP*/
I would like to remove my list result when I search second element from search box.
I have tried some jquery code but I assume its not working because I am using it on wrong place or wrong content.
Any suggestion will be highly appreciated.
Here is the my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kunde</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script src="autocomplete/jquery.easy-autocomplete.min.js"></script>
<link href="autocomplete/easy-autocomplete.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="custom.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="jumbotron">
<div class="col-lg-4">
<input type="text" id="KUNDE" size="50" placeholder="Search by name." />
</div>
<div class="col-lg-2">
<input class="btn btn-default" id="buton" type="submit" value="search" onclick="find();" />
</div>
</div>
<ul id="list"></ul>
<div class="footer"><p> © Copyright 2016</p> <strong>RackPeople</strong>.</div>
</div>
<script>
$(function () {
$("#KUNDE").focus();
});
$(document).keypress(function (e) {
if (e.which == 13) {
$("#buton").click();
}
});
//$('#button').on('click', function () {
// $(root).empty();
//});
//$("li:eq(3)", $(root)).remove();
//$('ul').eq(1).toggleClass('hidden');
//$('#ul').empty();
//$("#buton").click(function () {
// $("#list").remove();
//});
//$('#buton').on('click', '.itemDelete', function () {
// $(this).closest('li').remove();
//});
var uri = 'json.json';
function find() {
var info = $('#KUNDE').val();
$.getJSON(uri)
.done(function (data) {
var item = data.filter(function (obj) {
return obj.name === info || obj.ID === info;
})[0];
if (typeof item !== 'undefined' || item !== null) {
$("ul").append("<li>" + 'ID = ' + item.ID, 'Name = ' + item.name, "<br />" + 'Phone = ' + item.phone, "<br />" + 'Contact = ' + item.contact, "<br />" + 'BalanceLCY = ' + item.balanceLCY, "<br />" + 'CreditLimitLCY = ' + item.creditLimitLCY, "</li>")
}
})
.fail(function (jqXHR, textStatus, err) {
$('#RESULTS').text('Error: ' + err);
});
}
var options = {
url: "json.json",
getValue: "name",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#KUNDE").easyAutocomplete(options);
</script>
</body>
</html>
you have
<input class="btn btn-default" id="buton" type="submit" value="search" onclick="find();" />
try
<button type="button" id="buton">Click me</button>
and
$("#buton").click(function () {
$("#list").remove();
//do more stuff
});
I need to get the value of the id attribute of an element.
javascript:
function checkPhoneZip() {
$.get(encodeURI("checkPhoneZip.aspx?mobilePhone=" + $("#mobilePhone").val() + "&postalCode=" + $("#postalCode").val()), function (data) {
$("#ajaxResults").html(data);
})
.done(function () {
var divs = $("#ajaxResults").find('div');
if (divs.length == 1) {
if ($("#ajaxResults").html() == "<div>dbEmpty<div>") {
$("#emailGetError").text("Cannot find an email address for the information entered");
}
else {
$("#user").val($("#ajaxResults").text())
$("#user").focus();
$("#emailRecovery").slideUp();
}
}
else {
var options = "";
for (i = 0; 1 < divs.length; i++) {
options += "<option value='" + $(divs[i]).attr("id") + "'>" + $(divs[i]).text() + "</option>";
}
$("#companies").html("<option selected>Select which business you are</option>" + options);
$("#companies").slideDown('fast');
}
})
.fail(function () { alert("Failed to contact Database. Please try again in a few seconds"); })
;
}
html
<%# Page Language="C#" AutoEventWireup="true" CodeFile="passwordReset.aspx.cs" Inherits="passwordReset" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="https://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
<link href='https://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Dosis:800' rel='stylesheet' type='text/css'/>
<style type="text/css">
.link{text-decoration:underline;cursor:pointer}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="getCode" runat="server">
<div>Enter the email address associated with your account and a verification code will be texted to the mobile phone number you used to sign up.</div>
<div>
<input id="user" runat="server" type="email" />
<div id="userError"></div>
</div>
<div>
<button type="button" id="getCodeButton">GET CODE</button>
</div>
<div class="link" id="forgotEmail">Forgot email address?</div>
</div>
<div id="emailRecovery" style="display:none">
<div>Enter the mobile phone number you registered with</div>
<div><input type="tel" id="mobilePhone" /></div>
<div>Enter the postal code you registered with</div>
<div><input type="text" id="postalCode" /></div>
<div>
<button type="button" id="getEmailButton">GET EMAIL</button>
</div>
<div id="emailGetError"></div>
<div id="chooseCompany" style="display:none">
<select id="companies"></select>
</div>
</div>
<div id="code" runat="server" style="display:none">
<div>A text message with a verification code has been sent to <span id="msgPhone"></span>.<br />Enter the code you received below.</div>
<div><input type="text" id="codeInput" /></div>
<div id="codeInputError"></div>
<div>
<button type="button" id="sendCodeButton">SEND CODE</button>
</div>
</div>
<div id="changePass" style="display:none">
<div>Enter new password</div>
<div><input type="text" id="pwInput1" /></div>
<div id="pwInput1Error"></div>
<div>Enter new password again</div>
<div><input type="text" id="pwInput2" /></div>
<div id="pwInput2Error"></div>
<div>
<button type="button" id="changePassButton">UPDATE</button>
</div>
</div>
<div id ="ajaxResults" style="display:none"></div>
</form>
<script type="text/javascript" src="passwordReset.js"></script>
</body>
</html>
This part, $(divs[i]).attr("id"), comes back as undefined in the debugger. I'm trying to get the value of the id attribute of each div inside of #ajaxResults, and each div does have an id attribute. Something wrong with my syntax or understanding.
You're biggest problem is your for loop is checking 1 < divs.length instead of i < divs.length.
Use this instead:
for (i = 0; i < divs.length; i++) {
options += "<option value='" + $(divs[i]).attr("id") + "'>" + $(divs[i]).text() + "</option>";
}
I am new to the front end development but have quite a bit of back end dev experience. I've tried a few different approaches to the javascript below and that is just some of the things I tried.
I have the following code that shows the products. This is in n for each loop from my product list.
At the bottom of the page i have the add button.
I need to get the data-Id of each product to get the productId, price to get the price and the value of the qty input field so that I can send it through to my cart.
I can't get those values and have tried a few different things.
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">#Html.DisplayFor(modelItem => product.Code)</h3>
</div>
<div class="panel-body">
<div class="text-center" id="user_image">
<img src="../../images/chickenBreast.jpg" class="img-thumbnail" />
</div>
<br />
<div class="panel-body form-group-separated">
<div class="form-group">
<label class="control-label">Short Description:</label>
<p>#Html.DisplayFor(modelItem => product.Description)</p>
</div>
<div class="form-group">
<label class="control-label">Long Description:</label>
<p>#Html.DisplayFor(modelItem => product.LongDescription)</p>
</div>
</div>
<div class="panel-footer">
<form class="form-inline" role="form">
<div class="form-group">
<input id="qty" data-id="#product.Id" price="#product.Price" type="text" class="Product-control" placeholder="Qty" />
</div>
<button id="AddButton" class="btn btn-primary pull-right">Add to cart</button>
</form>
</div>
</div>
</div>
</div>
Here is my javascript, I have tried a few different things but nothing seems to give me the required data
<script type="text/javascript" src="../../Scripts/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$("#AddButton").click(function (form) {
var productToUpdate = $("input").parent().find("data-id");
var countToUpdate = $('input[id="qty"]', form).val();
var productPrice = $(this).parent().find('price').val();
if (productToUpdate != '') {
// Perform the ajax post
$.post("~/Cart/GetCartItems", { "productId": productToUpdate, "qty": countToUpdate, "price": productPrice },
function (data) {
//Check for not process the callback data when server error occurs
//if (data.ItemCount != -1) {
// $('#cart-total').text(data.CartTotal);
//}
});
}
});
</script>
The selector data-id will never match. That is suggesting that data-id is an element type as (example) <data-id ...></data-id> try using find('input[data-id]') instead.
https://api.jquery.com/category/selectors/attribute-selectors/
https://api.jquery.com/has-attribute-selector/
Description: Selects elements that have the specified attribute, with
any value.
Example from documentation:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attributeHas demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>
<script>
// Using .one() so the handler is executed at most once
// per element per event type
$( "div[id]" ).one( "click", function() {
var idString = $( this ).text() + " = " + $( this ).attr( "id" );
$( this ).text( idString );
});
</script>
</body>
</html>
// Using .one() so the handler is executed at most once
// per element per event type
$("div[id]").one("click", function() {
var idString = $(this).text() + " = " + $(this).attr("id");
$(this).text(idString);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attributeHas demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>
<script>
</script>
</body>
</html>
I figured out the hierarchies
here is my solution
HTML
<div class="panel-footer">
<form class="form-inline" role="form">
<div class="form-group">
<input id="qty" type="text" class="Product-control" placeholder="Qty" />
</div>
<button id="AddButton" data-id="#product.Id" price="#product.Price" class="btn btn-primary pull-right">Add to cart</button>
</form>
</div>
The javascript
<script type="text/javascript" src="../../Scripts/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$("#AddButton").click(function () {
var productId = $(this).attr('data-id');
var productPrice = $(this).attr('price');
var qty = $(this).prev().children(".Product-control").val();
if (productId != '') {
// Perform the ajax post
$.post("~/Cart/GetCartItems", { "productId": productId, "qty": qty, "price": productPrice },
function (data) {
//Check for not process the callback data when server error occurs
//if (data.ItemCount != -1) {
// $('#cart-total').text(data.CartTotal);
//}
});
}
});
</script>
Got the following chunk of Html...
<div style="visibility:visible" id="stateProvinceDiv">
<div id="stateUSALabelDiv"><label for="stateUSAIdSelect">Find Your Bookstore</label></div>
<select size="1" id="stateUSAIdSelect" name="stateUSAId">
<option>Loading...</option>
</select>
</div>
The page/content for the select is generated by javascript functions/calls...
I can fetch the page, so I get a HtmlPage instance.
I can't figure out how to fetch the select/options, given that I don't
have a "form" element in the DOM. Pointers to chnuks of code that
handle this would be appreciated.
The actual Html is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>College Textbooks: College Apparel, College Gifts & Used College Books: eFollett.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="From used college books to up-to-date college textbooks and great college gifts like your school?s latest college apparel and more, visit efollett.com."/>
<meta name="keywords" content="college textbooks, used college books, college apparel, college gifts"/>
<script type="text/javascript" src="/wcsstore/HostedStoreFrontAssetStore/javascript/prototype-1.5.0.js"></script>
<script type="text/javascript" src="/wcsstore/HostedStoreFrontAssetStore/javascript/Util.js"></script>
<script type="text/javascript" src="/wcsstore/HostedStoreFrontAssetStore/javascript/flPrototypeHelper.js"></script>
<link rel="stylesheet" href="/wcsstore/HostedStoreFrontAssetStore/css/style1.css" type="text/css" />
</head>
<body onload="accessibleSelect();" id="global">
<!-- BEGIN COREMETRICS SUPPORT -->
<script language="javascript1.2" src="/wcsstore/HostedStoreFrontAssetStore/javascript/eluminate.js" type="text/javascript"></script>
<script language="javascript1.2" src="/wcsstore/HostedStoreFrontAssetStore/javascript/cmdatatagutils_WC.js" type="text/javascript"></script>
<script language="javascript1.2" type="text/javascript">
//<![CDATA[
cmSetProduction();
var cm_ClientID="90227440";
cmCreatePageviewTag("efollett Home Page","10051_HOME",null,null,"10051");
//]]>
</script>
<!-- END COREMETRICS -->
<div id="wrap">
<!-- start header -->
<table width="900" border="0" cellpadding="0" cellspacing="0" id="header">
<tr>
<td>
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="skip_to_content" align="left" valign="top">
<ul>
<li>Skip to Content</li>
</ul>
</td>
<td align="right" valign="top" id="your_account">
<ul>
<li> <strong>Serving Colleges and Universities</strong> | Online and On Campus</li>
<li> | Your Account</li>
<li> | Shopping Cart<span class="cart_total">: 0</span> | </li>
<li>Subtotal:<span class="subtotal"> $0.00</span> </li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="http://images.efollett.com/htmlroot/images/templates/storeLogos/411.gif" alt="efollett.com. Online. On Campus." width="272" height="168" border="0" />
<img src="http://images.efollett.com/htmlroot/images/templates/storeBanners/411.jpg" alt="" width="624" height="168" border="0" /></td>
</tr>
<tr>
<td id="top_nav">
<h2 class="invisible">Site Menu</h2>
<ul>
<li>Home</li>
<li>
| Special Offers
</li>
<li> | Contact Us</li>
<li> |Cash For Books</li>
</ul></td>
<tr>
</table>
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- START CONTENT -->
<td align="left" valign="top"><!--intro table-->
<table border="0" cellspacing="5" cellpadding="0" width="899">
<tr>
<td align="left" valign="top" width="203"><img src="http://images.efollett.com/htmlroot/images/templates/endeca/global/global_merch.jpg" alt="" width="203" height="140" /></td>
<td align="left" valign="top"><h1 class="secondaryPageHeaderHomepage"><a name="content" id="thecontent"></a>
Welcome to the efollett.com network of online bookstores!</h1>
<p> efollett.com provides you with access to over 1,200 online bookstores across the United States and Canada so you can quickly locate your campus store. </p><p> Order your college textbooks, used college books and merchandise by shopping your bookstore's online website. Each bookstore selects the college apparel and other products from their store inventory and fulfills the order, so you are actually shopping at your local bookstore. We do it this way because your campus bookstore is the best source for textbooks, college gifts and merchandise specific to your campus. </p><p><strong>Please locate your college, university or school from our drop down menus below</strong></p></td>
</tr>
</table>
<div id="storefinder">
<table cellpadding="0" cellspacing="6">
<tr style="border: none;">
<td style="border: none;">
<div id="errorDiv" style="display:none;visibility:hidden;color:red;" class="text"> </div>
</td>
</tr>
<tr>
<td align="left" valign="top">
<!-- <img src="http://images.efollett.com/htmlroot/images/templates/storeLogos/us_university." width="290" border="0" /> -->
<h2 class="us">U.S. College and Universities</h2>
<br />
<div style="visibility:visible" id="stateProvinceDiv">
<div id="stateUSALabelDiv"><label for="stateUSAIdSelect">Find Your Bookstore</label></div>
<select size="1" id="stateUSAIdSelect" name="stateUSAId">
<option>Loading...</option>
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="institutionUSADiv">
<div id="institutionUSALabelDiv"><label for="institutionUSAIdSelect">Select Your Institution</label></div>
<select size="1" id="institutionUSAIdSelect" name="institutionUSAId">
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="campusUSADiv">
<div id="campusUSALabelDiv"><label for="campusUSAIdSelect">Select Your Campus</label></div>
<select size="1" id="campusUSAIdSelect" name="campusUSAId">
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="programUSADiv">
<div id="programUSALabelDiv"><label for="programUSAIdSelect">Select Your Program</label></div>
<select size="1" id="programUSAIdSelect" name="programUSAId"></select>
</div>
<div id="buttonDivUS"></div>
<img src="http://images.efollett.com/htmlroot/images/templates//spacer.gif" width="1" height="3" hspace="0" vspace="0" border="0" alt="" />
</td>
<td align="left" valign="top">
<h2 class="canada">Canada Colleges and Universities </h2>
<br />
<div style="visibility:visible" id='stateProvince2Div'>
<div id='stateCALabelDiv'><label for="stateCAIdSelect">Find Your Bookstore</label></div>
<select size="1" id="stateCAIdSelect" name="stateCAId">
<option>Loading...</option>
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="institutionCADiv">
<div id="institutionCALabelDiv"><label for="institutionCAIdSelect">Select Your Institution</label></div>
<select size="1" id="institutionCAIdSelect" name="institutionCAId"></select>
</div>
<br />
<div style="display:none;visibility:hidden" id="campusCADiv">
<div id="campusCALabelDiv"><label for="campusCAIdSelect">Select Your Campus</label></div>
<select size="1" id="campusCAIdSelect" name="campusCAId"></select>
</div>
<br />
<div style="display:none;visibility:hidden" id="programCADiv">
<div id="programCALabelDiv"><label for="programCAIdSelect">Select Your Program</label></div>
<select size="1" id="programCAIdSelect" name="programCAId"></select>
</div>
<div id="buttonDivCA"></div>
<img src="http://images.efollett.com/htmlroot/images/templates//spacer.gif" width="1" height="3" hspace="0" vspace="0" border="0" alt="" />
</td>
<td align="left" valign="top">
<h2 class="us">U.S Schools K-12 </h2>
<br />
<div style="visibility:visible" id="stateProvince3Div">
<div id="stateUSK12LabelDiv"><label for="stateUSK12IdSelect">Find Your Bookstore</label></div>
<select size="1" id="stateUSK12IdSelect" name="stateUSK12Id">
<option>Loading...</option>
</select>
</div>
<br />
<div style="display:none;visibility:hidden" id="institutionUSK12Div">
<div id="institutionUSK12LabelDiv"><label for="institutionUSK12IdSelect">Select Your Institution</div>
<select size="1" id="institutionUSK12IdSelect" name="institutionUSK12Id"></select>
</div>
<br />
<div style="display:none;visibility:hidden" id="campusUSK12Div">
<div id="campusUSK12LabelDiv"><label for="campusUSK12IdSelect">Select Your Campus</label></div>
<select size="1" id="campusUSK12IdSelect" name="campusUSK12Id"></select>
</div>
<br />
<div style="display:none;visibility:hidden" id="programUSK12Div">
<div id="programUSK12LabelDiv"><label for="programUSK12IdSelect">Select Your Program</label></div>
<select size="1" id="programUSK12IdSelect" name="programUSK12Id"></select>
</div>
<div id="buttonDivK12"></div>
<img src="http://images.efollett.com/htmlroot/images/templates//spacer.gif" width="1" height="3" hspace="0" vspace="0" border="0" alt="" />
</td>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
String.prototype.startsWith = function(s) { return this.indexOf(s)==0; }
var uri = '/webapp/wcs/stores/servlet/StoreFinderAJAX';
var servletPath = '/webapp/wcs/stores/servlet/';
var pageType = 'FLGStoreCatalogDisplay';
var catalogId = '10001';
var categoryId = 'null';
var langId = '-1';
var demoKey = 'null';
var extraParams = 'null'; // only used for User Registration page
var multiSelect = false;
var forwardURLLocation = '';
// This map is used to determine the URI used for forwarding the user
var forwardPage = Object;
forwardPage['FLGStoreCatalogDisplay'] = 'StoreCatalogDisplay';
forwardPage['FLUserSelectSchool'] = 'UserAccountUpdateDemographicsForm';
forwardPage['FLGBuybackInfoPage'] = 'AboutBuybackView';
forwardPage['FLEdoptionsDisplayGlobal'] = 'EdoptionSearchView';
forwardPage['CGSelectStoreDisplay'] = 'CustomtsSelectedStore';
forwardPage['FLLocateStoreCourseMaterials'] = 'LocateCourseMaterialsView';
forwardPage['FLGGenMerchDisplay'] = 'CategoryDisplay';
function onPageLoad() {
AjaxQueue.setBatchSize(1);
getData(buildParms('STATESUS', 'US', 'stateUSAIdSelect'));
getData(buildParms('STATESCA','CA', 'stateCAIdSelect'));
getData(buildParms('STATESK12','K12', 'stateUSK12IdSelect'));
}
accessibleSelect=function(){
var selectedStateUSIndex;
var selectedInstUSIndex;
var selectedCampusUSIndex;
var selectedProgramUSIndex;
var selectedStateCAIndex;
var selectedInstCAIndex;
var selectedCampusCAIndex;
var selectedProgramCAIndex;
var selectedStateK12Index;
var selectedInstK12Index;
var selectedCampusK12Index;
var selectedProgramK12Index;
var stateUSAIdSelectBox = document.getElementById("stateUSAIdSelect");
stateUSAIdSelectBox.onchange=function(){
callUSStateAjax();
};
stateUSAIdSelectBox.onkeyup=function(e){
callUSStateAjax();
};
function callUSStateAjax() {
if(selectedStateUSIndex != stateUSAIdSelectBox.selectedIndex) {
doAJAXSelect("onStateUSASelect()");
selectedStateUSIndex = stateUSAIdSelectBox.selectedIndex;
selectedInstUSIndex = '';
selectedCampusUSIndex = '';
selectedProgramUSIndex = '';
}
}
var institutionUSAIdSelectBox = document.getElementById("institutionUSAIdSelect");
institutionUSAIdSelectBox.onchange=function(){
callInstUSAjax();
};
institutionUSAIdSelectBox.onkeyup=function(e){
callInstUSAjax();
};
function callInstUSAjax() {
if(selectedInstUSIndex != institutionUSAIdSelectBox.selectedIndex) {
doAJAXSelect("onInstituteUSASelect()");
selectedInstUSIndex = institutionUSAIdSelectBox.selectedIndex;
selectedCampusUSIndex = null;
selectedProgramUSIndex = null;
}
}
var campusUSAIdSelectBox = document.getElementById("campusUSAIdSelect");
campusUSAIdSelectBox.onchange=function(){
callCampusUSAjax();
};
campusUSAIdSelectBox.onkeyup=function(e){
callCampusUSAjax();
};
function callCampusUSAjax() {
if(selectedCampusUSIndex != campusUSAIdSelectBox.selectedIndex) {
doAJAXSelect("onCampusSelect_USA()");
selectedCampusUSIndex == campusUSAIdSelectBox.selectedIndex;
selectedProgramUSIndex = null;
}
}
var programUSAIdSelectBox = document.getElementById("programUSAIdSelect");
programUSAIdSelectBox.onchange=function(){
callProgramUSAjax();
};
programUSAIdSelectBox.onkeyup=function(e){
callProgramUSAjax();
};
function callProgramUSAjax() {
if(selectedProgramUSIndex != programUSAIdSelectBox.selectedIndex) {
doAJAXSelect("onProgramSelect_USA()");
selectedProgramUSIndex = programUSAIdSelectBox.selectedIndex;
}
}
var stateCAIdSelectBox = document.getElementById("stateCAIdSelect");
stateCAIdSelectBox.onchange=function(){
callStateCAAjax();
};
stateCAIdSelectBox.onkeyup=function(e){
callStateCAAjax();
};
function callStateCAAjax() {
if(selectedStateCAIndex != stateCAIdSelectBox.selectedIndex) {
doAJAXSelect("onStateCASelect()");
selectedStateCAIndex = stateCAIdSelectBox.selectedIndex;
selectedInstCAIndex = null;
selectedCampusCAIndex = null;
selectedProgramCAIndex =null;
}
}
var institutionCAIdSelectBox = document.getElementById("institutionCAIdSelect");
institutionCAIdSelectBox.onchange=function(){
callInstCAAjax();
};
institutionCAIdSelectBox.onkeyup=function(e){
callInstCAAjax();
};
function callInstCAAjax() {
if(selectedInstCAIndex != institutionCAIdSelectBox.selectedIndex) {
doAJAXSelect("onInstituteCASelect()");
selectedInstCAIndex = institutionCAIdSelectBox.selectedIndex;
selectedCampusCAIndex = null;
selectedProgramCAIndex = null;
}
}
var campusCAIdSelectBox = document.getElementById("campusCAIdSelect");
campusCAIdSelectBox.onchange=function(){
callCampusCAAjax();
};
campusCAIdSelectBox.onkeyup=function(e){
callCampusCAAjax();
};
function callCampusCAAjax() {
if(campusCAIdSelectBox != campusCAIdSelectBox.selectedIndex) {
doAJAXSelect("onCampusSelect_CA()");
selectedCampusCAIndex == campusCAIdSelectBox.selectedIndex;
selectedProgramCAIndex = null;
}
}
var programCAIdSelectBox = document.getElementById("programCAIdSelect");
programCAIdSelectBox.onchange=function(){
callProgramCAAjax();
};
programCAIdSelectBox.onkeyup=function(e){
callProgramCAAjax();
};
function callProgramCAAjax() {
if(selectedProgramCAIndex != programCAIdSelectBox.selectedIndex) {
doAJAXSelect("onProgramSelect_CA()");
selectedProgramCAIndex = programCAIdSelectBox.selectedIndex;
}
}
var stateUSK12IdSelectBox = document.getElementById("stateUSK12IdSelect");
stateUSK12IdSelectBox.onchange=function(){
callStateK12Ajax();
};
stateUSK12IdSelectBox.onkeyup=function(e){
callStateK12Ajax();
};
function callStateK12Ajax() {
if(selectedStateK12Index != stateUSK12IdSelectBox.selectedIndex) {
doAJAXSelect("onStateUSK12Select()");
selectedStateK12Index = stateUSK12IdSelectBox.selectedIndex;
selectedInstK12Index = null;
selectedCampusK12Index = null;
selectedProgramK12Index = null;
}
}
var institutionUSK12IdSelectBox = document.getElementById("institutionUSK12IdSelect");
institutionUSK12IdSelectBox.onchange=function(){
callInstK12Ajax();
};
institutionUSK12IdSelectBox.onkeyup=function(e){
callInstK12Ajax();
};
function callInstK12Ajax() {
if(selectedInstK12Index != institutionUSK12IdSelectBox.selectedIndex) {
doAJAXSelect("onInstituteUSK12Select()");
selectedInstK12Index = institutionUSK12IdSelectBox.selectedIndex;
selectedCampusK12Index = null;
selectedProgramK12Index = null;
}
}
var campusUSK12IdSelectBox = document.getElementById("campusUSK12IdSelect");
campusUSK12IdSelectBox.onchange=function(){
callCampusK12Ajax();
};
campusUSK12IdSelectBox.onkeyup=function(e){
callCampusK12Ajax();
};
function callCampusK12Ajax() {
if(selectedCampusK12Index != campusUSK12IdSelectBox.selectedIndex) {
doAJAXSelect("onCampusSelect_USK12()");
selectedCampusK12Index == campusUSK12IdSelectBox.selectedIndex;
selectedProgramK12Index = null;
}
}
var programUSK12IdSelectBox = document.getElementById("programUSK12IdSelect");
programUSK12IdSelectBox.onchange=function(){
callProgramK12Ajax();
};
programUSK12IdSelectBox.onkeyup=function(e){
callProgramK12Ajax();
};
function callProgramK12Ajax() {
if(selectedProgramK12Index != programUSK12IdSelectBox.selectedIndex) {
doAJAXSelect("onProgramSelect_USK12()");
selectedProgramK12Index = programUSK12IdSelectBox.selectedIndex;
}
}
}
// Start state
function onStateUSASelect() {
hideLayer("errorDiv");hideLayer("programUSADiv");hideLayer("campusUSADiv");showLayer("institutionUSADiv");addLoadingOption("institutionUSA");
hideLayer("programCADiv");hideLayer("campusCADiv");hideLayer("institutionCADiv");
hideLayer("programUSK12Div");hideLayer("campusUSK12Div");hideLayer("institutionUSK12Div");
hideLayer("buttonDivUS");hideLayer("buttonDivCA");hideLayer("buttonDivK12");
selectFirst("stateCAIdSelect");
selectFirst("stateUSK12IdSelect");
if($('stateUSAIdSelect').value == '') {clearAJAXTimer();hideLayer("institutionUSADiv"); return; }
getData(buildParms('INSTITUTESUS', 'US', 'stateProvinceId='+$('stateUSAIdSelect').value)) ;
}
function onStateCASelect() {
hideLayer("errorDiv");hideLayer("programCADiv");hideLayer("campusCADiv");showLayer("institutionCADiv");addLoadingOption("institutionCA");
hideLayer("programUSADiv");hideLayer("campusUSADiv");hideLayer("institutionUSADiv");
hideLayer("programUSK12Div");hideLayer("campusUSK12Div");hideLayer("institutionUSK12Div");
hideLayer("buttonDivUS");hideLayer("buttonDivCA");hideLayer("buttonDivK12");
selectFirst("stateUSAIdSelect");
selectFirst("stateUSK12IdSelect");
if($('stateCAIdSelect').value == '') {clearAJAXTimer();hideLayer("institutionCADiv"); return; }
getData(buildParms('INSTITUTESCA', 'CA', 'stateProvinceId='+$('stateCAIdSelect').value)) ;
}
function onStateUSK12Select() {
hideLayer("errorDiv");hideLayer("programUSK12Div");hideLayer("campusUSK12Div");showLayer("institutionUSK12Div");addLoadingOption("institutionUSK12");
hideLayer("programUSADiv");hideLayer("campusUSADiv");hideLayer("institutionUSADiv");
hideLayer("programCADiv");hideLayer("campusCADiv");hideLayer("institutionCADiv");
hideLayer("buttonDivUS");hideLayer("buttonDivCA");hideLayer("buttonDivK12");
selectFirst("stateUSAIdSelect");
selectFirst("stateCAIdSelect");
if($('stateUSK12IdSelect').value == '') {clearAJAXTimer();hideLayer("institutionUSK12Div"); return; }
getData(buildParms('INSTITUTESK12', 'K12', 'stateProvinceId='+$('stateUSK12IdSelect').value)) ;
}
//End State
//Start Institute
function onInstituteUSASelect() {
hideLayer("errorDiv"); hideLayer("programUSADiv");hideLayer('campusUSADiv');hideLayer('buttonDivUS');
hideLayer("programCADiv");hideLayer("campusCADiv");hideLayer("institutionCADiv");
hideLayer("programUSK12Div");hideLayer("campusUSK12Div");hideLayer("institutionUSK12Div");
selectFirst("stateCAIdSelect");
selectFirst("stateUSK12IdSelect");
if($('institutionUSAIdSelect').value == '') {clearAJAXTimer();hideLayer("campusUSADiv"); return; }
getData(buildParms('CAMPUSUS','US', 'institutionId='+$('institutionUSAIdSelect').value));
}
function onInstituteCASelect() {
hideLayer("errorDiv");
hideLayer("programUSADiv");hideLayer("campusUSADiv");hideLayer("institutionUSADiv");
hideLayer("programCADiv");hideLayer("campusCADiv");
hideLayer("programUSK12Div");hideLayer("campusUSK12Div");hideLayer("institutionUSK12Div");
selectFirst("stateUSAIdSelect");
selectFirst("stateUSK12IdSelect");
if($('institutionCAIdSelect').value == '') {clearAJAXTimer();hideLayer("campusCADiv"); return; }
getData(buildParms('CAMPUSCA','CA','institutionId='+$('institutionCAIdSelect').value));
}
function onInstituteUSK12Select() {
hideLayer("errorDiv");hideLayer("programUSADiv");hideLayer('campusK12Div');hideLayer('buttonDivK12');
hideLayer("programUSADiv");hideLayer("campusUSADiv");hideLayer("institutionUSADiv");
hideLayer("programCADiv");hideLayer("campusCADiv");hideLayer("institutionCADiv");
selectFirst("stateUSAIdSelect");
selectFirst("stateCAIdSelect");
if($('institutionUSK12IdSelect').value == '') {clearAJAXTimer();hideLayer("campusUSK12Div"); return; }
getData(buildParms('CAMPUSK12','K12','institutionId='+$('institutionUSK12IdSelect').value));
}
// End of Institutions
// Start Campus
function onCampusSelect_USA() {
if($('campusUSAIdSelect').value == ''){clearAJAXTimer();hideLayer("programUSADiv"); hideLayer("errorDiv"); hideLayer("buttonDivUS"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
getData(buildParms('PROGRAMSUS','US','campusId='+$('campusUSAIdSelect').value + "&institutionId=" + $('institutionUSAIdSelect').value));
}
function onCampusSelect_CA() {
if($('campusCAIdSelect').value == ''){clearAJAXTimer();hideLayer("programCADiv"); hideLayer("errorDiv"); hideLayer("buttonDivCA"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
getData(buildParms('PROGRAMSCA','CA', 'campusId='+$('campusCAIdSelect').value + "&institutionId=" + $('institutionCAIdSelect').value));
}
function onCampusSelect_USK12() {
if($('campusUSK12IdSelect').value == ''){clearAJAXTimer();hideLayer("programUSK12Div"); hideLayer("errorDiv"); hideLayer("buttonDivK12"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
getData(buildParms('PROGRAMSK12','K12', 'campusId='+$('campusUSK12IdSelect').value + "&institutionId=" + $('institutionUSK12IdSelect').value));
}
// End of Campus
// Program Select
function onProgramSelect_USA() {
if($('programUSAIdSelect').value == ''){clearAJAXTimer();hideLayer("buttonDivUS"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
doForward($("programUSAIdSelect").value, null, 'buttonDivUS');
}
function onProgramSelect_CA() {
if($('programCAIdSelect').value == ''){clearAJAXTimer(); hideLayer("buttonDivCA"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
doForward($("programCAIdSelect").value, null,'buttonDivCA');
}
function onProgramSelect_USK12() {
if($('programUSK12IdSelect').value == ''){clearAJAXTimer();hideLayer("buttonDivK12"); return; }
// REMOVE THIS LATER
clearAJAXTimer();
doForward($("programUSK12IdSelect").value, null, 'buttonDivK12');
}
// End of Program Select.
// Loading Drop downs starts
function loadSTATESUS(data, meta) {
hideLayer("buttonDivUS");
hideLayer("buttonDivCA");
hideLayer("buttonDivK12");
addOptions("stateUSA", data, meta, "stateUSAIdSelect");
}
function loadSTATESCA(data, meta) {
hideLayer("buttonDivUS");
hideLayer("buttonDivCA");
hideLayer("buttonDivK12");
addOptions("stateCA", data, meta, "stateCAIdSelect");
}
function loadSTATESK12(data, meta) {
hideLayer("buttonDivUS");
hideLayer("buttonDivCA");
hideLayer("buttonDivK12");
addOptions("stateUSK12", data, meta, "stateUSK12IdSelect");
}
function loadINSTITUTESUS(data, meta) {
You can grab the select with prototype and the id of the select.
$('stateUSAIdSelect');
Or the options with a css rule
$$('#stateUSAIdSelect option');
What are you actually trying to do with them?
UPDATE:
Sorry, I misunderstood the question I think. You're trying to figure out how to test those elements with htmlunit?
To get the select you can use getHtmlElementById
page.getHtmlElementById("stateUSAIdSelect");
From there you can call getChildNodes to grab all the options from the select.
The javadoc for htmlunit outlines a whole bunch of other methods you should be able to use as well http://htmlunit.sourceforge.net/apidocs/index.html.
Hope that helps.