Hide a container element which is generated from jQuery dynamically...Please any ideas...
Hi
I am new to jQuery, Problem I have is, I want to hide a container when any container element is clicked and open a new div and show its values. Whats the best way to do it...please any ideas.
(function($){
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
})(jQuery);
//firstLoad function runs on document ready
//it loads the login form into the main div and slides
//the container down
(function($){
$.fn.firstLoad = function(){
return this.each(function() {
$("#container").slideUp("slow", function(){
$("#container").slideDown("slow");
});
});
};
})(jQuery);
// /todoBuild takes the loginResponse from the server
//manipulates the object dropping excess keys and adding new relevant ones for
//the intial todo list call
(function($){
$.fn.todoBuild = function(loginResponse, rowsReturned){
var todoObj = loginResponse;
if(!rowsReturned){
rowsReturned = 1000;
}
this.each(function() {
userName = todoObj.USERFULLNAME;
//remove timestamps and other unneeded data
delete todoObj.ELAPSEDUVTIME;
delete todoObj.USERFULLNAME;
delete todoObj.WEBSERVICETIME;
delete todoObj.UONETTime;
//change the SUBTOCALL so TODO function is called
todoObj.SUBTOCALL = "G2.WEB.GET.TODO.SUB";
//add default options to load records from webservice
todoObj.SCREENID="TODO";
todoObj.REFRESH="1";
todoObj.BROWSERID="1";
todoObj.PAGENO="1";
todoObj.ROWS=rowsReturned;
return false;
});
return todoObj;
};
})(jQuery);
//todoParse takes the todoResponse from the server
//changes from string to object, extracts the JSON array from DATALIST
//and calls todoListen to handle output
(function($){
$.fn.todoParse = function(todoPass){
var todoPost = todoPass;
return this.each(function() {
$.ajax({
//type of communication
type: "POST",
//action for form
url: "myurl.com",
data: "request="+ todoPost,
//type of data passed in
contentType: "application/x-www-form-urlencoded; charset=utf-8",
//enable cross domain
crossDomain: "true",
//data type returned from webservice
dataType: "xml",
//if todo POST was successful
success: function(xml){
//parse the JSON todoResponse
var todoResponse = $(xml).find('string').text();
todoResponse = $.parseJSON(todoResponse);
var recordLimit = todoResponse.RECORDCOUNT;
var todoArray = todoResponse.DATALIST;
todoArray = $.parseJSON(todoArray);
$("#main").slideUp('slow',function(){
$(this).todoDraw(todoArray, 600);
$("#main").on("click", "#more", function(){
$(this).todoDraw(todoArray, 600);
});
$("#main").on("click", ".row", function(){
$(this).todoDetail();
});
});
This Yellow line is code I have added on a each row....code continues below:
(function($){
$.fn.todoDraw = function(todoArray, recordLimit){
//convert recordLimit to integer for testing iterator
recordLimit = parseInt(recordLimit);
var drawnList ="";
var noMore=false;
var countCheck = counter;
if((countCheck+25) >= (recordLimit-1)){counter = recordLimit-1; noMore = true;}
else{
counter+=25;}
this.each(function(){
//remove any previously displayed TODO items
$(".row").remove();
$("#innerContainer").attr('id', 'listContainer'); // changing the id of the innerContainer so it no
// no longer has the shadow/style on the ENTIRE list
//set up the todo view
$("#blackHead").html("TODO — "+userName);
var taskIcon;
var taskType;
//populate divs with array items delimited by counter
for(i=0;i<counter;i++){
if(i <= recordLimit){
switch(todoArray[i].TYPE)
{
case 'C':
taskIcon = "img/img_icon_contact.png";
taskType = "Contact";
break;
case 'Task':
//task
taskIcon = "img/img_icon_clipboard.png";
taskType = "Task";
break;
case 'Email':
//email
taskIcon = "img/img_icon_email.png";
taskType = "Email";
break;
case 'Phonecall':
//phonecall
taskIcon = "img/img_icon_cellphone.png";
taskType = "Phone call";
break;
case 'L':
//lead
taskIcon = "img/img_icon_exclamationmark.png";
taskType = "Potential Lead";
break;
case 'Appointment':
//appointment book
taskIcon = "img/img_icon_calendar.png";
taskType = "Appointment";
break;
default:
taskIcon = "img/img_icon_exclamationmark.png";
}
if(todoArray[i].INTEREST == ""){
var taskInterest = "No interest specified";
} else {
var taskInterest = todoArray[i].INTEREST;
}
if(todoArray[i].FULLNAME == ""){
var taskFullName = "To Do Task";
} else {
var taskFullName = todoArray[i].FULLNAME;
}
drawnList +=
"<div class='row'>" +
"<div class='iconDIV" + "'>" + "<img src =" + taskIcon + ">" + "<p id='taskName'>" + taskType + "</p>" + "</div>" +
"<div class='sentByName" + "'>" + taskFullName + "</div>" +
"<div class='taskInterest" + "'>" + taskInterest + "</div>" +
"<hr>" +
"<div id='recordID' >" + todoArray[i].TYPE + ":" + todoArray[i].RID + "</div>" +
//"Task: " + todoArray[i].ID + "<br />" +
//"Record #: " + todoArray[i].RID + "<br />" +
"<div class='timeDateSpan" + "'>" +
"<img src='img/img_icon_clock.png'>" + "</img>" +
"<span class='taskDate'>" + todoArray[i].TODODATE + "</span>" +
"<span class='taskTime'>" + todoArray[i].TODOTIME + "</span>" +
"</div>" +
"<div class='clear'>" + "</div>" +
"</div>";
}
}
return false;
});
if(noMore == false){drawnList+= $(this).moreDraw();}
$("#main").html(drawnList);
$("#main").slideDown("slow");
};
})(jQuery);
and I have this function added below which basically launches an alert popup when i click on any item:
/// This fucntion will be called when user clicks an item in the todo list
(function($){
$.fn.todoDetail = function(){
return this.each(function() {
alert($('#recordID',this).text());
});
};
})(jQuery);
What i want is, when a user clicks on any of the <div> I have to show a detail of that element, kinda like master detail ... so I need to hide parent div container and show another child one.
Any Help, Please.
Regards
Uzwa