|
JavaScript - Ajax Filter Php Mysql Results
Similar TutorialsHello everyone, I wonder if you can help a noob. I have an AJAX query that loads results from a mysql query into a div on my page. It all renders well with echoed results from a php query file. However I cannot get echoed links with a tag to open it up in light/slim/media box to work. Any ideas? Here is the part of the queried php that returns the results. Code: echo "<table width='100%'>";
echo "<tr><td><strong>Title</strong></td><td><strong>Location</strong></td><td><strong>Preview</strong></td></tr>";
while($row = mysql_fetch_array($result))
{
$danum = "000000".strval($row['id']) ;
echo "<tr><td width='410px;margin:5px'>".$row['title'] . "</td><td width='410px;margin:5px'>" . $row['place'] . "</td><td width='120px;margin:5px'><a href='archive/800/da".substr($danum,strlen($danum)-6,6).".jpg' rel='lightbox'><img src='archive/100/da".substr($danum,strlen($danum)-6,6).".jpg' class='lbThumb'></a></td></tr>";
}
echo "</table>";
I have all of the required scripts in the head of the main page. I got no idea how to create a filter based on multiple drop menus to filter & sort data from php mysql query. Can anyone help me to write javascipt for this problem? My php mysql query as below:- mysql_select_db($database_winwin, $winwin); $query_rsMobile = "SELECT product_detail.product_Id, product_detail.product, product_detail.product_category, product_detail.product_brand, product_detail.product_name, product_detail.product_price, product_detail.thumbnail_url, product_detail.product_url, product_detail.product_status, product_detail.commission, product_detail.product_added_date FROM product_detail WHERE product_detail.product='Mobile Devices' AND product_detail.product_status='For sales'"; $rsMobile = mysql_query($query_rsMobile, $winwin) or die(mysql_error()); $row_rsMobile = mysql_fetch_assoc($rsMobile); $totalRows_rsMobile = mysql_num_rows($rsMobile); Whereby:- Product Brand: product_brand Product price: product_price Commission: commission Product name: product_name Product Thumbnail: thumbnail_url Product URL: product_url HTML for filters & sorter:- <div id="filters"> <form action="" method="post" name="form_filters" id="form_filters"> <table width="750" border="0"> <tr> <td>Brand:</td> <td><select name="productBrand" id="productBrand"> <option value="All Brands">All Brands</option> <option value="Sony Ericsson">Sony Ericsson</option> <option value="Samsung">Samsung</option> <option value="Nokia">Nokia</option> </select></td> <td>Price:</td> <td><select name="priceRange" id="priceRange"> <option value="All Price">All Price</option> <option value="Below RM1000">Below RM1000</option> <option value="RM1000-RM1999">RM1000-RM1999</option> <option value="RM2000 & Above">RM2000 & Above</option> </select></td> <td>Sort by:</td> <td><select name="productSort" id="productSort"> <option value="Sort By Name">Name</option> <option value="Sort By Price">Price</option> </select></td> <td><input name="Apply Filters" type="submit" value="Apply Filters"/></td> <td><input name="Reset Filters" type="Reset" value="Reset Filters"/></td> </tr> </table> </form> </div> Once user click on "Apply Filters" javascript has to sort list the product items. HTML for Pager (Value for total items, display some page numbers with hyperlink (1,2,3....10,11,12), hyperlink to previous page, hyperlink to next page) :- <div id="pager"> No. of items per page: <select name="NumOfItem" id="NumOfItem"> <option value="20">20</option> <option value="50">50</option> <option value="100">100</option> </select> Total Item: Pages ... Next... Previous </div> Javascript has to manage pager column. HTML for Product display:- <div id="product"> <div id="Thumbnail"> Here Javascript has to display Thumbnail image based on filters & sorter drop menus inputs. When click on this image page must redirect to "Product URL". </div> <div id="Price"> Here Javascript has to display "Price" based on filters & sorter drop menus inputs. When click on this "Price" page must redirect to "Product URL". </div> <div id="Commission"> Here Javascript has to display "Commission" image based on filters & sorter drop menus inputs. When click on this "Commission" page must redirect to "Product URL". </div> </div> Javascript has to repeat regions (<div id="product"></div>)based on "NumOfItem" drop menu (number of items display per page) and also update the pager column OK I am wanting to build a table that I can enter data in to and have people sort by a drop down box like the 4th table down on this list -- http://www.javascriptkit.com/script/...lefilter.shtml But I have followed those instructions step by step and it never works. I was told to use .asp I have changed my page to a .asp and now have no clue where to go from here. In searching this site I have found this code -- [CODE] <script> function Filter(table){ var f=document.getElementById('f').value.toUpperCase(); for (a=1; a<table.rows.length; a++) { if (table.rows[a].cells[0].innerHTML.toUpperCase().indexOf(f)!=0) table.rows[a].style.display="none"; else table.rows[a].style.display="table-row"; } } </script> <table id="states" border=1> <tr><td>State</td><td>Code</td></tr> <tr><td>ALABAMA</td><td>AL</td></tr> <tr><td>ALASKA</td><td>AK</td></tr> <tr><td>MAINE</td><td>ME</td></tr> <tr><td>MARSHALL ISLANDS</td><td>MH</td></tr> </table> <form> <input type="text" name="f" id="f"> <input type="button" value="Filter" onclick="Filter(document.getElementById('states'));"> </form> [CODE] But it gives me a filter that I have to type in. I am looking for drop downs that allow me to filter so say you select drop down for fields that contain "A" then another drop down for a field that contains "B" so the results show fields that contain "A" and "B" And PS I am semi new to the code world so please don't assume I know some stuff dumb it down a little HAHA Hey there everyone. I'm a bit of a newb with javascript and php so apologies if this question is a bit simple, although I can't get my head round how to go about doing it. I have a search page where a user can type in a search box, or they can use an alphabetical list to search for the record they're looking for. Eg they click 'a' and all the records beginning with the letter 'a' appear. I'd also like to have it so that each record has a number of tags, and I'd then like to be able to filter records according to which tags have been selected - preferably using checkboxes. For example, perhaps the tags would be colours and the records represented shoes. There'd be checkboxes for blue, yellow, black, brown and so on. At first all colours would be shown, but if the user clicks on brown the all but the brown shoes dissappear. like I say, I'm new to learning php so please be gentle. Also I'm using Cakephp so if there's anyway to make it easier using Cake then I'd love to know. thanks I am currently trying to put together a AJAX search that searches a MySQL database using PHP. I have created the below scripts. I cannot get it to function properly. Essentially I want someone to type in a partial search term and click submit and see the results. The purpose of this is for it to become part of a mobile app. Any help would be appreciated. Thank you! HTML: <!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> <style type="text/css"> body{font-family:'Lucida Grande', Verdana, sans-serif;; font-size:14px; color:#666666;} h2{color:#000000; margin-bottom:20px;} h3{color:#000000; font-size:14px;} input{font-size:16px; color:#444444;} a:link, a:visited, a:hover{color:#0033CC;} a:hover{text-decoration:none;} div.searchInput{padding:8px; background:#DEDEDE; clear:both;} div.footer{padding:6px; border-top:solid 1px #DEDEDE; font-size:10px;} #msg{background:#FFFFCC; margin-bottom:10px; padding:4px; display:none;} </style> <script type="text/javascript"> function showProducts(str) { if (str=="") * { * document.getElementById("search-result").innerHTML=""; * return; * } if (window.XMLHttpRequest) * {// code for IE7+, Firefox, Chrome, Opera, Safari * xmlhttp=new XMLHttpRequest(); * } else * {// code for IE6, IE5 * xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); * } xmlhttp.onreadystatechange=function() * { * if (xmlhttp.readyState==4 && xmlhttp.status==200) *** { *** document.getElementById("search-result").innerHTML=xmlhttp.responseText; *** } * } xmlhttp.open("GET","search.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form id="searchForm" name="searchForm" method="post" action="javascript:searchNameq();"> <div class="searchInput"> <input name="searchq" type="text" id="searchq" size="30" onkeyup="javascript:showProducts()"/> <input type="button" name="submitSearch" id="submitSearch" value="Search" onclick="javascript:showProducts()"/> </div> </form> <h3>Search Results</h3> <div id="msg">Type something into the input field</div> <div id="search-result"></div> </body> </html> PHP: <?php $q=$_GET["q"]; //connect to the database mysql_connect("christianbrogers.db.5646816.hostedresource.com","christianbrogers","GHbn123"); mysql_select_db("christianbrogers"); //explode our search term into separate words $search_exploded = explode(" ",$search); foreach($search_exploded as $search_each) { //construct the query $x++; if ($x==1) $construct .= "name LIKE '%$search_each%'"; else $construct .= " OR name LIKE '%$search_each%'"; } //echo out the constructed query $construct = "SELECT * FROM products WHERE $construct"; $run = mysql_query($construct); $foundnum = mysql_num_rows($run); if ($foundnum==0) echo "No results found."; else { while ($runrows = mysql_fetch_assoc($run)) { //get data $name = $runrows['name']; echo $name; ?> Hi all!, I'm having a few challenges trying to create a link to a "new" search from a database search results page. This maybe a better example: My goal is: To allow website visitors to searches site for i.e. "Dog Collars", the results page lists every "dog collar" and store that carries "dog collars" (in database). At that point I would like to have links (on the results page) to all brands of "dog collars" and stores that carry "dog collars". I would like to then be able to click on a "brand" (text link) of "dog collars" and then generate a new results page that lists all store and vendor information. thank you in advance! Erick p.s. this is a link to a site that has a similar featu http://69.0.211.58/~pubexpress/ami/html/index.html view the rest of my comments works on the first page but when i extend the search results the rest of the view comments wont expand. click View all 3 comments and it will show all comments then click more button try to click the view all comments on the next comment and nothing happens but the screen jumping up to the top. http://www.runningprofiles.com/membe...ll_Script.php# Why is this?? What do i need to do to fix it? PHP Code: <!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=iso-8859-1" /> <title>9lessons Applicatio Demo</title> <link href="frame.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.oembed.js"></script> <script type="text/javascript"> $(function() { $('.more').live("click",function() { var ID = $(this).attr("id"); if(ID) { $("#more"+ID).html('<img src="moreajax.gif" />'); $.ajax({ type: "POST", url: "http://www.runningprofiles.com/members/shout/data/ajax_more.php", data: "lastmsg="+ ID, cache: false, success: function(html){ $("ol#updates").append(html); $("#more"+ID).remove(); // removing old more button } }); } else { $(".morebox").html('The End');// no results } return false; }); }); $(function() { $(".view_comments").click(function() { var ID = $(this).attr("id"); $.ajax({ type: "POST", url: "../viewajax.php", data: "msg_id="+ ID, cache: false, success: function(html){ $("#view_comments"+ID).prepend(html); $("#view"+ID).remove(); $("#two_comments"+ID).remove(); } }); return false; }); }); $(function() { $(".comment_button").click(function() { var element = $(this); var boxval = $("#content").val(); var dataString = 'content='+ boxval; if(boxval=='') { alert("Please Enter Some Text"); } else { $("#flash").show(); $("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>'); $.ajax({ type: "POST", url: "update_ajax.php", data: dataString, cache: false, success: function(html){ $("ol#update").prepend(html); $("ol#update li:first").slideDown("slow"); document.getElementById('content').value=''; $('#content').value=''; $('#content').focus(); $("#flash").hide(); $("#expand_url").oembed(boxval); } }); } return false; }); //comment slide $('.comment').live("click",function() { var ID = $(this).attr("id"); $(".fullbox"+ID).show(); $("#c"+ID).slideToggle(300); return false; }); //commment Submint $('.comment_submit').live("click",function() { var ID = $(this).attr("id"); var comment_content = $("#textarea"+ID).val(); var dataString = 'comment_content='+ comment_content + '&msg_id=' + ID; if(comment_content=='') { alert("Please Enter Comment Text"); } else { $.ajax({ type: "POST", url: "comment_ajax.php", data: dataString, cache: false, success: function(html){ $("#commentload"+ID).append(html); document.getElementById("textarea"+ID).value=''; $("#textarea"+ID).focus(); } }); } return false; }); // Delete Wall Update $('.delete_update').live("click",function() { var ID = $(this).attr("id"); var dataString = 'msg_id='+ ID; var parent=$("#bar"+ID); jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', function(r) { if(r==true) { $.ajax({ type: "POST", url: "delete_comment.php", data: dataString, cache: false, success: function(html){ $("#comment"+ID).slideUp(); } }); } return false; }); return false; }); }); </script> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } .update_box { background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px } a { text-decoration:none; color:#d02b55; } a:hover { text-decoration:underline; color:#d02b55; } *{margin:0;padding:0;} ol.timeline {list-style:none;font-size:1.2em;}ol.timeline li{ display:none;position:relative; }ol.timeline li:first-child{border-top:1px dashed #006699;} .delete_button { float:right; margin-right:10px; width:20px; height:20px } .cdelete_button { float:right; margin-right:10px; width:20px; height:20px } .feed_link { font-style:inherit; font-family:Georgia; font-size:13px;padding:10px; float:left; width:350px } .comment { color:#0000CC; text-decoration:underline } .delete_update { font-weight:bold; } .cdelete_update { font-weight:bold; } .post_box { height:55px;border-bottom:1px dashed #006699;background-color:#F3F3F3; width:499px;padding:.7em 0 .6em 0;line-height:1.1em; } #fullbox { margin-top:6px;margin-bottom:6px; display:none; } .comment_box { display:none;margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:50px; } .comment_load { margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:30px; font-size:12px; border-bottom:solid 1px #FFFFFF; } .text_area { width:290px; font-size:12px; height:30px; } #expand_box { margin-left:90px; margin-top:5px; margin-bottom:5px; } embed { width:200px; height:150px; } *{ margin:0px; padding:0px } ol.timeline { list-style:none } ol.timeline li { position:relative; border-bottom:1px #dedede dashed; padding:8px; } .morebox { font-weight:bold; color:#333333; text-align:center; border:solid 1px #333333; padding:8px; margin-top:8px; margin-bottom:8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } .morebox a{ color:#333333; text-decoration:none} .morebox a:hover{ color:#333333; text-decoration:none} #container{margin-left:60px; width:580px } </style> </head> <body> <?php include '../../../settings.php'; ?> <div align="center"> <table cellpadding="0" cellspacing="0" width="500px"> <tr> <td> <div align="left"> <form method="post" name="form" action=""> <table cellpadding="0" cellspacing="0" width="500px"> <tr><td align="left"><div align="left"> <h3>What are you doing?</h3></div></td></tr> <tr> <td style="padding:4px; padding-left:10px;" class="update_box"> <textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br /> <input type="submit" value="Update" id="v" name="submit" class="comment_button"/> </td> </tr> </table> </form> </div> <div style="height:7px"></div> <div id="flash" align="left" ></div> <ol id="update" class="timeline"> </ol> <ol class="timeline" id="updates"> <div id='old_updates'> <?php $small=mysql_query("select * from messages2 order by msg_id desc LIMIT 5"); while($r=mysql_fetch_array($small)) { $id=$r['msg_id']; $msg=$r['message']; ?> <div align="left" class="post_box"> <span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span> </div> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id "); $array = mysql_fetch_assoc($csql); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view<?php echo $id; ?>"> <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a> </div> <?php } ?> <div id="view_comments<?php echo $id; ?>"></div> <div id="two_comments<?php echo $id; ?>"> <table width="80%"> <?php $small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 "); while($rowsmall22=mysql_fetch_array($small2)) { $c_id=$rowsmall22['com_id']; $comments=$rowsmall22['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comments; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> <?php } ?> </ol> <div id="more<?php echo $id; ?>" class="morebox"> <a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a> </div> </div> </td> </tr> </table> </div> </body> </html> if it help here is ajax_more.php PHP Code: <?php include("../../../settings.php"); if(isSet($_POST['lastmsg'])) { $lastmsg=$_POST['lastmsg']; $lastmsg=mysql_real_escape_string($lastmsg); $small=mysql_query("select * from messages2 WHERE msg_id<'$lastmsg' order by msg_id desc LIMIT 2"); while($r=mysql_fetch_array($small)) { $id=$r['msg_id']; $msg=$r['message']; ?> <div align="left" class="post_box"> <span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span> </div> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id "); $array = mysql_fetch_assoc($csql); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view<?php echo $id; ?>"> <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a> </div> <?php } ?> <div class="comments" id="view_comments<?php echo $id; ?>"></div> <div id="two_comments<?php echo $id; ?>"> <table width="50%"> <?php $small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 "); while($rowsmall22=mysql_fetch_array($small2)) { $c_id=$rowsmall22['com_id']; $comments=$rowsmall22['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comments; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> <?php } ?> <div id="more<?php echo $id; ?>" class="morebox"> <a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a> </div> <?php } ?> Hi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. Ok will update
Hello, I'm trying to use the following code to create a transitional effect for my navigation buttins: <html> <head> <style type="text/css"> <!-- #menu2 { width: auto; } #menu2 ul { margin: 0; padding: 0; list-style-type: none; font-family: verdana, arial, sanf-serif; font-size: 12px; } #menu2 li { margin: 0 20px; /*display: inline;*/ } #menu2 a { width:120px; padding: 2px 10px 2px 10px; border: 1px solid #000000; background: #dcdcdc; text-decoration: none; filter:blendTrans(duration=0.75); } #menu2 a:link, #menu2 a:active, #menu2 a:visited { color: #000000; } #menu2 a:hover { border: 1px solid #000000; background: #333333; color: #ffffff; } --> </style> <script type="text/javascript"> <!-- function lite(obj) { if(document.all&&!window.opera) { obj.filters.blendTrans.apply(); obj.filters.blendTrans.play(); } } --> </script> </head> <body> <div id="menu2"> <ul> <li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Home</a></li> <li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Products</a></li> <li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Services</a></li> <li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Solutions</a></li> <li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Support</a></li> <li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Contact</a></li> </ul> </div> </body> </html> If you launch this in IE it works a treat and provides the exact effect I require. That is, until you add a DTD to it. Then everything to do with the filter doesn't work. I know nothing about javascript and I've spent over 12 hours trying to find a method to make this work but to no avail. If there is a javascript expert out there who knows how to rectify the problem, if you are male and I was a female, I'd have your children!!! Hope someone can help. Thank you. Fixed! The thing I have started to realize is if a downloaded tutorial on a specific website function isn't working out so great...then just look for a better one :) This filtering image setup works PERFECTLY: http://www.htmldrive.net/items/show/...ages-Portfolio Original Message: Man I have officially run out of ideas here. I grabbed the code from this tutorial: Demo I tailored it to accommodate larger images in this portfolio page. At first glance it appears to work, but it actually is messed up and I CANT figure out why...especially since there is such little code. :confused: Hello! I am trying to validate name, email and comment inputs! I did the following! Code: $("#CmtSub").click(function(event){
var email = $("#CmtEmail").val();
var filter = /'^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$'/;
if( $("#CmtName").val() == "" ){
$("#CmtName").css({'background-position': '0 -45px'}, 0);
return event.preventDefault(event);
}else{
$("#CmtName").css({'background-position': '0 -90px'}, 0);
}
if(filter.test(email) && email != "") {
$("#CmtName").css({'background-position': '0 -45px'}, 0);
return event.preventDefault(event);
}else{
$("#CmtName").css({'background-position': '0 -90px'}, 0);
}
//just to debug
console.log("the value and the email ("+ email +")");
if( $("#CmtTxtArea").val() == "" ){
$("#CmtTxtArea").css({'border': 'red 1px solid'}, 0);
return event.preventDefault(event);
}else{
$("#CmtTxtArea").css({'border': 'white 1px solid'}, 0);
}
// then proceed !
});
this code here isn't working! any help please ?: Code: if(filter.test(email) && email != "") {
//passme = false;
$("#CmtName").css({'background-position': '0 -45px'}, 0);
return event.preventDefault(event);
}else{
//passme = true;
$("#CmtName").css({'background-position': '0 -90px'}, 0);
}
help is greatly appreciated ! Hello I am working on a site for work and on the page http://www.australianvisitor.co.uk/holidayfinder.htm I have a box with several options for the customer to tick to filter a selection of holidays according to destination. With thanks to thecssguy I found some code to do so. The only problem I have is that all the options are ticked by default, resulting in all holidays being displayed. It would be easier if they were all unticked by default allowing the customer to start from scratch so to speak. If i remove the line 'checked=checked' from the input box then: in firefox - the options are unticked but all results are still displayed in ie - the option box itself disappears. Does anyone have any suggestions? Thanks for taking the time to read this. I want to alert the user if he enters only dots without any alphabets or numerals in a textbox using javascript. If the input contains dots in between alphabets and numerals the javascript should not alert the user.I have a javascript which alerts the user even if dots are present in between alphabets and numerals. Can any1 Help me..Below is my script: function addressValidation(obj) { var regex = new RegExp("[.]"); if(obj.value.match(regex)) { alert("Dot is not allowed"); obj.focus(); return false; } } I want to alert the user if he enters only dots without any alphabets or numerals in a textbox using javascript. If the input contains dots in between alphabets and numerals the javascript should not alert the user.I have a javascript which alerts the user even if dots are present in between alphabets and numerals. Can any1 Help me..Below is my script: Code: function addressValidation(obj)
{
var regex = new RegExp("[.]");
if(obj.value.match(regex))
{
alert("Dot is not allowed");
obj.focus();
return false;
}
}
Hey all, I have a script below, which I hope will generate query strings passed back to server using ajax depending on whether user selects an option from dropdown or enters content in a text field. Nevertheless, the issue I'm having at the moment is the firebug error: missing : after property id drop-filter: {\n It's telling me something is syntactically wrong with the drop-filter constructed in object notation below. But to me it looks correct: Code: <script>
(function($){
var listview = $('#listview');
var lists = (function(){
var criteria = {
drop-filter: {
insert: function(value){
if(value)
return handleFilter("filter", value);
},
msg: "Filtering..."
},
search-filter: {
insert: function(value){
if(value)
return handleFilter("search", value);
},
msg: "Searching..."
}
}
var handleFilter = function(key,value){
return {key: value};
}
return {
create: function(component){
var component = component.href.substring(component.href.lastIndexOf('#') + 1);
return component;
},
setDefaults: function(component){
var parameter = {};
switch(component){
case "sites":
parameter = {
'order': 'site_num',
'per_page': '20',
'url': '/sites'
}
}
return parameter;
},
getCriteria: function(criterion){
return criteria[criterion];
},
addCriteria: function(criterion, method){
criteria[criterion] = method;
}
}
})();
var Form = function(form){
var fields = [];
$(form[0].elements).each(function(){
var field = $(this);
if(typeof field.attr('alter-data') !== 'undefined') fields.push(new Field(field));
})
}
Form.prototype = {
initiate: function(){
for(field in this.fields){
this.fields[field].calculate(); // THIS DOESN"T MAKE SENSE WHY WE CALL CALCULATE HERE WHEN WE DIDN"T EVEN CALL ATTACH YET AND HENCE DONT KNOW WHAT TYPE OF EVENT TO RESPOND TO
}
},
isCalculable: function(){
for(field in this.fields){
if(!this.fields[field].alterData){
return false;
}
}
return true;
}
}
var Field = function(field){
this.field = field;
this.alterData = false;
this.attach("change");
this.attach("keyup");
}
Field.prototype = {
attach: function(event){
var obj = this;
if(event == "change"){
obj.field.bind("change", function(){
return obj.calculate();
})
}
if(event == "keyup"){
obj.field.bind("keyup", function(e){
return obj.calculate();
})
}
},
calculate: function(){
var obj = this,
field = obj.field,
msgClass = "msgClass",
msgList = $(document.createElement("ul")).addClass("msgClass"),
types = field.attr("alter-data").split(" "),
container = field.parent(),
messages = [];
field.next(".msgClass").remove();
for(var type in types){
var criterion = lists.getCriteria(types[type]);
if(field.val()){
var result = criterion.insert(field.val());
container.addClass("waitingMsg");
messages.push(criterion.msg);
obj.alterData = true;
initializeTable(result);
}
else {
return false;
obj.alterData = false;
}
}
if(messages.length){
for(msg in messages){
msgList.append("<li>" + messages[msg] + "</li");
}
}
else{
msgList.remove();
}
}
}
$('#dashboard a').click(function(){
var currentComponent = lists.create(this);
var defaults = lists.setDefaults(currentComponent);
initializeTable(defaults);
});
var initializeTable = function(custom){
var defaults = {}
var custom = custom || {};
var query_string = $.extend(defaults, custom);
var params = [];
$.each(query_string, function(key,value){
params += key + ': ' + value;
})
$.ajax({
type: 'GET',
url: '/' + url,
data: params,
dataType: 'html',
error: function(){},
beforeSend: function(){},
complete: function() {},
success: function(response) {
listview.html(response);
}
})
}
$.extend($.fn, {
calculation: function(){
var formReady = new Form($(this));
if(formReady.isCalculable) {
formReady.initiate();
}
})
var form = $(listview + ' fieldset');
form.calculation();
})(jQuery)
</script>
Thanks for response. This is my first posting to this forum. I have list of about a thousand applications for which various outsourcing companies are supporting at different levels. I want to use the attached code to filter. For example, if I type "SOX", every row with "SOX" appears. The filter works well but when I type "S" and the information appears on row, the height of the row changes. When I type "O" it changes more. What must I change to keep the height of the rows consistent. Thank you <!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" xml:lang="en" lang="en"> <head> <title>Filter applications</title> </head> <body> <table style="width: 646px; height: 926px;" id="content"> <tbody> <tr> <td id="main"> <div class="node"> <div class="content"><img style="width: 636px; height: 183px;" alt="" src="../Common%20Graphics/header.png" /><br /> <big><span style="font-family: Arial;">Governing outsourcing companies servicing applications</span></big><br /> <br /> <script type="text/javascript"> function filter (phrase, _id){ var words = phrase.value.toLowerCase().split(" "); var table = document.getElementById(_id); var ele; for (var r = 1; r < table.rows.length; r++){ ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,""); var displayStyle = 'none'; for (var i = 0; i < words.length; i++) { if (ele.toLowerCase().indexOf(words[i])>=0) displayStyle = ''; else { displayStyle = 'none'; break; } } table.rows[r].style.display = displayStyle; } } </script> <form><b style="font-family: Arial;">Filter:</b> <input name="filt" onkeyup="filter(this, 'sf')" type="text" /></form> <br /> <hr style="width: 100%; height: 2px;" /> <table id="sf" style="width: 636px; height: 994px;" border="0" cellpadding="2" cellspacing="1"> <tbody> <tr> <td style="font-family: Arial; background-color: rgb(255, 255, 153);"><font color="">Application</font></td> <td style="font-family: Arial; background-color: rgb(255, 255, 153);"><font color="">Outsourcing company</font></td> <td style="font-family: Arial; background-color: rgb(255, 255, 153);"><font color="">Support</font></td> </tr> <tr> <td style="font-family: Arial;"><a href="HTML/index.html" target="_blank">432 Reports Prod</a></td> <td style="font-family: Arial;">InfoSys </td> <td style="font-family: Arial;">Gold</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">Accomodation Reservation System</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Silver</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial; height: 30px;">ACL - Audit Command Language</td> <td style="width: 223px; font-family: Arial;">Accenture </td> <td style="width: 133px; font-family: Arial;">Gold SOX</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">Actions Tracker</td> <td style="width: 223px; font-family: Arial;">Tata </td> <td style="width: 133px; font-family: Arial;">Gold SOX Critical</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">Air Quality Public Website and Dispersion Forecast</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Silver SOX</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">Airport Management System</td> <td style="width: 223px; font-family: Arial;">InfoSys</td> <td style="width: 133px; font-family: Arial;">Bronze</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">All Mines Grade Control</td> <td style="width: 223px; font-family: Arial;">InfoSys</td> <td style="width: 133px; font-family: Arial;">Gold</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">ALLDATA</td> <td style="width: 223px; font-family: Arial;">Tata</td> <td style="width: 133px; font-family: Arial;">Gold Critical</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">AppAdmin</td> <td style="width: 223px; font-family: Arial;">Accenture</td> <td style="width: 133px; font-family: Arial;">Gold SOX</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">APPSRS</td> <td style="width: 223px; font-family: Arial;">InfoSys</td> <td style="width: 133px; font-family: Arial;">Silver SOX</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">ArcGIS</td> <td style="width: 223px; font-family: Arial;">InfoSys</td> <td style="width: 133px; font-family: Arial;">Silver</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">ASGLIB</td> <td style="width: 223px; font-family: Arial;">InfoSys</td> <td style="width: 133px; font-family: Arial;">Gold Critical</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">Asset Integrity</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Bronze</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">Asset Integrity - FLPS QA Survey</td> <td style="width: 223px; font-family: Arial;">InfoSys</td> <td style="width: 133px; font-family: Arial;">Silver</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">Asset Management Framework (FLPS)</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Gold</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">Auto Cad (MB)</td> <td style="width: 223px; font-family: Arial;">InfoSys</td> <td style="width: 133px; font-family: Arial;">Gold SOX</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">Autocad</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Gold SOX Critical</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">AutoMod</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Silver</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">AutoSkills</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Bronze</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">B Cleaner Circuit Control Summary (BCLDIS)</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Silver SOX</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">BACCESS (Acton)</td> <td style="width: 223px; font-family: Arial;">Tata </td> <td style="width: 133px; font-family: Arial;">Bronze</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">BACSESS-IP</td> <td style="width: 223px; font-family: Arial;">Tata</td> <td style="width: 133px; font-family: Arial;">Gold</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">Bank deposit</td> <td style="width: 223px; font-family: Arial;">Accenture </td> <td style="width: 133px; font-family: Arial;">Gold SOX Critical</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">Barometer Display</td> <td style="width: 223px; font-family: Arial;">Accenture </td> <td style="width: 133px; font-family: Arial;">Gold Critical</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">Batch & Print Pro</td> <td style="width: 223px; font-family: Arial;">Tata </td> <td style="width: 133px; font-family: Arial;">Silver</td> </tr> </tbody> </table> </div> <br /> </div> </td> </tr> </tbody> </table> </body> </html> Hi, I have an image slider that uses the: jquery.min.js file this basically slides up and down smoothly when clicked. I then added a Jquery accordian menu. When I put the 2 together the menu doesn't work it just stays fully expanded. As soon as I remove jquery.min.js it works fine but then the slider doesn't. What could this be please? Thanks alot Joe Hi! I have been working on an assignment, and I seem to have things working okay, except that I'd like for the results (Message + list of 3 favorite movies or books) to show up in the Results box of the original page, not in a separate page. I'm sure it's something totally obvious that I'm missing, but I'm a newbie, and would appreciate any hints or tips that you all could give me. Thanks so much in advance! Heather W |
|||||||