dynamically handle jquery events [closed] - php

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have a list of main subjects streams. let's say they are Art, Science, Commerce. For each main steam there are several subjects.
Such as for Science, subjects are Mathamatics, Bio Science and etc.
When a user select a main stream, I want to show relevent subjects for the selected main stream.
I use jquery pannels. Basicaly, when a stream is checked the releveant subjects div will be toggle.
I get Main stream and subjects are from database. they can be change(dynamic). So how to handle this?
I used following code. But this is not dynamic.
$("#Science").change(function(){
$("#Mathas").slideToggle("fast");
});
$("#Bio_cience").change(function(){
$("#b").slideToggle("fast");
});
$("#Pure_Maths").change(function(){
$("#cc").slideToggle("fast");
});
I want to make above script dynamic. How to proceed?

Answer 1

You need something common between your checkbox and the div, and you probably don't need to make another trip to the server (via ajax) to do this. Instead add an attribute when you generate the page with PHP and then use the jQuery data() method to help make the association. For example:
<input type="checkbox" data-category="a">
<input type="checkbox" data-category="b">
<div id="main-stream-art-a">Content A</div>
<div id="main-stream-art-b">Content B</div>
<script>
$(function(){
$('input[type="checkbox"]').change(function() {
var category = $(this).data('category');
$('#main-stream-art-sub-' + category).slideToggle("fast");
});
})
</script>

Answer 2

Your html will like...
<div id="1sub" class="sub">sub1</div>
<div id="2sub" class="sub">sub2</div>
<div id="3sub" class="sub">sub3</div>
<div id="stream-1" class="stream" style="display:none;">Stream 1</div>
<div id="stream-2" class="stream" style="display:none;">Stream 2</div>
<div id="stream-3" class="stream" style="display:none;">Stream 3</div>
Now,in jquery
$(".sub").click(function(){
var subClicked = $(this).attr('id');
$(".stream").hide();
$("#stream-" + subClicked.substring(0,1)).toggle();
});

Answer 3

To periodically get updates from the server, you could use AJAX something like this:
function load_subjects(){
$.ajax({
url: "http://www.example.com/loader",
cache: false,
success: function(html){
$("#items").html(html);
}
});
}
setInterval(load_subjects, 240000);

Answer 4

I depends on how much data you need to load. It's a personal choice really, if there are just a few records then you could load them into an array as the page loads, for larger data sets I would use ajax.
Something like this can load html into your #display area
$("#Main_stream_arts").change(function(){
$.ajax({
type: "POST",
url: "some.php",
dataType: "html",
data: { id: $(this).val()}
}).done(function(html) {
$("#display").html(html);
});
});
You could also change the dataType to json and output a json encodeed string from PHP
Or a shorter version - depending on how much control you want:
$("#Main_stream_arts").change(function(){
$('#display').load('some.php?id='+$(this).val());
});

Answer 5

You could create a HTML structure like this which you could duplicate for every stream. This will be helpful if you have multiple streams in your HTML.
<div class="container">
<div class="header">
<input type="checkbox" value="Electronics" id="electronics" />
<label for="electronics">Electronics</label>
</div>
</div>
Then, assuming your data in database looks like this ,
{
"Electronics": [
"VLSI",
"Tele Communication",
"Digital Circuits",
"Analog Communication"
],
"Medicine": [
"MBBS",
"MD",
"General Surgeon",
"Dental"
],
"Computers": [
"fuzzy logic",
"DataStructures",
"JavaScript"
]
}
You could get value by json["Electronics"] - that's how we'll simulate an ajax call. Then your change event would look like this.
$(".header [type=checkbox]").change(function () {
//remove all the older values - not necessary
$(".content").slideToggle(500, function () {
e.preventDefault();
$(this).remove();
});
//check if youre checking or unchecking
if (this.checked) {
//choosing header
var $header = $(this).closest(".header");
//building container element with ul for subjects in stream
var $content = $("<div/>", {
"class": "content"
}).append("<ul></ul");
var value = this.value;
//simulate ajax call -
var json = res[value];
//ajax here. result is json
//ajax success start - starting here , you could put this in the success function of ajax
//construct the lis - u could do it in any way
var $li = $.map(json, function (val, i) {
return "<li>" + val + "</li>";
});
//add the li to the uls
$content.find("ul").append($li);
//insert the content after specific header
$content.insertAfter($header).promise().done(function () {
//wait for the append to happen, else you wont get the animation
//open up the content needed
$content.slideToggle(500);
});
//ajax success end
}
});
Basically we're adding an element which contains the subjects in a stream dynamically right next to the header. So this will help if you have multiple streams in your HTML. So the resulting HTML would look like this :
<div class="container">
<div class="header">
<input type="checkbox" value="Electronics" id="electronics" />
<label for="electronics">Electronics</label>
</div>
<div class="content">
<ul>
<li>Fuzzy Logic</li>
<!--more li's like this-->
</ul>
</div>
</div>
Demo : http://jsfiddle.net/hungerpain/Uyugf/