Jump to content

moving to ajax

didgydont

By didgydont
in Javascript Help

 Share

Recommended Posts

didgydont Member

didgydont

Posted
Posted

hi all

i used to have a page like this 

  <html>
  <head>
  <title>Kingla IT Price List</title>
  <link rel="stylesheet" type="text/css" href="admin/site.css" />
<script src="admin/site.js"></script>
  </head>
  <body onload="sf();setCaretToEnd(document.searcharea.itemsearch);">


                 <?php


include("admin/connect.php");
include("toolbar.php");

$typesearch = @"$_POST[typesearch]" ;


echo "<h3>If price is red please call me.</h3><br />";
echo "
<table border='0' cellpadding='5' cellspacing='0'>
<form action='index.php' method='post' name='searcharea'>
<tr><td>Item Description:</td><td><input type='text' title='Type The Name Of The Item' name='itemsearch' value='$itemsearch' class='TEXTB' onkeyup='showTable(this.value)' autocomplete='off' /></td>
<td>Type: </td><td><select type='text' name='typesearch' class='SELECTA' id='typesearch' title='Select The Item Type' onchange='this.form.submit()' />";
if (empty($typesearch)){echo "<option value='All Items'>Nothing Selected</option>";}
echo"<option value='All Items'>All Items</option>";
include("admin/type.php");
echo "</select></td>
<td></td><td></td></tr>
</form></table><br /><br />";

<span id="showtable"></span>
?>
<br /><br />

</body>
</html>

 

 

but now have 3 files for ajax cause did not work for crome

index.php

  <html>
  <head>
  <title>Kingla IT Price List</title>
  <link rel="stylesheet" type="text/css" href="admin/site.css" />
<script src="admin/site.js"></script>
<script src="admin/showtable.js"></script>
  </head>
  <body onload="sf();setCaretToEnd(document.searcharea.itemsearch);">
<!-- onfocus='onFocus(setCaretToEnd(this.form.itemsearch)'  set in the text field i was using would also of worked-->


                 <?php



include("toolbar.php");


echo "<h3>If price is red please call me.</h3><br />";
echo "
<table border='0' cellpadding='5' cellspacing='0'>
<form action='index.php' method='post' name='searcharea'>
<tr><td>Item Description:</td><td><input type='text' title='Type The Name Of The Item' name='itemsearch' value='$itemsearch' class='TEXTB' onkeyup='showTable(this.value)' autocomplete='off' /></td>
<td>Type: </td><td><select type='text' name='typesearch' class='SELECTA' id='typesearch' title='Select The Item Type' onchange='showTable2(this.value)' />";
if (empty($typesearch)){echo "<option value='No Type'>No Type Selected</option>";}
echo"<option value='All Items'>All Items</option>";
include("admin/type.php");
echo "</select></td>
<td></td><td></td></tr>
</form></table><br /><br />";

echo"<span id='showtable'><h2>Start to type to search for an item or select a catagory</h2></span>";
?>
<br /><br />

</body>
</html>

showtable.js

var xmlHttp

function showTable(str)
{
if (str.length==0)
  { 
  document.getElementById("showtable").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
var url="showtable.php"
url=url+"?itemsearch="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 


function showTable2(str)
{
if (str.length==0)
  { 
  document.getElementById("showtable").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
var url="showtable.php"
url=url+"?typesearch="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("showtable").innerHTML=xmlHttp.responseText
}
}




function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}

and

showtable.php

<?php
include("admin/connect.php");
$typesearch = "$_GET[typesearch]" ;
$itemsearch = "$_GET[itemsearch]" ;
$colum1 = "width='80%'";
$colum2 = "width='15%'";
$colum3 = "width='5%'";
$columth1 = "width='78%'";
$columth2 = "width='15%'";
$columth3 = "width='7%'";


if (eregi("^All Items$", $typesearch)){
    $result = mysql_query("SELECT * FROM products WHERE item LIKE '%$itemsearch%' AND type NOT LIKE '%Pricing' ORDER BY type, item");
}

elseif (empty ($typesearch)){
    $result = mysql_query("SELECT * FROM products WHERE item LIKE '%$itemsearch%' AND type NOT LIKE '%Pricing' ORDER BY type, item");
}
else {
    $result = mysql_query("SELECT * FROM products WHERE type='$typesearch' and item LIKE '%$itemsearch%'
    ORDER BY item
");
}

if (mysql_num_rows($result)== 0){echo "<h2>No item matching $itemsearch have been found</h2>";exit;}


// Begin your table outside of the array
echo "<table border='0' width='100%' cellpadding='5' cellspacing='0'>
        <th $columth1><b>Item</b></th>
        <th $columth2><b>Type</b></th>
        <th $columth3><b>Sell</b></th>";
        // <td><b>&nbsp Price Date &nbsp </b></td>
    echo "</tr></table><div style='height: 300px; overflow: auto;'><table border='0' width='100%' cellpadding='5' cellspacing='0'>";

// Define your colors for the alternating rows 

$color1 = "#E3E4FA";
$color2 = "#C8BBBE";
$row_count = 0;


// We are going to use the "$row" method for this query. This is just my preference. 

while($row = mysql_fetch_array($result)) {
    $cost = $row['cost'];
    $nodate = $row['nodate'];
    $markup = $row['markup'];
    $shipping = $row['shipping'];
        if ($markup==0){$sell = ($cost * 1.2 + $shipping);}
    else {$sell = (($cost + $markup) + $shipping);}
    //$cost3 = number_format ($sell,2);
    //$cost2 = roundup ($cost3,0);
    $cost7 = ceil ($sell);
    $cost2 = number_format  ($cost7,0);
    $shipping2 = number_format ($shipping,0);
    $item = $row['item'];
    $supplier = $row['supplier'];
    $type = $row['type'];
    $dandt = date('Y-m-d');
    $pricedate = $row['pricedate'];
    $timestamp = strtotime($pricedate);
    $formatted_date = date('F-d-Y', $timestamp);
    $daysold = round((strtotime($dandt) - strtotime($pricedate))/(24*60*60),0);


    /* Now we do this small line which is basically going to tell  
    PHP to alternate the colors between the two colors we defined above. */

    $row_color = ($row_count % 2) ? $color1 : $color2;

    // Echo your table row and table data that you want to be looped over and over here. 
/*  if  (($daysold <= 30) AND ($shipping2==0)){
    echo "<tr>
    <td bgcolor='$row_color'>&nbsp $item</td>
    <td bgcolor='$row_color'>&nbsp $type</td>
    <td align='right' bgcolor='$row_color'>&nbsp Free</td>
    <td align='right' bgcolor='$row_color'>&nbsp \$$cost2</td>
    <td align='right' bgcolor='$row_color'>&nbsp $daysold day(s) old </td>
    </tr>";} */
    if  ($type == "Custom Pricing"){
}

            elseif  ($nodate == 1){
    echo "<tr>
    <td $colum1 bgcolor='$row_color'>$item</td>
    <td $colum2 bgcolor='$row_color'>$type</td>
    <td $colum3 align='right' bgcolor='$row_color'>\$$cost2</td>
    "; //<td align='right' bgcolor='$row_color'>&nbsp $daysold day(s) old </td>
    echo "</tr>";}

      elseif  ($daysold <= 60){
    echo "<tr>
    <td $colum1 bgcolor='$row_color'>$item</td>
    <td $colum2 bgcolor='$row_color'>$type</td>
    <td $colum3 align='right' bgcolor='$row_color'>\$$cost2</td>
    "; //<td align='right' bgcolor='$row_color'>&nbsp $daysold day(s) old </td>
    echo "</tr>";}

    else  {echo "<tr>
    <td $colum1 bgcolor='$row_color'>$item</td>
    <td $colum2 bgcolor='$row_color'>$type</td>
    <td $colum3 align='right' bgcolor='$row_color' class='redtext'>\$$cost2</td>
    "; //<td align='right' bgcolor='$row_color'>&nbsp $daysold day(s) old </td>
    echo "</tr>";}


    // Add 1 to the row count 

    $row_count++; 
} 

// Close out your table. 

echo "
<tr align='center'><th colspan='3'><center>Kingla IT 2008.</center></th>
</tr>
</table></div>";
mysql_close($con);
?>

 

i used to be able to type and select cat to narrow down search results but now its one or the other any ideas ?

i also noticed it doesnt display things like ® or ™ anymore thank you for your time.

Link to comment
Share on other sites
  • 2 weeks later...
alexweber15 Member

alexweber15

Posted
Posted

as far as the special characters not displaying correctly its almost certainly an encoding problem...

check to see if all pages have the same encoding specified (or more likely you might have forgotten to properly URLEncode data when POSTing using AJAX

 

if not, you can always use htmlentities() or html_entity_decode() to transform the character if its appearing garbled.

 

now, as far as moving to ajax/beginning ajax/etc i'm amazed at how many people insist on doing it the hard way!  :)

 

i'm totally for learning the basics of HTTP Requests and Statuses and whatnot but really you should be using a js library to do this kinda dirty work for you...

 

there's so many to choose from: jquery, dojo, prototype, mootools, yui, etc

 

personally, use use jquery and its ridiculously easy for ajax (simple form submit demo):

 

HTML

<!-- standard HTML form, theres no action only an ID associated with the form "login" -->
<form id="login" method="post">
<input type="text" name="email" id="email" />
<input type="password" name="password" id="password" />
<input type="submit" value="submit" />
</form>

 

AJAX - jQuery Style

// this first line just starts executing code when the DOM is ready ([i]kind of [/i]like body onload)
$(function(){
    // select the form by its ID (#login) and intercept the submit event
    // the function here in an anonymous function that just tells the code what to do the form
    // submit is intercepted
    $('#login').submit(function(){
        // serialize the form data for posting
        // $(this) is just a reference to the last selected object, in this case the form with ID
        // "login"; so we are calling the function serialize() on the form
        var serial = $(this).serialize();
        // this is the fun part, call the $.post() function
        // first parameter is the URL, second is the data and optionally you can specify a callback
        // which will be executed once a "complete" response is received
        // notice how it has an argument "response" which is there the response will be stored
        $.post('submit.php', serial, function(response){
             // here we just alert whatever the server sent back! 
             alert(response);
        });
        // IMPORTANT!  don't forget to "return false;" or else the form will actually get submitted
        // again, without ajax
        return false;
    });
});

 

easy as that! :)

once you get used anonymous functions the code becomes much more legible! ;)

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

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

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.