I have a cascading dropdown with jQuery which is using PHP to retrieve its values. I am trying to nail it so that it works in all situations. Basically it should do the following:
Populate child when parent is selected
Parent is sticky so if the page is refreshed child should again auto
populate based on the parent value in the $_POST array.
If possible I would also like child to be sticky so that the
child would also be selected and not just re-populated when the page
is reloaded.
Here is what I have so far:
$("#parent_id").change(function() {
$("#child_id").html("<option value=\"\">-- Select One --</option>");
var p_id = $(this).val();
if(p_id != 0) {
$.getJSON('./php/includes/child_web_service.php?p_id=' + p_id,function(data) {
$.each(data, function() {
$("#child_id").append($("<option></option>").val(this['child_id_key']).html(this['child_name']));
});
});
}
});
<?php
if(isset($_POST['parent_id']) && $_POST['parent_id'] != ""){
echo "$(\"#parent_id\").val(" . $_POST['parent_id'] . ").trigger('change');";
}
?>
Any suggestions on making this more robust would be appreciated.
Thanks
Here are a few suggestions:
Use bind and trigger to populate child when parent is selected
Store $_POST in a variable to make the parent sticky, and use a ctype to validate it
Use a fragment identifier to append child to URL, then bind event to read the value and make child sticky on reload
Related
I have list of user and their dates in PHP and onclick of specific user, I want to hide div other than one whose link is clicked
For example :
<div class='person' id='add_new_date_8' style='display:none;'>
<div class='person' id='add_new_date_9' style='display:none;'>
<div class='person' id='add_new_date_10' style='display:none;'>
<a href='javascript:void(0)' onclick="addMydate('<?PHP echo $id;?>')">Add a new Date?<a/>
So if $id = 8 then hide all div of class person which has id other than 'add_new_date_8'
Make it simple in jquery
$(document).on('click', '.person', function() {
$('.person').hide();
$(this).show();
});
access id in js function. and first hide all the div with person class and then show the which have matching id.
function addMydate(id){
$('.person').hide();
$('#add_new_date_'+id).show();
}
The other solutions so far will work, however I prefer to use .siblings()
function addMydate(id){
var selectedEl = $('#add_new_date'+id);
selectedEl.siblings().hide(); //siblings() takes all other elements of the same parent
selectedEl.show();
}
This will prevent the element itself from being hidden and then shown again, and might save you some headaches on animations, should you add those.
note: this depends on your HTML structure instead of classes, which is a bit less flexible. You can also use the following to exclude the element you want to show from the elements that get hidden:
$('.person').not('#add_new_date'+id).hide()
You can use siblings to get the siblings of the clicked element.
$(document).on('click', '.person', function() {
$(this).show().siblings('.person').hide();
});
Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
Docs: http://api.jquery.com/siblings
EDIT
function addMydate(userId) {
$('#add_new_date_' + userId).show().siblings('.person').hide();
}
I am using Jquery-option-tree plugin on a standalone website not based on Wordpress as in example 7 on the demo page, except that I am not passing a .txt file but a PHP page is generating the array of < options > to be passed to the plugin.
http://kotowicz.net/jquery-option-tree/demo/demo.html
This perfectly works: so let's say that the user wants to select a category for a new product, the plugin suits the purpose generating a nice: " Food -> fruit -> apples " upon user clicks. (see demo page ex. 7)
What instead if a product already exists with its categories assigned? I want to show it to the user when he edit that product, preloading the tree.
I have the ids path coming from database, so it would just be a matter of having the plugin to run without the user interact, using the value I pass. I saw this question: jQuery simulate click event on select option
and tried to simulate user' click with this (and other) methods with no luck.
$('#select')
.val(value)
.trigger('click');
Here the call to the function:
$(function() {
var options = {
empty_value: '',
set_value_on: 'each',
indexed: true, // the data in tree is indexed by values (ids), not by labels
on_each_change: '/js/jquery-option-tree/get-subtree.php', // this file will be called with 'id' parameter, JSON data must be returned
choose: function(level) {
return 'Choose level ' + level;
},
loading_image: '/js/jquery-option-tree/ajax-load.gif',
show_multiple: 10, // if true - will set the size to show all options
choose: ''
};
$.getJSON('/js/jquery-option-tree/get-subtree.php', function(tree) { // initialize the tree by loading the file first
$('input[name=parent_category_id]').optionTree(tree, options);
});
});
Here you can see the plugin:
https://code.google.com/p/jquery-option-tree/
I don't know that plugin, but looking at the examples there seems to be one that fits your need; Example 6 - AJAX lazy loading & setting value on each level change.
This would, in theory, just require some config options:
preselect: {'demo6': ['220','226']}, // array of default values - if on any level option value will be in this list, it will be selected
preselect_only_once: true, // prevent auto selecting whole branch when user maniputales one of branch levels
get_parent_value_if_empty: true,
attr: "id" // we'll use input id instead of name
If this doesn't fit you need though, you could initiate it from an event, like change, keyup, etc.
$(document).on('change', '#select', function() {
$('#nextSelect').val($(this).val());
})
$(document).on('change', '#nextSelect', function() {
$('#finalInput').val($(this).val());
})
Yes, you are right Mackan ! I saw that "preselect" option but I was initially unable to use it transferring the path from database to javascript, I ended up with my "newbie" solution to match the syntax:
preselect: {'parent_category_id': [0,'2','22']},
PHP
$category_path comes from DB query and is like "0,2,76,140,"
$path = explode(',', $category_path);
$preselect="";
foreach ($path as $value) {
$int = (int)$value;
if ($int != 0) $preselect.= "'". $int ."',";
else $preselect.= $int.","; // have to do this as ZERO in my case has to be without apostrophes ''
}
$preselect = "{'parent_category_id':[".$preselect."]}"
JS
var presel= <?php echo($preselect); ?>;
var options = {
preselect: (presel),
}
Any suggestion for a better code ?
Thanks a lot !!
I have two different IDs. One auto increment (using jquery) from an ID called id="H+currentRow+"(+currentRow+ is the current row). And another that does an ajax request to PHP that appends the form with an id="Z#"(# will be depending on the ID in the database).
Ive done this:
$(document).ready(function(){
$("input").change(function(){
var sum=0;
$("[id^=H]").each(function(){
sum=sum+(+parseInt(this.value));
});
var sum2=0;
$("[id^=Z]").each(function(){
sum2=sum2+(+parseInt(this.value));
});
var total = sum + sum2;
if(isNaN(total)) {
var total = 0;
}
$("#total").text(total);
});
});
But thats not working. It works for the first fields but it work for anything else thats being appended. Anyone know whats going on and why its not working?
when you bind an event direct to an element, new elements appended to page will not trigger the event. you have to bind a parent element where inputs are appended to.
Try this bind:
$('body').on('change', 'input', function () {
// your code remain the same here...
});
you can be more specifc than body, binding the event to parent elements of input.
I want to find all child classes with their id in each mother div that is listed per web page.
With that, the id's of the child div's should be grouped by the mainID - to use with an ajax post.
However, I don't even get the child's id's in jquery 1.11, let alone to group them with the mainID.
This is the code so far:
$(".main-column-name").each(function() {
var mainID = $(this).attr('id');
var subid = $(this).find(".subdiv-name").attr("id");
alert(mainID + ' ' + subid );
});
So, under the mainID should be a group of subID's - if they exist of course.
Any help is welcome!!!
You can write it to an object array and attach the children as a sub-array to this.
var mainEl = $(".main-column-name")
mainArr = [],
childArr = [];
//set the properties in an array to be used later
mainEl.each(function() {
var id = $(this).attr('id')
children = $(this).find('.subdiv-name').attr('id');
children.each(function() {
//add the child IDs to an array
childArr.push($(this).attr('id'))
});
//push all the properties into an array
mainArr.push({ 'name': id, 'children': childArr });
});
//to access the properties, use a loop
$.each(mainArr, function (i, value) {
//get the name
console.log(mainArr[i].name);
//get the children
console.log(mainArr[i].children);
//and to access the child IDs individually, use this loop within the loop
$.each(mainArr[i].children, function(c, id) {
//get the stored value for id
console.log(id)
});
});
Use this carefully though, as running a loop within a loop might cause you some performance issues if there will be lots of children and lots of parents. Someone else might be able to advise on a better way of extracting this information other than this... I will update if I think of a better method myself, but I haven't had too much time to look at it.
I have been trying to figure out this problem I've been having all day. I will give you a simplified run down of what I have been trying to do. The user enters a number, and however much the number is, is the number of categories there are going to be on the following page. Within each category, there is an input text button, along with an "Add Textbox" button that adds additional input textboxes dynamically. However, the problem here is that each category has this same setup on the same page. For example, if the user enters the number "3", then the page will vertically load three categories looking something like the following:
Category #1
(Initial user input textbox for category #1)
("Add Textbox" button to allow user to fill out another option)
Category #2
(Initial user input textbox for category #2)
("Add Textbox" button to allow user to fill out another option)
Category #3
(Initial user input textbox for category #3)
("Add Textbox" button to allow user to fill out another option)
The struggle I have been encountering is that each category button will need to have its own function, to tell the button where to place the textbox. This coupled with the fact that the number of categories changes depending on the user's input, has made things difficult. I started with the following:
var categoryCount = <?php echo $categoryCount; ?>;
var click = {};
for (var num=1;num<=categoryCount;num++) {
var newClick = "click_" + num;
click[newClick] = function() {
// some contents when this button is clicked
};
}
This JS creates an object of functions, which in JS would be able to be accessed by doing something like the following:
click['click_' + someID]();
However, the problem is that I cannot do this using the "onclick" attribute in my HTML/PHP button. I cannot access this object of functions, and cannot call any of the individual functions, obviously. I think I am going to need to rethink all of this and start again. I just can't think of another way to get this to work. Please share your ideas with me! Your help would be greatly appreciated.
For something like this, I'd write a constructor I could use like this
var cat1 = new Category(document.body);
Luckily for you, I also wrote one as an example. See the DEMO HERE. I haven't styled it at all for the new lines etc, though.
var Category = (function () {
var categoryCount = 0;
function elem(tag) { // shortcut
return document.createElement(tag);
}
function text(str) { // shortcut
return document.createTextNode(str);
}
function Category(node) {
var self = this; // this should have been var'd, oops!!
this.categoryId = ++categoryCount;
// make add button
this.addButton = elem('button');
this.addButton.appendChild(text('Add Textbox'));
this.addButton.addEventListener('click', function () {
self.addTextbox();
});
// make wrapper
this.wrapper = elem('section');
this.wrapper.setAttribute('id', 'cat'+this.categoryId);
this.wrapper.appendChild(this.addButton);
// make textboxes
this.textboxes = [];
this.addTextbox();
// append to document
if (node) {
this.append(node);
}
}
Category.prototype.addTextbox = function () {
var e = elem('textarea');
e.setAttribute('name', 'cat-'+this.categoryId+'-textbox[]');
this.textboxes.push(e);
this.wrapper.insertBefore(e, this.addButton);
};
Category.prototype.append = function (node) {
return node.appendChild(this.wrapper);
};
return Category;
}());