|
JavaScript - Show List Based On Value Clicked
hi,
the following function shows a list of Counties populates by a PHP page: Code: $.getJSON('http://www.mypubspace.com/dashtest/countyjson.php', function(data){
var myhtml = '<ul>';
for(i=0; i<data.length; i++) {
myhtml += '<li>' + data[i].County + '</li>';
}
myhtml += '</ul>';
$("#countyshow").html(myhtml);
});
I would like to now, when a user clicks on a County, they are shown a list of pubs based on that County (so, I'll create a new PHP page WHERE County = 'County' or something?!) at the moment, when a user clicks on a County this function is passed: Code: function gopublist(event)
{
var stackLayout = document.getElementById('stackLayout').object; // Replace with id of StackLayout
stackLayout.setCurrentView('view4');
}
So, passing a value through so I can modify the SQL in the PHP page to filter the counties?! Please help? Similar TutorialsI want to show the div when a button is clicked. And the div will enter the page by sliding in (from the left of the page). When it got clicked again, the div will dissapear by sliding out from the page. Any suggestions? Thank You. I know that this can be done using .hide/.show... I don't know how to say this but if you'll look at the code: Code: <div id="isclickable"> klasdlkasdklaklsjd <div id="weeeee"> trolololololol </div> </div> <div id="isclickable"> klasdlkasdklaklsjd <div id="weeeee"> trolololololol </div> </div> The div having an id of "weeeee" will show if id="isclickable" is clicked.. but not all divs having "weeeee" should show but instead what is inside the div "isclickable" is there a way to attain this without creating multiple scripts and ids? Thanks> Dear Experts, I am very new for javascript so I am not even sure it is possible or not. The situation is like this, I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button. this is the sample layout: <table> <tr> <td colspan=8> Full size image will be shown in this cell </td> </tr> <tr> <td colspan=8> Caption of the image will be displayed here </td> </tr> <tr> <td>Previous Button</td> <td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td> <td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td> <td>Next Button</td> </td> </tr> My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table. As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails. I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you. Thanks in advance. Charles Probably a simple question but it's got me stumped, this post on codingforums didn't really help me either. I have 5 divs, and I want to have each of them visible seperately on a certain weekday. In pseudo-code: Code: if today=monday, show div "bla1" if today=tuesday, show div "bla2" etc. "bla2" should not be visible if it's monday, etc. I've struggled with trying to bend existing scripts to this purpose but I can't get it working. Please help! Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) {
if (val > 1) {
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
}
Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe Hello all, I need some help! I am trying to finish a script that shows a particular div based on the last 2 chars in the cookie value. I have the cookie part done. I just need a little help with the show hide part. Can anyone help! Thanks in advance! Code: <HTML>
<HEAD>
<TITLE>cookie set, delete, get value and create</TITLE>
<SCRIPT LANUAGE="JavaScript">
/**
* Sets a Cookie with the given name and value.
*
* name Name of the cookie
* value Value of the cookie
* [expires] Expiration date of the cookie (default: end of current session)
* [path] Path where the cookie is valid (default: path of calling document)
* [domain] Domain where the cookie is valid
* (default: domain of calling document)
* [secure] Boolean value indicating if the cookie transmission requires a
* secure transmission
*/
function setCookie(name, value, expires, path, domain, secure) {
document.cookie= name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
/**
* Gets the value of the specified cookie.
*
* name Name of the desired cookie.
*
* Returns a string containing value of specified cookie,
* or null if cookie does not exist.
*/
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
</SCRIPT>
</HEAD>
<BODY>
<input type="button" value="Set Cookie" onclick='setCookie("location", prompt("Enter your location:\n Enter \"Baltimore, MD\" in the text box below."))' />
<br>
<br>
<script>
var state = getCookie("location").slice(-2);
if (state=='MD' || state=='NC'){
alert("location stripped to" + " - " + state);
//Show hide code here...
}
</script>
Refresh page after setting the cookie to "Baltimore, MD"<br>
<br>
<div id="image1">Image1</div>
<div id="image2">Image2</div>
<div id="image3">Image3</div>
</BODY>
</HTML>
I have this script that I got from some site. When you click on a link tied to a div it hides all other divs and displays just that one. Well, that works, but I want it to display one of the divs on page load based on today's date. For example, it will display the "summer" div if today's date is anywhere between June 1 and August 31. When links to other divs are clicked that div will disappear and other ones will appear in its place. Anyway, here's the code, and I don't know anything about javascript so I have no idea where to even start editing it. Please help Code: <script type="text/javascript">
<!-- Layer Show/Hide Script
last=""
function changeDiv(the_div,the_change)
{
var the_style = getStyleObject(the_div);
if (the_style != false)
{
the_style.display = "block"
if(last!="")
{
last.display = "none"
}
}
last=the_style
}
function getStyleObject(objectId)
{
if (document.getElementById && document.getElementById(objectId))
{
return document.getElementById(objectId).style;
}
else if (document.all && document.all(objectId))
{
return document.all(objectId).style;
}
else
{
return false;
}
}
//-->
</script>
can any guys help me to fine the jquery based slide show right to left with next previous and auto facilities on div not on ul li based?
Hi, I have a table displaying records from query, now i want to have a small dropdown listbox on the top right corner called "sort by". The list index would be "date modified", "Price(High-low)" and "Price(Low-High)". I want my order by clause in my SQL to change according to the values in the dropdownlistbox. Code: SELECT * FROM Cars ORDER BY date modified How can i pass my selected value from the listbox to my PHP SQL statement? Thanks Ok so I have a select box where the value must be passed via the form. If the users selects choice B or Choice C then I want a specific div to show. If they choose choice A then I want the div to hide or remain hidden. It should be hidden on page load. Code: <select name="Event_Type_ID">
<option value="1">Choice A</option>
<option value="2">Choice B</option>
<option value="3">Choice C</option>
</select>
<div id="showme">
Content to show if EITHER Choice B or C is chosen. Otherwise this div should be hidden.
</div>
Can anyone lead me in the right direction? Thanks! Hello, I have very little knowledge of javascript, other than modifying existing scripts, and I can't find anything about this particular problem. I need some help on creating a simple script that will display a div ONLY if the user comes from a certain page within the same site. Not sure if that was clear, but let me try with specifics. There is a link to a page called 'Clients' on the 'About Us' page. If a user goes directly to 'Clients', they should have a normal experience. If, however, they come via the 'About Us' page, I want to display a div at the bottom of the page that will take them back to the 'About Us' page. I know how to get a referrer, and I know how to show/hide divs. I just don't know how to combine the two. Can anyone help? Hi ya all, how can I show / hide the content of sub divs based on whether the input is != or = and be able to repeat this. I tried to hide the sub divs using , onclick if bla bla = '' ; Code: document.getElementById('hideme').innerHTML = '';
which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input thx So I am trying to make a form that will eventually take the user to a specified link. It is a form that uses drop down menus. I based this off of someone elses code (with permission ), but it shows everything <= user input. I cannot for the life of me figure out how to make it only show only one of the next options. here is the JS code: Code: <script language="JavaScript">
function ShowMenu(num, menu, max)
{
for(i = 1999; i <= num; i++){
var menu2 = menu + i;
document.getElementById(menu2).style.display = 'block';
}
var num2 = num;
num2++;
while(num2 = max){
var menu3 = menu + num2;
document.getElementById(menu3).style.display = 'none';
num2=num2+1;
}
}
</script>
This is only the JS code. I didn't want to waste space with the rest of the code. If you want to see it let me know and I can include that. I am sure this is rather basic, but my JS knowledge is less than that...It has been some time since undergrad computer science class. Thanks in advance for any help! Hey all, I'm trying to get the two followup questions underneath the checkbox to show up only if someone places a check there, but for some reason the way I've got it set up now it's simply hiding the area I want to show up altogether, and the checkbox has no effect on it. Rather than waste tons of space pasting it here, here's the pastebin: http://pastebin.ca/1822165 alternatively here is the live version: http://soniajacobwedding.com/site/rsvptest.html I'd prefer to have the form collapse when the additional questions are hidden, though if i can get this working at all I'd be pretty happy. Hi. Now I know this is a fairly easy task, but I need to show the random div from a selection of 10 which all have the same class. I am not able to do this using unique IDs as the divs will be created by the end user as a repeating region from Adobe contribute. So I'll have a list looking something like the following but I only want one to show. Any ideas? Code: <div class="mydiv">Line Number One</div> <div class="mydiv">Line Number Two</div> <div class="mydiv">Line Number Three</div> <div class="mydiv">Line Number Four</div> <div class="mydiv">Line Number Five</div> <div class="mydiv">Line Number Six</div> <div class="mydiv">Line Number Seven</div> <div class="mydiv">Line Number Eight</div> <div class="mydiv">Line Number Nine</div> <div class="mydiv">Line Number Ten</div> I have a form that has a pretty complicated combo box - a user starts typing text, it queries a database for matches, and displays the results to the user. The user can then select the match they desire and it has a value id, which I am currently sending to a hidden field in the form. So, for example: user starts typing in a movie name, Seven - it returns Seven and user selects it. The form submits the id of the movie seven (say 12) to a hidden field. Where I am stumped: Once a user selects a movie title, I have another drop down select box that is to display the available formats of the movie by querying my database based on the product id (12) and returning the available formats in the list: DVD BLUERAY VHS I am pretty good at programming, but I cannot figure this out - how to make the select box fire and return results once the value for the textbox has been captured. Can anyone help me? Hi, I have a dynamically generated list of which contain div's with a class of product. I want to only display 6 random products out of the whole list on page load and hide the rest. I am quite new to javascript so some help would be much appreciated. Thanks Hi, I'm trying to find out the min and max values of randomly generated values in a array list. Its a checkout system that randomly add a customer to a queue and does the same to remove a customer depending on a randomly generated number. Ive managed to figure out the mean of the queue but can only display the total values added to the list rather than display when the queue was at it biggest value. If anyone can point me in the right direction it would be greatly appreciated. ___________________________________________________________________ import java.io.BufferedWriter; import java.io.FileWriter; import java.io.IOException; import java.util.ArrayList; import java.util.LinkedList; import java.util.ListIterator; import java.util.Queue; import java.util.Random; public class Checkout { private Queue<String> tillQueue; private int rndNumber; private int currentLen; private ArrayList <Integer>lengthList; private Random r; public Checkout() { tillQueue = new LinkedList<String>(); currentLen = 0; //current queue length lengthList = new ArrayList <Integer>(); r= new Random(); } public void simulation() { System.out.println("Time" + "\t" + "Rnd" + "\t" +"Queue Status"); for (int t=2; t<10; t++) { rndNumber =r.nextInt(6)+1; if (rndNumber==2 || rndNumber==4 || rndNumber==6) { tillQueue.add(String.valueOf(t)); currentLen++; } else if ((rndNumber==1 || rndNumber==3) && !tillQueue.isEmpty()) { tillQueue.remove(); currentLen--; } else if(rndNumber==5) { //do nothing } if(tillQueue.isEmpty()) { System.out.println(t + "\t" + rndNumber + "\t" + "Queue is empty"); } else { System.out.println(t + "\t" + rndNumber + "\t" + tillQueue.toString()); } lengthList.add(new Integer(currentLen)); } } public double CalculateMeanLength() { double mean=0.0; int sumOfLengths = 0; for (int i = 0; i<lengthList.size();i++) { sumOfLengths=sumOfLengths+(Integer)lengthList.get(i).intValue(); } mean = (double)sumOfLengths/lengthList.size(); return mean; } public int ShowMax() { int max = 0; //i know its going to be a for loop of some kind but not sure how to do it// } ----------------------------output via controller================ Time Rnd Queue Status 2 6 [2] 3 5 [2] 4 3 Queue is empty 5 5 Queue is empty 6 1 Queue is empty 7 5 Queue is empty 8 5 Queue is empty 9 4 [9] mean length = 0.375 max length = 3 //the max length here should be 1 =========================================== Thanks in advance for your help hi, I would like to show a list of pubs in a town that the user has selected from the drop down list http://www.mypubspace.com/dashtest/order.html it is all there working but in a different way If you type Brighton into the Town search, it shows a list of pubs in that town, GREAT! If you click the 'show towns list' link, a drop down appears, (this is where my problem is) When you click the town, I would like to get the list of pubs in that town basically get rid of the form where you type in the box and click the button here is my code HTML and Javascript Code: <html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var townRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
townRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
townRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
townRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
townRequest.onreadystatechange = function(){
if(townRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = townRequest.responseText;
}
}
var name = document.getElementById('name').value;
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
townRequest.open("GET", "http://www.mypubspace.com/dashtest/pubs.php" + queryString, true);
townRequest.send(null);
}
function townlistFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxTownlist');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true);
ajaxRequest.send(null);
}
function countylistFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxCountylist');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/county-select.php", true);
ajaxRequest.send(null);
}
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<a href="#" onClick="townlistFunction();">show towns list</a>
<a href="#" onClick="countylistFunction();">show counties list</a>
<div id="ajaxTownlist"></div>
<div id="ajaxCountylist"></div>
<form name='myForm'>
Pub Name: <input type='text' id='name' /> <br />
County: <input type='text' id='county' />
<br />
Town: <input type='text' id='town' />
<input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</form>
<div id='ajaxDiv'></div>
</body>
</html>
here is my pubs.php code Code: <?php
$dbhost = "xxx";
$dbuser = "xxx";
$dbpass = "xxx";
$dbname = "xxx";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$name = $_GET['rsPubName'];
$sex = $_GET['rsTown'];
$wpm = $_GET['rsCounty'];
// Escape User Input to help prevent SQL Injection
$name = mysql_real_escape_string($name);
$town = mysql_real_escape_string($town);
$county = mysql_real_escape_string($county);
//build query
$query = "SELECT * FROM pubs WHERE rsTown = '$town'";
$qry_result = mysql_query($query) or die(mysql_error());
//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Region</th>";
$display_string .= "<th>Pub Name</th>";
$display_string .= "<th>Town</th>";
$display_string .= "<th>County</th>";
$display_string .= "</tr>";
// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)){
$display_string .= "<tr>";
$display_string .= "<td>$row[Region]</td>";
$display_string .= "<td>$row[rsPubName]</td>";
$display_string .= "<td>$row[rsTown]</td>";
$display_string .= "<td>$row[rsCounty]</td>";
$display_string .= "</tr>";
}
$display_string .= "</table>";
echo $display_string;
?>
here is my town_select.php code Code: <?php
$dbhost = "xxx";
$dbuser = "xxx";
$dbpass = "xxx";
$dbname = "xxx";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$town = $_GET['rsTown'];
// Escape User Input to help prevent SQL Injection
$town = mysql_real_escape_string($town);
//build query
$query = "SELECT DISTINCT rsTown, COUNT(PUBID) As PubCount FROM pubs GROUP BY rsTown ORDER BY rsTown ASC";
$qry_result = mysql_query($query) or die(mysql_error());
// Insert a new row in the table for each person returned
$display_string .= "<form name=\"form3\" method=\"post\" action=\"\">";
$display_string .= "<select name=\"menu2\" onChange=\"MM_jumpMenu('parent',this,0)\" class=\"textbox\">";
$display_string .= "<option value=\"\">Search by Town...</option>";
while($row = mysql_fetch_array($qry_result)){
$display_string .= '<option value="rsTown='.$row['rsTown'].'" onclick=\"ajaxFunction()\" id=\"town\">'.$row['rsTown'].' ('.$row['PubCount'].')</option>';
}
$display_string .= "</select>";
$display_string .= "</form>";
echo $display_string;
?>
Hi Chaps, I have a dynamic list menu: PHP Code: <?php $currentCat = ''; $first = true ;?> <ul> <?php do { if ($currentCat != $row_rsCategory['catname']) { if (!$first) { echo "\n</ul>\n</li>\n"; } $currentCat = $row_rsCategory['catname']; ?> <li><?php echo $row_rsCategory['catname']; ?> <ul> <?php }?> <li><?php echo $row_rsCategory['galleryname']; ?></li> <?php $first = false; } while ($row_rsCategory = mysql_fetch_assoc($rsCategory)); ?> </ul> </li> </ul> I've tried looking for a show/hide script, to toggle category names/gallery names, but could only find ones that have static menu options, and have failed to edit existing code to fit....any help or guidence would be appreciated! |
|||||||