|
JavaScript - Multi-selct Filter Script Possibility
Similar TutorialsHey guys! I've been searching for a multi-answer script for a 'sort of' quiz I'm making (it's not really a quiz, but I figure it's a similar concept). Example of what I want: Please Select which recipe you'd like: [checkbox1] Chocolate Brownies [checkbox2] Chocolate Chip Cookies [checkbox3] Strawberry Cake [checkbox4] Apple Pie |Submit| If they choose only Chocolate Brownies, then it'll take them to a page with just the brownie recipe, but if they choose Chocolate Brownies and Chocolate Chip Cookies it should take them to a second page I'll make with both recipes on it, etc. I know it's a lot of pages based on how many possible selections, but that's as far as my knowledge goes on how to do this. Any help would be SO appreciated! Thanks, Shia EDIT: I'd like the new information to appear in a new window for easy printing. 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 Hello All, I found this awesome upload script and it works perfectly for what I need so far. The one problem is I can't get it to work for multiple (individual files). The script works like a user will click the browse button, select the file, and it auto submits uploading the file. Now the script is setup to handle multiple files selected all at once, but I need separate buttons for each file. So here is the main page Code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 File API</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="main">
<h1>Upload Your Images</h1>
<form method="post" enctype="multipart/form-data" action="upload.php">
<input type="file" name="images" id="images"/>
<input type="file" name="images" id="images"/>
<input type="file" name="images" id="images"/>
<button type="submit" id="btn">Upload Files!</button>
</form>
<div id="response"></div>
<ul id="image-list">
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="upload.js"></script>
</body>
</html>
Here is the upload.php file Code: <?php
foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["images"]["name"][$key];
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
}
}
echo $_FILES['images']['name'][$key];
?>
And the upload.js file Code: (function () {
var input = document.getElementById("images"),
formdata = false;
if (window.FormData) {
formdata = new FormData();
document.getElementById("btn").style.display = "none";
}
input.addEventListener("change", function (evt) {
document.getElementById("response").innerHTML = "Uploading . . ."
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("images[]", file);
}
}
if (formdata) {
$.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("response").innerHTML = res;
}
});
}
}, false);
}());
I'm good with php, but don't know much with javascript and jquery so I don't really know how this works. Is there a way to adjust this so the multiple file inputs will upload. Right now it will only upload the first one. Here is it working. http://www.skafreaks.com/new2/upload/ Thanks for any help SkaFreaks 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 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. 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 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 ! 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> 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. 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 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 Using Javascript / jQuery, I'm trying to produce a series of dropdowns ("<select>") that have their options filtered as the user selects from them. For example: DROPDOWNS Field 1: - value_1 - value_2 Field 2: - value_3 Field 3: - value_4 - value_5 COMBINATIONS - value_1, value_3, value_5 - value_1, value_3, value_4 - value_2, value_3, value_5 When a user selects Field 3 - value_4, the unavailable options will be removed - ie, Field 1 - value_2 (there is no combination that allows value_2 and value_4 to be selected together). I have an array of the allowed combinations like this (although I can tweak the structure if necessary): Code: var combinations = [["value_1", "value_3", "value_5"], ["value_1", "value_3", "value_4"], ["value_2", "value_3", "value_5"]]; When a option is changed all the current entries are removed and only the allowed combinations added back in. Where I'm struggling is with how to find which combinations are acceptable based on what has already been selected. I'd really appreciate any pointers or just a fresh perspective on this because I seem to be going round in circles! Thanks! Hey all, I'm in process of writing my own script (I don't want to use any jquery plugins) to render a table and allow for filtering/searching. So when user clicks on link, by default there will be parameters passed in query string as you can see in the setDefaults private method below. However, I'm stuck trying to figure out the best way to append values selected from filter dropdown to the query string. I know it will involve something along the lines of $("select").change(function(){var option = $(this).val()}). But I am having difficulty figuring out how to incorporate it with this. I would like to make use of the below buildFilter function somehow: Code: (function($){
var listview = $('#listview');
var lists = (function(){
var criteria = {
drop_filter: {
check: function(value){
if(value)
return
},
msg: "Loading..."
},
search_filter: {
check: function(value){
if(value)
return
},
msg: "Loading..."
}
}
var handleFilter = function(){
}
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;
},
buildFilter: function(){
if(event == "change")
return criteria.drop_filter();
}
}
})();
$('#dashboard a').click(function(){
var currentComponent = lists.create(this);
var custom = lists.setDefaults(currentComponent);
initializeTable(custom);
});
var initializeTable = function(custom){
var defaults = {};
var query_string = $.extend(defaults, custom);
var params = [];
$.each(query_string, function(key,value){
params += key + ': ' + value;
})
alert(params);
}
})(jQuery)
Thanks for any response. I have a problem with some forms and utilizing the proper code to make them work. Need some help if anyone out there has some working knowledge could help let me now, anyone ?? Eric I will post the code and the problem if someone would chim in thanks |
|||||||