|
JavaScript - Displaying Div Before Ajax Javascript
I have to display a div before firing a sync ajax in javascript
div is getting displayed in firefox but not in IE and chrome. I need to basically display a download bar to indicate the user that the request is in progress Similar TutorialsHello all; Sorry if this is in the wrong forum, but I'm using a little bit of everything in this problem. What I have is an ajax function using JQuery that references to a separate PHP file, which also contains mySQL. Here is my code: Code: <!DOCTYPE html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
</head>
<body>
<div onclick="addtask();" style="width:400px; height:200px; background:#000000;"></div>
<script>
function addtask() {
var tid = (Math.floor(Math.random() * 3)) + 1;
var tsk = (Math.floor(Math.random() * 10)) + 1;
if(tsk !== 1) {
$.ajax({
type: "POST",
url: "taskcheck.php",
dataType: "json",
data: {taskid:tid},
success: function(task) {alert(task.name);}
});
}
}
</script>
</body>
</html>
What is happening is when the ajax function is called, the PHP runs fine and the mySQL adds the necessary data to the table, but the success function is not running. Here is the referenced PHP (taskcheck.php): PHP Code: session_start(); $connect = mysql_connect('x', 'x', 'x') or die('Not Connecting'); mysql_select_db('x') or die ('No Database Selected'); $task = $_REQUEST['taskid']; $uid = $_SESSION['user_id']; $q = "SELECT task_id, taskname FROM tasks WHERE task_id=" .$task. " LIMIT 1"; $gettask = mysql_fetch_assoc(mysql_query($q)); $q = "INSERT INTO user_tasks (ut_id, user_id, task_id, taskstatus, taskactive) VALUES (null, " .$uid. ", '{$gettask['task_id']}', 0, 1)"; $puttask = mysql_fetch_assoc(mysql_query($q)); $json = array( "name" => $gettask['taskname'] ); $output = json_encode($json); echo $output; If you have any more questions about the problem please let me know, and any suggestions or comments would be greatly appreciated. Thanks! I'm writing a web app and so far: - the user enters some information on the web page - user data is submitted to a PHP script (using AJAX, so w/o a page refresh) which processes the data and generates a list of items that need to be returned to the user Now, I need to return the data -- preferably in the form of a list, where each returned item has a check box (so the user can choose which items in this list the subsequent operations will affect). However, can a PHP script effectively add/remove contents from such a checklist, or would this be something done better through Javascript only? For example: this, I think, or something similar. Luckily the PHP script that processes the data is short at this point, so I'd like to know whether I should rewrite it in Javascript (assuming Javascript can deal with REST well) to avoid a hassle. Hello, I am using AJAX and got the output from AJAX like the below line Ajax function Code: if (http_request.readyState == 4) {
if (http_request.status == 200) {
var_output = http_request.responseText;
document.getElementById('result').innerHTML = var_output; //value 100 displayed
}
else
{
alert('There was a problem with the request.');
}
}
In my javascript function, i need to get the value 100 from that innerHTML. Is it possible to get this value? Code: // I tried this way, but not working
var txt = document.getElementById('result').innerHTML;
or Store it in hidden field and get the value from javascript. Please suggest any idea to solve this problem Thanks All, I have some code on my page which changes images in a div without reloading the page. This works great, however my problem comes with I go through a couple images and the actual URL is still on the original image. Is there any way to change the URL when I click the image as well?? Thanks in advance. Someone built this application for me. It contained a web page, the user clicked on the detail button to view a detail page, and then clicked on an update button on the detail page to update the database. This type of navigation was unappealing to me. I prefer a free floating form that contains a list, then by clicking on expand, you get to see detail on the specific item, and then click update all within the same free floating form. Is this possible with javascript and ajax? If so, can anyone provide examples? Thanks.
hi friends, I am looking for a solution to display the records of a dynamically selected mysql table using ajax,jsp & js combinations. any sites showing some example thnx in advance. Hi, I am creating a webpage to display menu items in a div tag. The premis of my page is to use 4 div tags. 1st div tag = company logo (top left) 2nd div tag = img of restaurant and address (top right). 3rd div tag = horizontal menu with text or buttons to call up menu items, for example: Lunch: Dinner: Beverages: Driving Directions, etc 4th div to display content pages. For example, if the user clicks the Lunch button, it would call the lunch page and place it into the 4th div tag. I am able to do this with frames in HTML or content pages in ASP.net, but how would I do it using CSS and div tags. The best response I got was with AJAX, but I am not familiar with this language yet. Can I use JavaScript to do this? Any suggestions? Thank you, Paul Hi everyone, I would like to know everyone's thought about how I can achieve seamless browsing on my web application. I developed a website consisting of a collapsible menu, filters that correspond to a form and a search bar. All three components send information to the iframe I implemented inside this website. The question is that how could I enable seamless browsing (without the page refreshing every time a user sends something to the iframe)? Right now each time the collapsible menu is clicked, the iframe will add to its url depending on what is clicked (?id= or ?pid= or ?mid=). Each time a filter criteria or a search term is being submitted, a form will be submitted to the iframe. Each time any of the above happens the iframe will reload itself. It works just fine in my localhost server but once I uploaded the web to the server it will take a second or two to load the information. And I am trying to aviod that. I understand that it has something to do with AJAX but I do not know where to look as I am new to the concept of AJAX. Please let me know your thoughts or if you need more information about the issue. Thank you so much! Jeffrey Reply With Quote 01-28-2015, 10:23 PM #2 Hi, I'm trying to work through a head first book on ajax and javascript. I am also trying to emplement some of the codes in a small application I had built strictly with server side code. What it does is: two input fields for user defined values. Once the user inputs the two values, they are passed to the action page, some simple math is performed on these 2 values, and then 4 different resluts are displayed back on the action page. What I wanted was of course to make this asynchronous and display the results without a page reload. So, when I reworked the book code for my own use, and try to run the application, I get an error saying my url variable is undefined. The value of the first input seems to be passed though. One thing of note to mention is the application was written in coldfusion. The form values are passed using cf. Not sure if that matters. I mean cf works well with js and ajax, but maybe my original procedure doesnt work with my js code as it is now. Here is the javascript/ajax code: PHP Code: <script type="text/javascript" language="javascript"> var request = null; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxm12.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = null; } } if(request == null) alert("Error creating request object!"); } function getLampVolts() { var lamp = document.getElementById("lampVoltage").value; var url = "calculatorAction.cfm?lamp = " + escape(lampVolts); request.open("GET", url, true); request.onreadystatechange = updatePage; request.send(null); } function updatePage() { if(request.readyState == 4) { if(request.status == 200) { var lumens = request.responseText; document.getElementById("lumens").value = lumens; } else alert("Error! Request Status is " + request.status); } } </script> Here is the form: Code: <form action="calculatorAction.cfm">
<table>
<tr>
<th>Lamp Voltage</th>
<td><input name="lampVoltage" id="lampVoltage" type="text" /></td>
</tr>
<tr>
<th>Socket Voltage</th>
<td><input name="socketVoltage" id="socketVoltage" type="text" /></td>
</tr>
<tr>
<td><input type="button" value="Submit" onClick="getLampVolts();" /></td>
<td><input type="reset" value="Reset" /></td>
</tr>
</table>
and here is my action page calculatorAction.cfm: Code: <cfparam name="bulbCalculator.cfm" type="any" default="0">
<!--- Set User Defined Values of Form --->
<cfset lampVolts = FORM.lampVoltage>
<cfset actualVolts = FORM.socketVoltage>
<!--- Set Constants For Calculations --->
<cfset lumens = 27500>
<cfset life = 500>
<cfset watts = 65>
<cfset colorTemp = 3500>
<!--- Perform Calculations --->
<cfset actualLumens = ((actualVolts/lampVolts)^3.4)*lumens>
<cfset lumenPercent = actualLumens/lumens*100>
<cfset hours = ((lampVolts/actualVolts)^13)*life>
<cfset hourPercent = hours/life*100>
<cfset actualWatts = ((actualVolts/lampVolts)^1.3)*watts>
<cfset wattPercent = actualWatts/watts*100>
<cfset temperature = ((actualVolts/lampVolts)^.42)*colorTemp>
<cfset tempReduction = temperature-colorTemp>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<cfsavecontent variable="calculations">
<table>
<cfoutput>
<tr>
<td>Lamp Rated Voltage:</td>
<td>#lampVolts#</td>
</tr>
<tr>
<td>Socket Application Voltage:</td>
<td>#actualVolts#</td>
</tr>
<tr>
<td id="lumens">Percent of Lumens Used:</td>
<td>#round(lumenPercent)#%</td>
</tr>
<tr>
<td>New Rated life in Percentages:</td>
<td>#round(hourPercent)#%</td>
</tr>
<tr>
<td>Percent of Watts Used:</td>
<td>#round(wattPercent)#%</td>
</tr>
<tr>
<td>Change in Temperatu </td>
<td>#round(tempReduction)#°</td>
</tr>
</cfoutput>
</table></cfsavecontent>
</body>
</html>
Again, the url variable says it is undefined. But the variable "lamp" contains the form field value. Thanks for any help and tips in advance! i have a drop down which triggers a ajax call. The ajax response is a form with various fields depending upon the drop down option selected. I have a text field in that response form which is to input the date. i have a calender widget and wish to display that as a popup with an onfocus or onclick on that text field. But becoz of the ajax response it does not let me do it. I know the problem is in the creation and destruction of the element where the calender has to be displayed so i tried putting the callender intiialization function in another function and calling that onclick but id doesnt work. below is my modified javascript code for the initialization of the calendar. Code: <script type="text/javascript">
var calendar1, calendar2, calendar3; /*must be declared in global scope*/
/*put the calendar initializations in the window's onload() method*/
function cal_init()
{ alert("hi");
calendar1 = new Epoch('cal1','popup',document.getElementById('calendar1_container'),false);
calendar2 = new Epoch('cal1','popup',document.getElementById('calendar2_container'),false);
calendar3 = new Epoch('cal1','popup',document.getElementById('calendar3_container'),false);
};
</script>
I have something that's called with AJAX when the user enters some text (http://askvoke.com). What I want is to execute some javascript within this "frame". If the frame calls something, with say
Code: <script type=\"text/javascript\">
document.write('h');
</script>
in it, then "h" doesn't appear, and neither does anything besides what would normally be shown if I didn't add that. Anyone have a solution? Could somebody help me please to explain what I'm doing wrong.... a have this html file with references to some javascripts (datagrid from http://www.datatables.net) and this html file work ok..I mean javascripts a css styling works with table... but when I call this page by ajax and callback (this html page) is forward back into another div , table doesn't work ....just data from page but now functionality from javascript and css styling... how should I force callback result to use javascript and css? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<style type="text/css" media="screen">
@import "media/css/demo_page.css";
@import "media/css/demo_table.css";
@import "http://www.datatables.net/media/css/site_jui.ccss";
@import "media/css/demo_table_jui.css";
@import "media/css/themes/base/jquery-ui.css";
@import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
/*
* Override styles needed due to the mix of three different CSS sources! For proper examples
* please see the themes example in the 'Examples' section of this site
*/
.dataTables_info { padding-top: 0; }
.dataTables_paginate { padding-top: 0; }
.css_right { float: right; }
#example_wrapper .fg-toolbar { font-size: 0.8em }
#theme_links span { float: left; padding: 2px 10px; }
</style>
<script type="text/javascript" src="media/js/complete.js"></script>
<script src="media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript" src="media/js/jquery.dataTables.editable.js"></script>
<script src="media/js/jquery.jeditable.js" type="text/javascript"></script>
<script src="media/js/jquery-ui.js" type="text/javascript"></script>
<script src="media/js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable().makeEditable({
sUpdateURL: "update.php",
sDeleteURL: "delete.php"
});
} );
</script>
</head>
<body id="index" class="grid_2_3">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>
ID</th>
<th>
user</th>
<th>
password</th>
<th>
first</th>
<th>
last</th>
<th>
company</th>
</tr>
</thead>
<tbody>
<tr class="even_gradeA" id="1">
<td>
1
</td>
<td>
XY
</td>
<td>
passwoed
</td>
<td>
Ja
</td>
<td>
jajovic
</td>
<td>
2
</td>
</tr>
<tr class="even_gradeA" id="2">
<td>
2
</td>
<td>
jojo
</td>
<td>
fa25af5301e2dda1fddea740200aa10ab6c70d86
</td>
<td>
jojo
</td>
<td>
jojovicko
</td>
<td>
2
</td>
</tr>
<tr class="even_gradeA" id="3">
<td>
3
</td>
<td>
kuk
</td>
<td>
d588aebb93e3adf70eac1fb479d6d53f9dc21816
</td>
<td>
kuk
</td>
<td>
kukovic
</td>
<td>
3
</td>
</tr>
<tr class="even_gradeA" id="10">
<td>
10
</td>
<td>
admin
</td>
<td>
f865b53623b121fd34ee5426c792e5c33af8c227
</td>
<td>
admin
</td>
<td>
adminovic
</td>
<td>
3
</td>
</tr>
</tbody>
</table><button id="btnDeleteRow">Delete</button>
</body>
</html>
never mind
I have a website that is using ajax to keep the page up to date with the database information. I call this page through a file called start.php. Once index.php is loaded it has a menu with selections. I then want it to call a page called query.php in an iframe to update the information, but not open a new window. In the iframe the query.php will run and then redirect itself to blank.php. The code is as follows and any help would be much appreciated. I have tried several methods of doing this and they have been commented out because they didn't work or didn't do what I wanted them to do. I do not want to use window.open since IE doesn't work well with it. window.open does work by pop up windows but I want to stay away from them. The main code I am looking to get help on is in red under start.php. In start.php I will include the entire file. In index.php I'm only going to include the main sections I use for this snippit. In query.php I'm not going to include query.php since I beleive this file isn't important for this snippit. start.php Code:
<html>
<head>
<title>Countries At War!</title>
<body style="background-color:#B0C4DE;">
<script language="JavaScript" type="text/javascript">
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Not IE
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); //IE
} else {
//Display your error message here.
//and inform the user they might want to upgrade
//their browser.
alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade to Firefox.");
}
}
//Get our browser specific XmlHttpRequest object.
var receiveReq = getXmlHttpRequestObject();
//Initiate the asyncronous request
function sayHello() {
//If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call.
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
//Setup the connection as a GET call to SayHello.html.
//True explicity sets the request to asyncronous (default).
receiveReq.open("GET", 'index.php', true);
//Set the function that will be called when the XmlHttpRequest objects state changes.
receiveReq.onreadystatechange = handleSayHello;
//Make the actual request.
receiveReq.send(null);
}
}
//Called every time our XmlHttpRequest objects state changes.
function handleSayHello() {
//Check to see if the XmlHttpRequests state is finished.
if (receiveReq.readyState == 4) {
//Set the contents of our span element to the result of the asyncronous call.
document.getElementById('span_result').innerHTML = receiveReq.responseText;
}
}
function openMenu(query) {
var myString = 'query.php?' + query;
// window.open(myString, 'linkname', 'title=no, height=465, width=400, left=550, top=150, location=yes, resizable=no, menubar=no, scrollbars=no')
//document.getElementById('engine').src = myString;
//document.getElementById('engine').setAttribute('src',myString;);
//top.frames['engine'].location.href = myString;
pausecomp(1000);
sayHello();
}
function pausecomp(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}
</script>
</head>
<body>
<a href="javascript:sayHello();">Say Hello</a><br />
<iframe src="blank.php" MarginWidth="0" transparent="yes" width="30" height="25"
frameborder="0" scrolling="no" name="engine">
UPGRADE YOUR BROWSER</iframe>
<span id="span_result"></span>
<body onLoad="sayHello();">
</body>
</html>
index.php Code: <table width="100%" border="2" bordercolor="Black">
<tr><center>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=1');">Home</a></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=2');">Jobs</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=3');">Travel</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=4');">Fight</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=5');">Inventory</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=6');">Properties</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=7');">Rewards<?php if($db_field['rewardpoints'] >= "1") print "(". $db_field['rewardpoints'] . ")";?></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=8');">Profile<?php if($db_field['profilepoints'] >= "1") print "(". $db_field['profilepoints'] . ")";?></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=9');">Alliances</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=10');">Options</td>
</tr></center>
</table>
Thanks in advance for all the help. I have these buttons that I need to have switch accounts on and off. They work, but for some reason the words on the buttons are not changing from Activate to Deactivate... It seems as though the button is not updating itself after success of the function. First post on here so I apologize if I am doing this wrong. Problem code in jsbin--> http://jsbin.com/okifa3/ Code: $(function() {
var activateOwner = function(u) {
var dataString = 'oid=' + u + "&a=1";
$.ajax({
type: "GET",
url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php",
data: dataString,
success: function() {
$('#spanowneractivation' + u).css('display', 'none');
$('#message1' + u).html("Activated!").hide().fadeIn(1500, function() {
$('#message1' + u);
});
$('#spanownernamelink' + u).css('display', 'inline');
$('#' + u).val('Deactivate');
$('#spanownernametext' + u).css('display', 'none');
$('#' + u).removeClass('btnActivate');
$('#' + u).addClass('btnDectivate');
setTimeout(function() {
$('#message1' + u).css('display', 'none');
$('#spanowneractivation' + u).hide().fadeIn(1500);
},
2000
);
}
});
return false;
};
var deactivateOwner = function(u) {
var dataString = 'oid=' + u + "&a=0";
$.ajax({
type: "GET",
url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php",
data: dataString,
success: function() {
$('#spanowneractivation' + u).css('display', 'none');
$('#message1' + u).html("Deactivated!").hide().fadeIn(1500, function() {
$('#message1' + u);
});
$('#spanownernamelink' + u).css('display', 'none');
$('#spanownernametext' + u).css('display', 'inline');
$('#' + u).val = 'Activate';
$('#' + u).removeClass('btnDeactivate');
$('#' + u).addClass('btnActivate');
setTimeout(function() {
$('#message1' + u).css('display', 'none');
$('#spanowneractivation' + u).hide().fadeIn(1500);
},
2000
);
}
});
return false;
};
$(".toggleOwnerButton").click(function() {
if($(this).val() == 'Activate') {
activateOwner($(this).attr("id"));
} else {
deactivateOwner($(this).attr("id"));
}
});
});
Hello I am using PlainAjax. http://coolpenguin.net/plainajax/?p=examplespostdata Here is my code and it is not working if i called from Javascript function. Code: <script type="JavaScript" src="plainajax.js"></script>
<script language="JavaScript" >
function openWin()
{
.......
.......
.......
var selval = selectedValue.toString(); // Dynamic value variable
document.formlist.myval.value = selval; // stored to hidden variable
var cn = document.getElementById( "itsme" ).childNodes; // Get all the nodes
var myresult = new Array(); // declare result array
plainajax.request('respurl: req_php.php; resultloc: myresult; paramloc: cn;');
Window.open("req_php.php");
}
</script>
<html>
<div id="itsme">
<input type="hidden" name="myval" id="myval" value="">
</div>
</html>
req_php.php ========= Code: <?php echo "value from html = ".$_REQUEST['myval']."<br>"; ?> But i am not able to get any value in my php program. What i did wrong in this? or is anyother way to pass the variable from Javascript (except pass thru url query string, this is not secure) Thanks Hi, I'm new to these forums so if anything is out of the ordinary let me know for next time or so I can correct it - please. I am also not very good with javascript but I am trying to learn the whole concept. Anyways, I am supposed to create pull down menus when I open this page: Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Tutorial Case
The 221B Blog
Author:
Date:
Filename: holmes.htm
Supporting files: menus.js, logo.jpg, sh.jpg, shblog.css
-->
<title>The 221B Blog</title>
<link href="shblog.css" rel="stylesheet" type="text/css" />
<script type="text/javascirpt" src="menus.js"></script>
</head>
<body>
<div id="page">
<form id="searchForm" action="">
<div id="logo">
<img src="logo.jpg" alt="The 221B Blog" />
<input id="searchTxt" type="text" size="20" />
<label for="searchTxt">Search</label>
</div>
<div id="menu1" class="menu">
<a href="#">The Adventures of Sherlock Holmes</a>
</div>
<div id="menu1List" class="menuList">
<ul>
<li><a href="#">A Scandal in Bohemia</a></li>
<li><a href="#">The Red-headed League</a></li>
<li><a href="#">A Case of Identity</a></li>
<li><a href="#">The Boscombe Valley Mystery</a></li>
<li><a href="#">The Five Orange Pips</a></li>
<li><a href="#">The Man with the Twisted Lip</a></li>
<li><a href="#">The Blue Carbuncle</a></li>
<li><a href="#">The Speckled Band</a></li>
<li><a href="#">The Engineer's Thumb</a></li>
<li><a href="#">The Noble Bachelor</a></li>
<li><a href="#">The Beryl Coronet</a></li>
<li><a href="#">The Copper Beeches</a></li>
</ul>
</div>
<div id="menu2" class="menu">
<a href="#">The Memoirs of Sherlock Holmes</a>
</div>
<div id="menu2List" class="menuList">
<ul>
<li><a href="#">Silver Blaze</a></li>
<li><a href="#">The Yellow Face</a></li>
<li><a href="#">The Stock-broker's Clerk</a></li>
<li><a href="#">The "Gloria Scott"</a></li>
<li><a href="#">The Musgrave Ritual</a></li>
<li><a href="#">The Reigate Puzzle</a></li>
<li><a href="#">The Crooked Man</a></li>
<li><a href="#">The Resident Patient</a></li>
<li><a href="#">The Greek Interpreter</a></li>
<li><a href="#">The Naval Treaty</a></li>
<li><a href="#">The Final Problem</a></li>
</ul>
</div>
<div id="menu3" class="menu">
<a href="#">The Return of Sherlock Holmes</a>
</div>
<div id="menu3List" class="menuList">
<ul>
<li><a href="#">The Empty House</a></li>
<li><a href="#">The Norwood Builder</a></li>
<li><a href="#">The Dancing Men</a></li>
<li><a href="#">The Solitary Cyclist</a></li>
<li><a href="#">The Priory School</a></li>
<li><a href="#">Black Peter</a></li>
<li><a href="#">Charles Augustus Milverton</a></li>
<li><a href="#">The Six Napoleons</a></li>
<li><a href="#">The Three Students</a></li>
<li><a href="#">The Golden Pince-Nez</a></li>
<li><a href="#">The Missing Three-Quarter</a></li>
<li><a href="#">The Abbey Grange</a></li>
<li><a href="#">The Second Stain</a></li>
</ul>
</div>
<div id="menu4" class="menu">
<a href="#">The Case Book of Sherlock Holmes</a>
</div>
<div id="menu4List" class="menuList">
<ul>
<li><a href="#">The Illustrious Client</a></li>
<li><a href="#">The Blanched Soldier</a></li>
<li><a href="#">The Mazarin Stone</a></li>
<li><a href="#">The Three Gables</a></li>
<li><a href="#">The Sussex Vampire</a></li>
<li><a href="#">The Three Garridebs</a></li>
<li><a href="#">Thor Bridge</a></li>
<li><a href="#">The Creeping Man</a></li>
<li><a href="#">The Lion's Mane</a></li>
<li><a href="#">The Veiled Lodger</a></li>
<li><a href="#">Shoscombe Old Place</a></li>
<li><a href="#">The Retired Colourman</a></li>
</ul>
</div>
<div id="menu5" class="menu">
<a href="#">His Last Bow</a>
</div>
<div id="menu5List" class="menuList">
<ul>
<li><a href="#">Wisteria Lodge</a></li>
<li><a href="#">The Cardboard Box</a></li>
<li><a href="#">The Red Circle</a></li>
<li><a href="#">The Bruce-Partington Plans</a></li>
<li><a href="#">The Dying Detective</a></li>
<li><a href="#">The Disappearance of Lady Frances Carfax</a></li>
<li><a href="#">The Devil's Foot</a></li>
<li><a href="#">His Last Bow</a></li>
</ul>
</div>
<div id="menu6" class="menu">
<a href="#">The Novels</a>
</div>
<div id="menu6List" class="menuList">
<ul>
<li><a href="#">A Study in Scarlet</a></li>
<li><a href="#">The Sign of the Four</a></li>
<li><a href="#">The Hound of the Baskervilles</a></li>
<li><a href="#">The Valley of Fear</a></li>
</ul>
</div>
<ul id="linkList">
<li><a href="#">Home</a></li>
<li class="newGroup"><a href="#">Essays</a></li>
<li><a href="#">Fan Fiction</a></li>
<li><a href="#">Art</a></li>
<li class="newGroup"><a href="#">Discussion Forum</a></li>
<li class="newGroup"><a href="#">Holmes on the Web</a></li>
<li><a href="#">The 221B Museum</a></li>
<li><a href="#">Jeremy Brett Page</a></li>
<li><a href="#">Basil Rathbone Page</a></li>
<li><a href="#">The Baker Street Irregulars</a></li>
<li class="newGroup"><a href="#">Holmes Radio Podcast</a></li>
<li><a href="#">Holmes Audiobooks</a></li>
<li class="newGroup"><a href="#">About Arthur Conan Doyle</a></li>
<li><a href="#">Victorian England</a></li>
<li><a href="#">Strand Magazine</a></li>
<li><a href="#">The Holmes Atlas</a></li>
<li class="newGroup"><a href="#">Other Fictional Detectives</a></li>
<li class="newGroup"><a href="#">About the WebMaster</a></li>
<li><a href="#">Issues Archive</a></li>
</ul>
<div id="main">
<img src="sh.jpg" alt="" style="float: right; margin: 0px 0px 5px 5px" />
<p id="firstp">
The most famous of fictional detectives, Sherlock Holmes
first appeared in print in 1887, in stories written by the Scottish author
and physician, Sir Arthur Conan Doyle. Holmes is famous for his use
of deductive reasoning to solve difficult and complex cases. Almost
all Holmes stories are told in the first-person narration of
Dr. John Watson, Holmes' closest friend and confidant.</p>
<p>Doyle wrote four novels and 56 short stories in the Sherlock Holmes
canon. The first Holmes tale was the novel, <i>A Study in Scarlet</i>,
which chronicled the meeting of Holmes and Watson and covered their
first case together. As Doyle wrote additional tales, the Sherlock Holmes
stories grew in popularity, becoming a regular feature of <i>The
Strand Magazine</i>. Desiring to explore other literary pursuits, Doyle
grew tired of the detective and killed off Holmes in the short story
<i>The Final Problem</i>. However, public acclaim and a desire for more
Holmes stories eventually persuaded Doyle to resurrect the popular
detective, bringing him back in <i>The Adventure of the Empty House</i>.</p>
<p>Doyle's final Holmes story, <i>His Last Bow</i>, appeared in 1914, but
that did not end the public's fascination with Holmes and Watson. Basil
Rathbone brought the character to the silver screen in 14 movies
loosely based on Doyle's original stories. In more recent years,
Jeremy Brett played Holmes to great critical acclaim over four seasons of
the BBC series, <i>The Adventures of Sherlock Holmes</i>. In all, Holmes
has been played by over 70 actors appearing in over 200 films.</p>
<p>To enjoy online versions of the Sherlock Holmes short stories and novels,
select entries from the menu at the top of this page.</p>
</div>
</form>
</div>
</body>
</html>
Here is my javascript file: Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Tutorial Case
Author:
Date:
Filename: menus.js
-------------------------------------------------------------
Function List:
init()
Initializes the contents of the holmes.htm Web page, setting
the display property of the pull-down menus and the initial
values of the global variables
moveMenu()
Moves the active menu from one pull-down menu to another
changeMenu()
Change the active menu displayed in the document
closeOldMenu()
Closes the active menu
rollDown()
Applies a roll-down effect the opening of the active menu
-------------------------------------------------------------
Global Variable List:
activeMenu
An object variable pointing to the currently active and open menu
timeID
A variable containing the id of a timed command using the setInterval method
clipHgt
The current height of the active menu as it is being rolled down
-------------------------------------------------------------
*/
window.onload = init;
var activeMenu = null;
var clipHgt = 0;
var timeID;
function init() {
var menus = new Array();
var allElems = document.getElementsByTagName("*");
for (var i = 0; i < allElems.length; i++) {
if (allElems[i].className == "menu") menus.push(allElems[i]);
}
for (var i = 0; i < menus.length; i++) {
menus[i].onclick = changeMenu;
menus[i].onmouseover = moveMenu;
}
document.getElementById("logo").onclick = closeOldMenu;
document.getElementById("linkList").onclick = closeOldMenu;
document.getElementById("main").onclick = closeOldMenu;
}
function moveMenu() {
// this function moves the pull-down menu from one title to another
if (activeMenu) {
closeOldMenu();
menuID = this.id + "List";
activeMenu = document.getElementById(menuID);
activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
activeMenu.style.display = "block";
timeID = setInterval("rollDown()", 1);
}
}
function changeMenu() {
// this function changes the pull-down menu displayed in the document
closeOldMenu();
menuID = this.id + "List";
activeMenu = document.getElementById(menuID);
activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
activeMenu.style.display = "block";
timeID = setInterval("rollDown()", 1);
}
function closeOldMenu() {
if (activeMenu) {
clearInterval(timeID);
activeMenu.style.display = "none";
activeMenu = null;
}
}
function rollDown() {
clipHgt = clipHgt + 10;
if (clipHgt < 400) {
activeMenu.style.clip = "rect(0px, 150px," + clipHgt + "px, 0px)";
} else {
clearInterval(timeID);
clipHgt = 0;
}
}
The book's tutorial instructed me to copy down every thing I did yet it doesn't work at all! I've tried on Safari, IE, and Firefox. Can someone tell me what I'm doing wrong? EDIT: Here is the CSS file. Code:
/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Tutorial Case
Author:
Date:
Filename: shblog.css
This file contains styles used in the holmes.htm file.
*/
* {padding: 0px; margin: 0px; line-height: 1.2}
body {background-color: white;
font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
font-size: 12px}
#page {position: absolute; top: 0px; left: 10px; width: 850px}
a {text-decoration: none; color: black}
p {margin: 15px 0px}
ul {list-style-type: none}
#logo {position: absolute: top: 0px; left: 0px;
width: 100%; height: 108px; background-color: white; z-index: 3}
#logo img {float: left}
#logo label {float: right; margin-top: 15px; margin-right: 10px}
#logo input {float: right; margin-top: 15px; background-color: ivory}
.menu {position:absolute; top: 110px; width: 140px; height: 35px; z-index: 3;
border: 1px solid black; color: black; background-color: rgb(212, 212, 212);
text-align: center}
.menu a {display: block; width: 140px; height: 35px; color: black}
.menu a:hover {background-color: rgb(151, 151, 151); color: white}
#menu1, #menu1List {left: 0px}
#menu2, #menu2List {left: 141px}
#menu3, #menu3List {left: 282px}
#menu4, #menu4List {left: 423px}
#menu5, #menu5List {left: 564px}
#menu6, #menu6List {left: 705px}
.menuList {position: absolute; top: 146px; width: 140px; z-index: 2;
background-color: ivory; border: 1px solid black; display: none}
.menuList li {margin: 5px}
.menuList a {display: block; width: 132px}
.menuList a:hover {background-color: rgb(151, 151, 151); color: white}
#linkList {position: absolute; top: 160px; left: 5px; width: 175px;
border-right: 1px solid black}
#linkList li {line-height: 1.5}
#linkList .newGroup {margin-top: 15px}
#linkList a:hover {text-decoration: underline overline;
color: red; background-color: ivory}
#main {position: absolute; top: 160px; left: 190px; z-index: 1}
#firstp {margin-top: 0px}
#firstp:first-line {font-variant: small-caps; font-weight: bold}
#firstp:first-letter {float: left; font-size: 400%; font-family: 'Times New Roman', serif;
line-height: 0.8; margin: 0px 5px 0px 0px}
I'm using jquery right now but I sort of understand what the problem is. I'm making a file manager and when you click on an li tag it will do some action depending on if it's a file type or a folder type. There are 3 important files you should know about. 1. filemanager.php (Where the file managing takes place. Starts by including filemanager_getfile.php and including filemanager.js in the head). 2. filemanager_getfile.php (Information that receives information from the ajax request [the directory to be read] and prints the new file list in <li> tags) 3. filemanager.js (Jquery that processes li clicks) The problem is, when you click on a folder (and it loads the new information from the ajax request) the jquery doesn't check the new li tags when clicked (I'm guessing when you first link the javascript file it has to compile all of the current li information?). Try it for yourself- [removed] Instruction (if it's not already obvious): -Clicking a file selects if. If files are selected and you click the arrow in the file options it will transfer it (not really, but it will later). -Clicking a folder will send an ajax request with the new directory information to be checked and return the html -Clicking the '?' in the file options will display the pages html (I implemented it to debug). I have tried linking the js page every time I include the new directory information, but the js stacks on each other. So if I click on 3 folders and hit the '?' button it will display the page html 3 times. And if I select the index.php li and click transfer, it will "transfer" 3 times. filemanager.php Code: <div id="goldenSub">
<div class="title">Golden Subdomain</div>
<div class="files" id="goldenSubFiles">
<?
include("filemanager_getfiles.php");
?>
</div>
<div id="history" visited="goldensub/"></div>;
<div class="fileOptions"><img src="images/question.png" title='HTML Information' id="ask"><img src="images/transferto.png" title='Copy File To' id="transferTo"></div>
</div>
filemanager_getfiles.php PHP Code: <? $path = $_REQUEST["dir"]; if($path == "" || $path == null) { $path = 'goldensub/'; } echo "\n<div class='path'>$path</div>\n<ul>\n"; $handler = opendir($path); //We need to organize the results. Be default, all files and folders will be //located by alphabetical order. But we want to list all folders first, followed //by files. By adding the results to arrays first we can decide to print our //results in the order we want. $folderArray = array(); $fileArray = array(); $folderCount = 0; $fileCount = 0; while(false !==($file=readdir($handler))) { if($file != "" && $file != null && $file != "." && $file != "..") { $extensionLocation = strrpos($file, "."); //Is this a folder or a file? if($extensionLocation == null && $extensionLocation == "") { //This is a folder unless it's the error_log file. if($file != "error_log") { //Nope, it's definitly a folder. Add it to the folder array. $folderCount++; $folderArray[$folderCount] = $file; } } else { //This is a file. Add it to the file array. $fileCount++; $fileArray[$fileCount] = $file; } } } if($path != 'goldensub/') { echo "\t<li title='goldensub/' type='folder'>\n\t\t<img src='images/up.png'> goldensub\n\t</li>\n"; } for($i = 1; $i<=$folderCount; $i++) { $newPath = $path.$folderArray[$i].'/'; echo "\t<li title='$newPath' type='folder'>\n\t\t<img src='images/folderOpen.png'> $folderArray[$i]\n\t</li>\n"; } for($i = 1; $i<=$fileCount; $i++) { $extensionLocation = strrpos($fileArray[$i], "."); $nameLength = strlen($fileArray[$i]); $extensionLength = $nameLength-$extensionLocation; $nameClean = substr($fileArray[$i], 0, $extensionLocation); $extension = substr($fileArray[$i], $extensionLocation+1, $nameLength); echo "\t<li title='$fileArray[$i]' type='file' extension='$extension'>\n\t\t\n\t<img src='images/$extension.png'> $nameClean\n\t</li>\n"; } echo "</ul>"; ?> filemanager.js Code: $("li").click(function(){
var type = $(this).attr("type");
//This is a folder
if(type == "folder")
{
//Path to new directory
var newPath = $(this).attr("title");
//Ajax request to filemanager_getfiles.php
$("#goldenSubFiles").load("filemanager_getfiles.php", { dir: newPath }, function(data){
//Update log
newLog("Directory changed to <i><b>"+newPath+"</b></i>");
});
}
//This is a file
else
{
if($(this).hasClass("selected"))
{
//It's already selected - deselect it.
$(this).removeClass("selected");
}
else
{
//Select it
$(this).addClass("selected");
}
}
});
It works in Google Chrome but not Firefox and Internet Explorer. My computer has blocked Opera and I don't know how to change that. Too much energy to investigate now, I'll do so later. Are there any pros that can tell me why this is happening? I'm assuming GoogleChrome is fixing a syntax error that FF and IE don't. Code: var request;
request=false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
function isAlNum(str){
return /^[a-z0-9]+$/i.test(str);
}
var preUsername;
var same;
function updatePage() {
if (username.value.length>0){
if ( request.responseText.indexOf("0") == -1 )
{userNameErrorBox.innerHTML=username.value + " has already been taken";
usernameSuccessBox.innerHTML="";}
else
{userNameErrorBox.innerHTML="";
usernameSuccessBox.innerHTML=username.value + " is available";}}
}
function nameTest()
{
if (username.value==preUsername)
{same=1;}
else
{same=0;}
if (!isAlNum(username.value))
{if (username.value.length>0)
{username.value=preUsername;}}
else
{preUsername=username.value;}
if (username.value.length>0 && username.focus && same===0)
{
userNameErrorBox.innerHTML="";usernameSuccessBox.innerHTML="";
request.abort();
var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
if (username.value.length===0)
{ userNameErrorBox.innerHTML="";usernameSuccessBox.innerHTML="";preUsername=""; }
}
I back tracked what i did and it appears that this code Code: var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
has the problem. When I set up alerts to see what works and what doesn't, this code seems to be causing the FF and IE to not work, but I can't tell what it is that's causing them to fail. This is javascript that is suppose to check if a name has been taken by another user. I'm working on a fairly large project that I wish to be the new formspring, (size wise) I procrastinated for 2 weeks of my 12 week break and now that I'm just getting started on it I'm running into an ishness load of problems... Very de-motivating Hi guys, I already posted this but it hasn't been approved by a mod or the mods are all at lunch or something lol. I want to display an image using javascript instead of HTML (or use javascript to change the HTML code dynamically when an update is made). I have created an XML file, which contains text data which is displayed in HTML by using Javascript. What I am having trouble with is getting Javascript to grab the image URL from the XML file, and then display that image in the correct div. How does one show an image by using javascript? and how do you get javascript to get the url from the XML? The following is my Javascript code which grabs the text from the XML and displays it in the HTML; Code: <script type="text/javascript">
var xmlDoc;
<!--
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","SDS.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
var x=xmlDoc.getElementsByTagName("NEWS");
i=0;
function display()
{
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
document.getElementById("show").innerHTML=txt;
}
//-->
</script>
And this is the XML file; Code: <?xml version="1.0" encoding="ISO-8859-1"?> <BULLETIN> <NEWS> <PIC>"newssmall.jpg"</PIC> <DATE>14/3/2010</DATE> <TITLE>News Story 1</TITLE> <STITLE>This is a short sentence to describe the story in brief</STITLE> <STORY>This is the text of the news story</STORY> </NEWS> </BULLETIN> So what I want to do is create a function that grabs the url (relative) from the PIC tag in the XML ("newssmall.jpg") and then uses this URL to display the image on the HTML page. This way, only the XML needs updating when updating the news section of the site. Thanks for helping if you can, Dan |
|||||||