JavaScript - Loading An Xml File From A Form

Hi,

I have some code that performs differently in Opera than it does in any other browser. So I have a stylesheet specifically for opera. Is there a way to do something like this, where I check the browser, and if it's not opera, then load the default sheet, otherwise load the opera-specific css?

Code:

<script>
 // Browser Detection Javascript
// copyright 1 February 2003, by Stephen Chapman, Felgall Pty Ltd

// You have permission to copy and use this javascript provided that
// the content of the script is not changed in any way.

function whichBrowser() {
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("opera") != -1) return 'Opera';
if (agt.indexOf("staroffice") != -1) return 'Star Office';
if (agt.indexOf("webtv") != -1) return 'WebTV';
if (agt.indexOf("beonex") != -1) return 'Beonex';
if (agt.indexOf("chimera") != -1) return 'Chimera';
if (agt.indexOf("netpositive") != -1) return 'NetPositive';
if (agt.indexOf("phoenix") != -1) return 'Phoenix';
if (agt.indexOf("firefox") != -1) return 'Firefox';
if (agt.indexOf("safari") != -1) return 'Safari';
if (agt.indexOf("skipstone") != -1) return 'SkipStone';
if (agt.indexOf("msie") != -1) return 'Internet Explorer';
if (agt.indexOf("netscape") != -1) return 'Netscape';
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
if (agt.indexOf('\/') != -1) {
if (agt.substr(0,agt.indexOf('\/')) != 'mozilla') {
return navigator.userAgent.substr(0,agt.indexOf('\/'));}
else return 'Netscape';} else if (agt.indexOf(' ') != -1)
return navigator.userAgent.substr(0,agt.indexOf(' '));
else return navigator.userAgent;
}
 
if(whichBrowser() != 'Opera')
{
	<link type="text/css" href="jquery-ui-1.8.13.custom/css/custom-theme/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
}
else
{
	<link type="text/css" href="jquery-ui-1.8.13.custom/css/custom-theme/jquery-ui-1.8.13.custom.OPERA.css" rel="stylesheet" />
}
</script>

As of this writing, that code seems to break my page, as if it doesn't like loading a sheet based on an if/else clause.

Hi,

I'm currently working on my portfolio website and would like to have information about my movie clips be retrieved from an XML document when a thumbnail is clicked. I am building my website in HTML and would like to retrieve the Xml using JavaScript. Any help would be appreciated.

My XML is valid and structured as such:


<?xml version="1.0" encoding="UTF-8"?>
<work>

<motion>

<reel>
<title id="Demo Reel 2009" project="Self Promotion" client="Self">
<![CDATA[This demo reel is primaraly a collection ......]]>
</title>
</reel>
.
.
.
.


These are my initial variable definitions and readXML function in javascript:


<script language="javascript">

var xmldom, workNode, motionNode, printNode, fineartNode, displayNode, titleNode;


function readXMLDocument()
{

xmldom=createDocument();
xmldom.async=false;


if (xmldom.parseError != 0) {
alert("An error occurred: \nError Code " + xmldom.parseError.errorCode + "\n" + "Line: " + xmldom.parseError.line + "\n" + "Line Pos: " + xmldom.parseError.linepos + "\n" + "Reason: " + xmldom.parseError.reason);
} else {
alert("Document: " + xmldom.documentElement);
alert("Root: " + xmldom.documentElement.tagName);
alert("Child: " + xmldom.documentElement.firstChild.tagName);
alert("Xml DOM: " + xmldom.xml);
}


xmldom.load("workinfo.xml");


workNode=xmldom.documentElement;

motionNode=workNode.firstChild;

printNode=motionNode.nextSibling;

fineartNode=printNode.nextSibling;
}
.
.
.
.



A call to function revealText is called "onClick" of a thumbnail as such:


<a href="videopages/reel.html" class="vid" target="video" onClick="revealText(0)">


This is function revealText:


function revealText(x)
{
var title, project, client, info;

readXMLDocument();

displayNode=motionNode.childNode[x];


titleNode=displayNode.firstChild;


title=titleNode.getAttribute("id");
project=titleNode.getAttribute("project");
client=titleNode.getAttribute("client");
info=titleNode.getNodeValue();

titleSpan.innerHTML=title;
projectSpan.innerHTML=project;
clientSpan.innerHTML=client;
infoSpan.innerHTML=info;
}
</script>

and these are the spans they are written to:


<span id="titleSpan" class="vidinfo">

<span id="projectSpan" class="vidinfo">

<span id="clientSpan" class="vidinfo">

<p id="infoSpan" class="content">


If you have read this far, I REALLLLY appreciate it. And any ideas as to what is wrong would help alot.

im trying to onclick function on the button but in firebug it will say, function not defined, i even tried to do it with a internal script, but still it will not work. please help


Code:

<!DOCTYPE html>
<html>
  <head>
<script type="text/javascript" src="s/i.js">

</script>
  </head>
    <body> 
	
	 <button id="fihkhjsdk" onclick="ff();"> dsfh </button>
<php code...>
</body>

</html>

How to detect if the user clicked cancel while uploading a file ? Is there an event for it?

So,

I have to rely on a third party external JS file to load into a site of mine. Problem is I have to have it (for ads), but once every blue moon the server fails to repond to the request (its down or unresponsive), and thus because the JS can't load, the site hangs.

Is there a reliable js/ajax etc.. mechanism that I can use to set an allotted time and if the js isn't loaded, cancel the call or stop it so the page can load?

Please advise.

Caveats: I cannot host it, I cannot use php. Basically I was given a script call and I include it in the header of the page. I don't have alot of room to host, use various technologies etc.. other than what I am able to use without any backend/app scripting.

Hey,

Were I am stuck is with the jquery

I have a form that is done in a form class and when an option is selected from the dynamically populated drop down menu I would like it to fill in the text boxes so they can be edited.

I currently have:

getfeed.php - the page that is connected to the javascript

Code:

<?php
 
	include('class/class.form.php');
 
	include('class/class.users.php');
 
	$iID     = trim($_GET['extension']);
 
	if(!$iID) die('No User Data found.');
 
	$getValues = new Extension();
 
	$user_info = $getValues->getUsersInformation($iID);
 
	$sip_info  = $getValues->getSipInformation($iID);
 
	//print_r($user_info);
 
	//print_r($sip_info);
 
	$array = $getValues->getUsersInformation($iID);
 
 
	echo '<br /><br />-- end of query --';

The Javascript
Code:

if(document.id('LoadExtension') && document.id('ExtensionResponse')) { // id of select box
	var sel = document.id('LoadExtension'); // ser select box as var.
	sel.addEvent('change', function(chg) { // add change event to select box.
		if(sel.getSelected().get('value') != '') { // on change if selected value is not empty.
			new Request.HTML({
				url : 'http://Domain.co.nz/Air/includes/getFeed.php?extension='+ sel.getSelected().get('value'),
				onRequest: function() {
					document.id('ExtensionResponse').set('html', 'loading...');
				},
				onComplete: function(r1, r2, html, js) {
					document.id('ExtensionResponse').set('html', html);
				}
			}).send();
		}
	});
}

At the moment it does not load any data(I somehow need to get the $iID sent from the index.php but the drop down menu is a count array would I take it from this?) and is in a separate div below the form.

I have added a booking form to a website with belongs to fastbooking.

You can see a temporary website here. http://www.kohkoodguide.com/

It works perfectly fine in Mozilla Firefox, Google Chrome, Opera and Safari but it does not load on Internet Explorer.

On the other browsers the form loads todays date and the year is generated but on IE the date stays on 01-01 and no year is generated.

I'm using wordpress as a cms.

I think the code that is not loading is Code:

<body onLoad='start();'>

But I'm not sure. The code of the year is Code:

<select name='fromyear' class="input" onChange='update_departure();'> 
<option value="0"></option> 
</select>

But since it's no just the year I assume its the onload code.

I tried to add the onload to the header function like this

Code:

<body onLoad='start();' <?php if(function_exists('body_class')) body_class(); ?>>

So now wordpress generates the following code when it loads the page

Code:

<body onLoad='start();' class="home page page-id-6 page-template page-template-default logged-in">

But sadly the date still does no load on Internet Explorer. I'm out of ideas, anyone?

Hello all,

I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page.

It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user.

So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it.

Is this easy to do? I am new to javascript so bear with me

Code:

alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#newcontent').children().last().after(data);
                alreadyloading = false;
                nextpage++;
            });
        }
    }
});

The 'new content' is a div which is at the bottom of the page and is where the new content loads to!

Thank you very much

Hi All,

I have created my second Form to File Web Form thanks to some help from other members. Looks great.

I am still new to HTML and Javascript, but basically I took my First Web Form coding (with the Java Script) and manipulated it so that it suited my needs for my 2nd Form (both are very close to being the same).

For some reason, I can't get my Java Script validation to take effect.

I was wondering if some one could try to pin point why it isn't functioning properly? Again it could be the most obvious thing, but please bear with me as I learn.

Just for a little more clarity, I am going to list the things that I have changed to possibly make it easier to pin point:

Added Fields: Department, SteetAddress, CityState
Deleted: State/Research Accounts, Vendor Checkbox
Modified: "Type" which is a radio button that I have changed the choices of.

I beleive that's it...I will post my Java Script here and attach my Index File.

Thank you in advance!!

Code:

/********************************************************************************
 *
 * FORM VALIDATION 
 *
 ********************************************************************************/
// get the value of a radio button group:
function getRBValue(grp)
{
    if ( grp.length == null ) return grp.checked ? grp.value : null;
    for ( var g = 0; g < grp.length; ++g )
    {
        if ( grp[g].checked ) return grp[g].value;
    }
    return null;
}
// trim a string
function trim(fld)
{
    var val = fld.value.replace(/^\s+/,"").replace(/\s+%/,"").toUpperCase();
    fld.value = val;
    return val;
}
 
var echk = /^([a-z][\w\-\'\.]*)+\@([a-z][\w\-\'\.]+\.)+[a-z]{2,6}$/i
function emailCheck( fld )
{
    var email = trim( fld );
    fld.value = email;
    return echk.test(email);
}
 
var digonly = /[^\d]/g
function formatPhone( fld )
{
    var ph = fld.value.replace( digonly, "" );
    if ( ph.length != 10 ) return;
    fld.value = "(" + ph.substring(0,3) + ") " + ph.substring(3,6) + "-" + ph.substring(6);
}
 
var phchk = /^\(\d\d\d\) \d\d\d\-\d\d\d\d$/
function phoneCheck( fld )
{
    return phchk.test(fld.value);
}
 
function validateForm( frm )
{
	var oops = "";
    
    if ( trim( frm.elements["Username."] ).length  < 5 )
        oops += "You must enter your first and last name\n";
    if ( ! emailCheck( frm.elements["Email."] ) )
        oops += "That does not appear to be a valid email address\n";
	if ( trim( frm.elements["Department."] ).length  < 3)
        oops += "You must enter your department name\n";
    if ( ! phoneCheck( frm.elements["Phone."] ) )
        oops += "That is not a valid 10-digit phone number\n";
    if ( trim( frm.elements["ShipToBuildingRoom."] ).length  < 5 )
        oops += "You must enter your building and room information\n";
	if ( trim( frm.elements["StreetAddress."] ).length  < 5 )
        oops += "You must enter your street address information\n";
	if ( trim( frm.elements["CityZip."] ).length  < 5 )
        oops += "You must enter your city and zip code information\n";
		apptype = getRBValue( frm.elements["Type."] );
    if ( apptype == null )
        oops += "You must check one class\n";
   
    var app = getRBValue( frm.RequireApprovalYesNo );
    if ( app == null )
        oops += "You must specify whether or not approval is required.\n";
    if ( app == "Yes" )
    {
        if ( trim( frm.Approver ).length < 5 )
            oops += "You must enter the name of the approver\n";
        if ( ! emailCheck( frm.ApprovalEmail ) )
            oops += "The approval email is not a valid email address\n";
    }
   
 }
 
function showapp(yesno)
{
    document.getElementById("APP1").style.display = 
    document.getElementById("APP2").style.display = 
    document.getElementById("APP3").style.display = 
		yesno ? "" : "none";
}
 
</SCRIPT>

Hi; I have three files login.php, process.php and catcher.php. The first one contain the form, the second file is the form action and the last is a second file which must receive the form request as well but not getting redirected to it.

login.php content :
PHP Code:
<form action="process.php" method="post">
<input type="text" name="userid">
<input type="password" name="userpwd">
<input type="submit" value="Submit">
</form> 


So I want the user who click on the Submit button get redirected to process.php as usual and at the seem time send a copy of the request into catcher.php. I am thinking for a hidden iframe but don't know how to de it.
Regards

i have a html/php form which let users upload pictures onto my server. the problem with it is, it says the picture has been uploaded but if the file name contains any of character apart from text (A-z) and numbers, the picture never shows up in the admin panel.

is there a way using ajax or jquery to disallow certain file names in the upload field of the html which uses these characters !@#$%^'&*()"?

how do i go on about this?

Hey there everyone

I'm a bit new to javascript and having a bit of a problem.

I have a page users can click to upload a photo. When users click I want a modal window to pop up with a simple file upload input inside it and a submit button. I have this working except that when users click submit nothing happens. I'm using nyroModal http://nyromodal.nyrodev.com/#demos and the code I use is:

Code:

<a href="#test" class="nyroModal"><img src="/img/uploadimage.gif" alt="" /></a>
<div id="test" style="display: none; width: 600px;"> <form id="ImageUploadForm" enctype="multipart/form-data" method="post" action="images/upload" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST" />
</div>
<div class="input file">
<label for="ImageFileName">File Name</label>
<input type="file" name="data[Image][fileName]" id="ImageFileName" />
</div>
<div class="submit"><input type="submit" value="Upload" />
</div>
</form>
</div>

If I take the code out of the div=id"test" the form appears on the normal page and submits just fine. Inside the test div tho the modal window pops up with the form inside but the submit button does nothing.

Can anyone enlighten me what I'm doing wrong?

Hi there,

Firstly my title may be a bit misleading as I don't i'm not sure how to do it. My situation is that I have a small piece of javascript that 'cycles' through a bunch of URL's (the URL's are reports produced by SSRS). The problem is that each time the javascript loads a new URL it has to generate the report, so I have a few seconds where the screen says 'Generating Report'.

What I would like is a system that never displays the Generating Report, instead I would like to maybe pre-load the next report so it is ready to show instantly.

Does anyone have any idea how to do this? Any help would be greatly appreciated.

Cheers,

Tom.

Hi everyone,

I am having trouble getting a loading bar to appear from my javascript.

I have the following code in place

Code:

$(document).ready(function(){
 $(window).scroll(function(){

  var h = $('#footer').height();
  var y = $(window).scrollTop();
  if( y > (h*0) && y < (h*1.0) ){

	  $('#loading').fadeIn("slow");
	   $('#loading').delay(10000).fadeOut();

   $("#portfolios").delay(1000).fadeIn("slow");
  
  }
 });
})

I have it so when the user reacher the 'footer' div of the page, new posts appear which are contained in the 'portfolios' container div. They appear fine but no loading bar appears...

The loading bar 'gif' is in the 'loading div id'.

There is a 'display:none;' in the css on the loading div and the portfolios div.

Any reason why the 'loading' div doesn't display but the portfolios does?

I want the loading gif to show whilst the 'portfolios' is loading basically when the user hits the bottom of the page.

Any help would be appreciated!

Thank you!