Jump to content

Ajax help

tyweiss

By tyweiss
in JavaScript

Recommended Posts

tyweiss Newbie

tyweiss

Posted
Posted

Basically I'm a 'struggle' right now, I'm pulling in different content from a file (by XMLHttpRequest) and since I'm doing that the page only loads once...just content changes as they click next. Therefore I cannot set the element I want to hidden with the onload() in the body or any other tag.So instead I tried to use a div and set it to hidden but when I pull that content into the other page...there it is plain as day...and I can't get it to hide initially when I pull in that content.part of the content i'm trying to pull into the page (below)tester(), a function on the main page that is pulling this content in, will make it visible when the link is clickedproblem with syntax? or my logic in how I think Ajax works? <a href='#' onclick='tester();'><span style="color:red">Click Here...</span></a> To Generate a P/O Reference # to Provide to the BrandManufacturer <br /> <br /> <div id='po_reference' align="center" style='visibility.hidden'><span style="background-color: yellow"> Your P/O Reference # is: #P/O Reference goes here# </span> </div> <script type="text/javascript"> document.getElementById("po_reference").style.visibility="hidden"; </script>as you see I tried hidding it using a div ...then i tried just having a script with getElementById() in the content being pulled that would set it to hidden.anyone have a different angle to approach this, or maybe some things to try? I'd appreciate any help or ideas you could throw my way.

Link to comment
Share on other sites
tyweiss Newbie

tyweiss

Posted
  • Author
Posted

Sorry it is so ugly just working on getting a skeleton working before I go in and clean it all upbasically the main parts to look at are the main page and what is in step2 of the content page- Main Page-<html><head><title>_______ - Orders</title><link rel="stylesheet" href="styles.css"><link rel="icon" href="favicon16.ico" type="image/x-icon" /><link rel="shortcut icon" href="favicon16.ico" type="image/x-icon" /><META name="ROBOTS" content="NOINDEX, NOFOLLOW"></head><body onload="load()"><?/********************************______.phpextra part management*********************************/if(isset($_GET['pop'])){ include("pop_login.php"); $get = "?pop=1"; if(isset($_GET['edit'])) $get .= "&edit=1"; if(isset($_GET['cart_id'])) $get .= "&cart_id={$_GET['cart_id']}&u_id={$_GET['u_id']}"; $cancel = "java script:self.close()";}else { $get = '?page=extra'; $cancel = "{$_SERVER['PHP_SELF']}?page=extra";}if(!getPermission($GID,12)) {//this allows only users from admin header("Location: index.php"); exit;}$send = false;$dup = false;$ignore = '';$load = '';$selpart = true;$quant = 0;$highlight="greyfieldred";$highlight2="greyfieldred";$highlight3="greyfieldred";$highlight4="greyfieldred";$highlightmid="greyfieldred";$highlightpid="greyfieldred";$highlightprice="greyfieldred";$ordercheck ="";if(isset($_POST['pid'])){ $pid = $_POST['pid']; $mid = $_POST['mid'];}elseif(isset($_GET['pid'])){ $pid = $_GET['pid']; $mid = $_GET['mid'];}?><script type="text/javascript">var http = false;var step=1;if(navigator.appName == "Microsoft Internet Explorer") { http = new ActiveXObject("Microsoft.XMLHTTP");} else { http = new XMLHttpRequest();}function load(){ document.getElementById("Miscellaneous").style.visibility= "hidden"; if(step==2){ // was just seeing if this would work document.getElementById("po_reference").style.visibility="hidden"; } }function call() { http.abort(); http.open("GET", "<?php echo "________.php$get&pid=$pid&mid=$mid";?>&step="+step ); http.onreadystatechange=function() { if(http.readyState == 4) { document.getElementById('foo').innerHTML = http.responseText; } } http.send(null); step++; if(step>=4){ document.getElementById('stepper').style.visibility = "hidden"; }}function tester(){ document.getElementById("po_reference").style.visibility="visible";}function getvalue() { if(document.getElementById ("brand").value == 'Miscellaneous') { document.getElementById("Miscellaneous").style.visibility = "visible"; }else { document.getElementById("Miscellaneous").style.visibility= "hidden"; }}</script><div id="foo"> <?php print " Step 0 <br />"; print "<tr><td><table border='0' cellspacing='2' cellpadding='4'>"; print "<tr><td><span class='blue'>*</span> <b>Identify the Item’s Brand:</b></td><td>Select a Brand from the Line Card:</td><td>"; print "<select name='mid' size='1' width='44' id='brand' onchange='getvalue();' style='width: 200px;'><option value=''>"; $sel =& $mysql->query("________________"); while($data = $sel->fetchRow()){ print "<option value='$data[0]'"; print ">$data[1] ($data[2])"; }; print " <option value='Miscellaneous'>Miscellaneous </option></select></td></tr> "; ?> <tr id='Miscellaneous' style='visibility.hidden'> <td>Miscellaneous Brands </td><td> <span style="color:#999">Enter Brand's Name</span></td><td><input type='text' id='misc_brand' name='misc_brand'></td> </tr> <tr><td>Select your Contact’s Information from the Brand Address Book by: <br /> </td><td>*Contact name:</td><td> <input type='text' name='contac_name'></td></tr> <tr><td> -OR- <br /> <a href='#'> Clicking here </a></td><td>*Contact Title:</td><td> <input type='text' name='contac_name'></td></tr> <tr><td>Enter and Save the Information:</td><td>*Contact Phone</td><td> <input type='text' name='contac_name'></td></tr> <tr><td></td><td>*Contact Fax</td><td> <input type='text' name='contac_name'></td></tr> <tr><td></td><td>*Contact E-Mail</td><td> <input type='text' name='contac_name'></td></tr> </table> </div><input type='button' name='steps' onclick="call();" value='Next' id='stepper'></body></html>

The file that it pulls the content from<?phpif(isset($_GET['pop'])){ include("pop_login.php");}if(isset($_GET['step'])){$step=$_GET['step'] ;}else {$step=-0; }if(isset($_POST['pid'])){ $pid = $_POST['pid']; $mid = $_POST['mid'];}elseif(isset($_GET['pid'])){ $pid = $_GET['pid']; $mid = $_GET['mid'];}$pass = false;$datapass =& $mysql->getRow("SELECT passwd FROM users WHERE uid=?",array($UID));if(isset($_POST['send_x']) ){ $datapass =& $mysql->getRow("SELECT passwd FROM users WHERE uid=?",array($UID)); if(md5($_POST['password'])==$datapass[0]) { $pass = true; }}if($step==1){ print " Step 1 <br />"; print " <table border='0' cellspacing='2' cellpadding='4'> <tr><td> <span class='blue'> Step 1 –Describe the Extra Special Order Item(s): </span> <td></td><td> </td> </td> </tr> "; print " <tr><td>TEST</td><td>Identify an Item Number:</td><td>TEST</td><td> <input type='text' name='contac_name'></td></tr> <tr><td>TEST</td><td>Identify the Source of the Item Number:</td><td>TEST</td><td> <input type='text' name='contac_name'></td></tr> <tr><td>TEST</td><td>Provide an Item Description:</td><td>TEST</td><td> <input type='text' name='contac_name'></td></tr> <tr><td>TEST</td><td>Identify the Item's Unit of Measure:</td><td>TEST</td><td> <input type='text' name='contac_name'></td></tr> <tr><td>TEST</td><td>Estimate this Item's Freight/Shipping Class:</td><td>TEST</td><td> <input type='text' name='contac_name'></td></tr> <tr><td>Identify the Item's Cost:</td><td><input type='text' name='contac_name'></td>TEST<td></td><td> </td></tr> <tr><td>TEST</td><td>Identify the Item's Selling Price:</td><td>TEST</td><td> <input type='text' name='contac_name'></td><td></td></tr> <tr><td>TEST</td><td>*Contact E-Mail</td> <td>TEST</td><td> <input type='text' name='contac_name'></td></tr> <tr><td>TEST</td><td><input type='text' name='contac_name'></td>TEST<td>TEST</td><td>TEST</td></tr></table> "; // Need logic that will hide the elements until next is clicked or Click here link will show the rest of the pages}if($step==2){ print "Step 2 - Identify the Extra Special Order Item's Processing Status <br /> <br /> * Has this Warehouse Order/Purchase been Entered into the Warehouse's System:<br /> <table border='0' cellspacing='2' cellpadding='4'>"; print "<tr><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td></tr> <tr><td><input type='radio' name='warehouse' value='no'>No </td><td><input type='radio' name='warehouse' value='yes'> Yes</td><td>Warehouse Document # Created Is: </td> <td><input type='text' name='warehouse_doc'></td><td>TEST</td> </tr> </table> * Has this Warehouse Order/Purchase been Submitted to the Brand/Manufacturer for Purchase: <table border='0' cellspacing='2' cellpadding='4'> <tr><td><input type='radio' name='po_reference' value='no'>No </td><td><input type='radio' name='po_reference' value='yes'> Yes</td><td>P/O Reference # Given Was:          </td> <td><input type='text' name='po_reference'></td><td>TEST</td> </tr> </table><br />"; ?> <a href='#' onclick='tester();'><span style="color:red">Click Here...</span></a>   To Generate a P/O Reference # to Provide to the BrandManufacturer <br /> <br /> <div id='po_reference' align="center" style='display:none'><span style="background-color: yellow">Your P/O Reference # is: #P/O Reference goes here# </span> </div> <script type="text/javascript"> document.getElementById("po_reference").style.visibility="hidden"; </script><?php print "<table border='0' cellspacing='2' cellpadding='4'> <tr><td>*Identify the \"Estimated\" Ship Date<br />Provided by the BrandManufacter:</td> <td><select> <option value ='test'>test</option> <option value ='test'>test</option> <option value ='test'>test</option> <option value ='testi'>test</option></select></td> <td><select> <option value ='test'>test</option> <option value ='test'>test</option> <option value ='test'>test</option> <option value ='testi'>test</option></select></td> <td><select> <option value ='test'>test</option> <option value ='test'>test</option> <option value ='test'>test</option> <option value ='testi'>test</option></select></td></tr> </table> <table border='0' cellspacing='2' cellpadding='4'> <tr><td>Describe Any Notes/ <br /> Special Instructions:</td><td><textarea rows='4' cols='50' name='special_notes'></textarea></td></tr> </table> ";}if($step>=3){ print "Step 3 - Save the Extra Special Order Item’s Information <br /><br /> <table border='0' cellspacing='2' cellpadding='4'> <tr><td>Authorized By: <br /><select> <option value ='test'>(My Own Authority)</option> <option value ='test'>second option</option> <option value ='test'>third option</option> <option value ='testi'>fourth option</option> </select></td><td>Confirm Your Identity: <br /> <input type='text' name='password'></td><td>   </td></tr> </table> <p align='right'> <input type='submit' id='saver' value='save'> <input type='submit' value='cancel' id='cancel' onclick='java script: var answer = confirm (\"Are you sure you wish to cancel\"); if (answer){ self.close();} '> </p>"; }if(isset($_GET['step'])){echo "<br />get step value = ".$_GET['step'];}$step++;?>

Link to comment
Share on other sites
killboy Member

killboy

Posted
Posted

I don't know if you miswrote here or that's the way your actual code is written, but you have an error in the div style:you have

<div id='po_reference' align="center" style='visibility.hidden'>

And it sould be

<div id='po_reference' align="center" style='visibility:hidden'>

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted
<div id='po_reference' align="center" style='visibility.hidden'>
Well, if this is your markup copied and pasted, you've got a dot where you should have a colon, and that could certainly create the problem you describe.Are we to understand that you receive this markup in a responsetext and then add it to your page through some element's innerHTML?
Link to comment
Share on other sites
tyweiss Newbie

tyweiss

Posted
  • Author
Posted
I don't know if you miswrote here or that's the way your actual code is written, but you have an error in the div style:you have
<div id='po_reference' align="center" style='visibility.hidden'>

And it sould be

<div id='po_reference' align="center" style='visibility:hidden'>

I don't know how many times I went over that and didn't notice. That's what I get when I assume syntax.That was quick you guys have a good set of eyes.Thank you killboy and Deirdre's Dad I really appreciate it.yeah Deirde's Dad, basically I just want them in the end to fill out a form with multiple steps and not have to look at the whole thing, so I'm pulling different content from my php file with all the different steps (not all are there yet) ...pulling out a dynamic (sortable) table later on and I have to add some stuff where I can't reload the page so this is kind of a Ajax learning experience for me. Do you have a better idea of how I could approach it? Like I said I'm learning here so any tips you want to throw my way would be nice.
Link to comment
Share on other sites
killboy Member

killboy

Posted
Posted

By the way, if you changed visibility:hidden for display:none,you should also change your javascript code

 document.getElementById("po_reference").style.visibility="hidden";

for

document.getElementById("po_reference").style.display="none";

I'm also tempeted to ask: Why did you make two threads?

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

So the visibility thing is working now?You've got a lot of markup to pull in. Someone will probably argue for adding it bit by bit through DOM methods, but innerHTML works, has been documented to work faster on most or all browsers, and as I mentioned the other day is part of the HTML 5 draft spec. AND if each new part of your form is a little different, you'd need to write a separate javascript routine for every part if you went the DOM route. Who wants that?Nah. Stick to innerHTML.

Link to comment
Share on other sites
tyweiss Newbie

tyweiss

Posted
  • Author
Posted
By the way, if you changed visibility:hidden for display:none,you should also change your javascript code
 document.getElementById("po_reference").style.visibility="hidden";

for

document.getElementById("po_reference").style.display="none";

I'm also tempeted to ask: Why did you make two threads?

yeah gonna go make changes to that right now for cross browser compatibility.I wasn't aware of that..was pretty sure I had just clicked submit once. Sorry, I'll go delete the other
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...