I've searched the Web around, and maybe I overlooked the answer, but I'm having this problem a few days which I cannot solve.
I'm trying to create a dropdown menu in jQuery. When you hover over a category generated from the sql database, it should show only all list items from that category. As solution I thought to have queries in my jQuery for each list id item, which I get via .
Here is my code:
find_li.on('click', function()
{
//sub_menu.fadeIn(200);
var dir = $(this).data('dir');
console.log(dir);
if (dir == 1)
{
console.log("1");
//first query here
}
else if (dir == 2)
{
console.log("2");
//second query here
}
});
So I'd like to get the right category by ID from the database. Is there a way to get each row ordered by ID on each mouseover?
I hope I made myself clear.
Thanks.
Related
I'm sorry I haven't included "my attempt" as such with this one, I'm useless with jquery so need some advice!!
I would like to change the value of a second selctor based on the results of the first.
I have a database of builders and regions with the headers builder_name and builder_region. The list ends up looking like this ...
builder_1 region_1
builder_1 region_2
builder_2 region_1
builder_3 region_1
builder_3 region_2
builder_3 region_3
(You get the idea)
I'm using the following in the form I've built to get a list of the builders for the first select box ...
echo '<select class= "ml-select" name="gen_builder">';
echo '<option value=" ">Select Builder</option>';
while($row = mysql_fetch_array($rsBUILDER)) {
if($linebreak !== $row['builder_name']) {
echo '<option value="'.$row['builder_name'].'">'.$row['builder_name'].'</option>';
}
else {echo "";}
$linebreak = $row['builder_name'];
}
echo '</select>';
The $linebreak is to get rid of the duplicate builder names from the list, which works a treat.
What I would like to achieve is a second selector that selects the regions available, dependant upon the builder that has been selected in the first option. I hope this makes sense????
The second query needs to look at the builder selected in the first selector and filter out just the regions that are in rows with the builder name form selector one.
Please do say if you need further information, I'm not great at explaining myself.
As you said you don't have experience with jQuery or Ajax, I'll post my answer with as many comments as possible. I will assume that you have two select dropdowns in your page.
The first one contains the builders, so it will have id="builders".
The second one contains the regions, so it will have id="regions".
From what I understand, the first select will be exactly the one you posted in your question, generated server-side (by PHP). I only ask that you please make a slight change on it, making each option value be equal to the builder's database ID, and not its name (unless the builder's primary key is their name, and not an ID). This will make no difference for the final user but will be important for our jQuery solution. The second one will be empty, as the idea is to fill it dynamically with the regions related to the builder selected in the first dropdown.
Now let's get to the jQuery code:
//Everything that goes below this first line will be ready as soon as the page is fully loaded
$(document).ready(function() {
//The following code defines an event. More precisely, we are defining that the code inside it will run every time our select with id "builders" has its value changed
$('#builders').change(function() {
//$(this) is our builders select. $(this).val() contains the selected value, which is the ID of our selected builder
var currentValue = $(this).val();
//Now, this is our Ajax command that will invoke a script called get_regions.php, which will receive the builder's ID in $_GET['builder_id'] and you can use to query your database looking for all regions related to this builder. Make sure to create an array with the returned regions. Your get_regions.php's last line should be echo json_encode($regions);
$.get("get_regions.php", {'builder_id': currentValue}, function(data) {
//Inside this function is the code that will run when we receive the response from our PHP script. It contains a JSON encoded list of regions, so first of all we need to parse this JSON
var regions = $.parseJSON(data);
//Before filling our second select dropdown with the regions, let's remove all options it already contains, if any
$('#regions').empty();
//Now, all there is left is to loop over the regions, adding each as an option of the regions dropdown. I'll do it the universal way
for (var i = 0; i < regions.length; i++) {
var regionOption = '<option value="'+regions[i]['region_name']+'">';
regionOption += regions[i]['region_name'];
regionOption += '</option>';
$('#regions').append(regionOption);
}
});
});
});
Despite any syntax errors (can't test the code from here) this should do the trick. Hope the comments were clear enough for you to understand how things work in jQuery.
So I want to make a dynamic submenu which directly gets data from mysql table
I have this js to get the current list item id...
$(document).ready(function() {
$('.courseTitle').mouseover(function() {
var id=this.id;
});
});
then I have one of the parent menu list item..
<li class="courseTitle" id="100"><a href="../courses/100/">Course100</li>
I want to get the id of the parent list item without page refresh. the submenu populating script is something like-
<ul id="chaptList">
<?php $crsID=$_REQUEST['course'];
require('../common/dbcon/courseCon.php');
$chapt_count=mysql_query("select * from course_$crsID order by chapter_id");
MY Js snippet is getting the li element id nicely.. but I need to pass the id value to my php snippet somehow whenever mouseover occurs
How abt this:
var id
$(document).ready(function() {
$('.courseTitle').mouseover(function() {
id = $(this).attr('id');
});
});
I decided to go for the old school method.. used simple arrays.. as I guess retreiving data from database on runtime every now n then is not that much of a good option
I have a brand list with about 2000 items, my problem is I want to generate a list of commands In jquery using this format dynamically.
$("select[name='brand']").change(function () {
$("#brand1,#brand2").hide();
if ($(this).val() == "brand1") { $("#brand1").show(); }
else if ($(this).val() == "brand2") { $("#brand2").show(); }
and so on...
});
the list of brands is located in MySQL which I brought into an array called
allBrands[] in php
so if the brands update in the MySQL, it will also update in the jquery script.
Obviously I can manually type in each brand, but i'm worried about when I update the database for newer brands etc..
Edit: that being said, if I can do a MySQL call in jquery and get the list of brands that way, that would also work. Brand1, brand2 = examples, names are random based on brand
If the data is ordered in the same way your 2 examples suggest you could try this:
$("select[name='brand']").change(function () {
$("[id^=brand]").hide(); // all id's starting with the word "brand"
$("#" + this.value).show(); // if the value is the same as the id you want to target
});
About the jQuery ^=, read here.
If the brands do not start with the word brand you can use $(".brands").hide();, and use the rest as I posted.
I have a form and I'm using the jQuery Table AddRow plugin to dynamically add rows to a table, the problem is I'm trying to when you select a Menu Item that the menu item goes into the text box to the left of it. It works on the first row but I can't figure out how to get it to work with rows that are added via the plugin.
You can see my code in action here: http://jsfiddle.net/VXNzd/
Here is the jQuery code:
// This moves the select box text to the input box
$('#mnu_names').change(function() {
var mnuProduct = $("#mnu_names").find(':selected').text();
var mnuCleanProduct = mnuProduct.split(' - ');
$('#topping_name').attr('value', mnuCleanProduct[0]);
});
// This code is needed to add and delete rows with the plugin
$(".toppings_add").btnAddRow({
It may be easier to see what I'm talking about by visiting the jsfiddle link up top. When it loads use the select box to and select something, It will put that info over into the text box without the price info. Add a new row and try it again. Won't work, can't figure out how to make it work.
The problem was as said by tomhallam your ID's are not unique. Also $.change() does not work on blocks added after you ran that. You should instead use $.on('change',...).
I updated your code and posted it on http://jsfiddle.net/PDPbn/5/.
The modified jquery-code goes as follows:
$(document).on('change','.mnu_names',function() {
var mnuProduct = $(this).find(':selected').text();
var mnuCleanProduct = mnuProduct.split(' - ');
$(this).parentsUntil('tbody').find('.topping_name').attr('value', mnuCleanProduct[0]);
});
This code is to work in combination with a form showing the results of the selections made on the right hand side of the page by loading the URL of the chosen option in a specified DIV that corresponds to the ID of the product.
function product_analysis(productid, address) {
if (this.checked = 'checked') {
$(productid).load(address);
}
else {
$(productid).load('http://www.divethegap.com/update/blank.html');
}
};
Problem is that the query to check if the box is checked or not does not work. If you check or uncheck the box it loads the address of the onclick event.
Any help would be appreciated but please keep in mind that the products are data driven so we cannot have specific IDs but rather IDs built of the Post ID.
Also when the page loads there will need to be some sort of global function which will work out what is 'checked' and load those URLs (products) in their specific DIVs.
Many Thanks,
Beware that you used = instead of == in the if() condition.
Also, have you tried with the :checked selector?
$("#id:checked")
JQuery documentation
function product_analysis(productid, address, box) {
if (box.checked) {
$(#productid).load(address);
}
else {
$(#productid).load('http://www.divethegap.com/update/blank.html');
}
};
and code for the box
onclick="product_analysis('#product_1231', 'http://www.divethegap.com/update/products/2010/11/padi-open-water/', this)"