There is 2 function that i want to make here, and yes it still messy. The idea is how to make a parent and child situation. The first element that is generate using append will show a button that will create child(this work). And then i added jquery dialog ui as a way to input value by append it to the parent and the child element, i have success on the parent element but not in the child element
##Button Generate Parent element
<button name="add_polis_prop" id="add_polis_prop" onclick="checkValue()" class="common-button blue fright" value="add_polis_prop">Next</button>
##Generate The parent
//Generate Main Section
$('#add_prop_insured').bind('click', function(){
var numMain = $('.content-object').length;
var newNumMain = new Number(numMain + 1);
//if numMain value not 4
if (numMain == '6'){
$("#add_prop_insured").hide();
}else{
$(".results-01").show();
$(".result_object").hide();
$('.results-01').append(
"<div class='content-object border-gray01 border-radius-common fix'>"+
"<p class='fix'>"+
"<input type='button' title='"+newNumMain+"' class='add_sub common-button fright blue' value='Tambah Sub'/>"+
"<input type='button' class='remove_main01 fright common-button blue' value='Remove'/>"+
"<a href='#' class='toggleLink common-link blue' style='margin:0 0 0 20px'>"+showText+"</a>"+
"</p>"+
"<div class='toggle'>"+
"<p id='prop_obj"+newNumMain+"'>"+
"<label><span>Object<em>*</em></span></label>"+
"<input type='hidden' class='section"+newNumMain+"' name='' value='"+newNumMain+"'/>"+
"<span class='dials'>"+
"<a href='#' id='dial-"+newNumMain+"' title='"+newNumMain+"' class='common-link'>Add Object</a></p>"+
"</span>"+
"<div class='result_object-"+newNumMain+"'></div>"+
"</p>"+
"<p class='fix'>"+
"<input type='button' title='"+newNumMain+"' class='add-sub-"+newNumMain+" common-button fright blue' value='Tambah Sub'/>"+
//"<a href='#' class='add_sub common-link blue' title='"+newNumMain+"' style='margin:0 0 0 20px'>Add Sub</a>"+
"<input type='button' class='remove_main01 fright common-button blue' value='Remove'/>"+
"</p>"+
"<div class='results_prop_subs_"+newNumMain+"'></div>"+
"</div>"+
"</div>"
)//end append
$('[class*=result_object]').css({'margin-left':'190px'});
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
}//end if
})//end function
## Generate Child Element
//Generate Sub Sections
$('[class^=add-sub]').live('click', function(){
var theLink = $(this).attr('title');
var numSubs01 = $('.subs').length;
var section01 = $(".section1").val();
var newNumSubs01 = new Number(numSubs01 + 1);
if (newNumSubs01 == '6'){
$(".add_sub").hide();
}else{
$(this).each(function(){
$('#subdialog').attr("title",theLink+newNumSubs01);
$('.results_prop_subs_'+ theLink).append(
"<div class='subs' style='padding:10px'>"+
"<p id='prop_obj-"+theLink+newNumSubs01+"'>"+
"<label><span>Object<em>*</em></span></label>"+
"<input type='hidden' class='subsection"+theLink+"' name='' value='"+theLink+"'/>"+
"<span class='subdials'>"+
"<a href='#' id='subdial-"+theLink+newNumSubs01+"' title='"+theLink+newNumSubs01+"' class='common-link'>Add Object</a></p>"+
"</span>"+
"<div class='sub_result_object-"+theLink+newNumSubs01+"'></div>"+
"</p>"+
"<p>"+
"<input type='button' class='remove_sub_1 fright common-button blue' value='Remove'/>"+
"</p>"+
"</div>"
)
$('.remove_sub_1').live('click', function(){
$(this).parents('.subs').remove();
});
//Hack So The Show And Hide Can Work
$('*.note').hide();
})
}
})
/*Show Hide All Note*/
var showText='Show Note';
var hideText='Hide Note';
// initialise the visibility check
var is_visible = false;
// capture clicks on the toggle links
$('a.toggleLink').live('click', function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');
// return false so any link destination is not followed
return false;
});
##Add dialog to parent(this work)
/*Generate Jquery Dialog For Inserting Objek Pertanggungan On Main Section*/
$('.dials a').live('click', function() {
var $link = $(this);
var $links = $link.attr('title');---->this return the value i needed
var options = {
autoOpen: false,
height: 300,
width: 600,
modal: true,
buttons: {
'Add Object': function(){
$('.bla :checkbox:checked').each(function() {
alert($links);---->this return the value i needed
$('.result_object-'+$links).append(
"<div class='theobjects'>"+
"<p>"+
$(this).next('label').text()+
"<input type='hidden' class='op_type_id' name='object["+$links+"][op_type_id]' value='" +
$(this).val()+
"'/>"+
"<a class='remove' style='margin:0 0 0 20px'>remove</a>"+
"</p>"+
"</div>"
);
});
$('.bla :checkbox:checked').attr('checked', '');
$(this).dialog('close');
},
'Cancel': function(){
$(this).dialog('close');
},
}
};
//Show the dialog
$(this).each(function(){
var $dlgs = $('#dialog-' + $links).dialog(options);
$dlgs.dialog("open");
return false;
})
//remove the object
$('a.remove').live('click', function(){
$(this).each(function(){
$(this).parents('.theobjects').remove();
$(".add_sub").show();
});
});
})
##Generate Dialog for child element(this not work)
$('.subdials a').live('click', function() {
var $link = $(this);
var $links = $link.attr('title');
alert($links);---->this return the value i needed
var options = {
autoOpen: false,
height: 300,
width: 600,
modal: true,
buttons: {
'Add Object': function(){
$('.bla :checkbox:checked').each(function() {
alert($links);---->this doesn't return the value i needed
$('.sub_result_object-'+$links).append(
"<div class='theobjects'>"+
"<p>"+
$(this).next('label').text()+
"<input type='hidden' class='op_type_id' name='object["+$links+"][op_type_id]' value='" +
$(this).val()+
"'/>"+
"<a class='remove' style='margin:0 0 0 20px'>remove</a>"+
"</p>"+
"</div>"
);
});
$('.bla :checkbox:checked').attr('checked', '');
$(this).dialog('close');
},
'Cancel': function(){
$(this).dialog('close');
},
}
};
//Show the dialog
$(this).each(function(){
var $dlgs = $('#subdialog').dialog(options);
$dlgs.dialog("open");
return true;
})
//remove the object
$('a.remove').live('click', function(){
$(this).each(function(){
$(this).parents('.theobjects').remove();
$(".add_sub").show();
});
});
})