Please pardon my naive query. I'm learning JS.
Flow of my front end:
1-- JqGrid table
2-- Add button at the bottom XYZ
3-- On click of XYZ create a div
4-- Append Div
5-- Create Form with text field, and append this form to the div created on 3
6-- Create Dialog box with the form, submit, Enjoy.
This is working fine.
However, Every now and then I would see form text field on the HTML page, which is not what I had intended. So I'm hiding it.
I've number of things I'm appending now. Is hiding all of them a good practice? Or is it a dirty hack?
My code looks like:
Code: Select all
$("#grid_illume").navButtonAdd('#pager_illume',{
caption:"Add Analysis",
onClickButton: function()
{
if(!$("#Form_dialog").length ) {
var div = document.createElement('div'); //create_div element
$(div).attr('id', "Form_dialog");
document.body.appendChild(div); //add it to the html page
$(div).attr('title',"Create Pipeline");
$form = $('<form id="pipeline_form" name="pipleline_dialog" method="post" > ' +
"<fieldset>"+
//for="name" -->here acts as id
'<label for="pipeline_name">' + 'Title:' + "</label>"+
'<input type="text" name="pipeline_name" id="pipeline_name" value="" class="text ui-widget-content ui-corner-all"> '+
"</fieldset>"+
"</form>");
$(div).append($form).hide(); //append form to the div created.. to appear in the dialog box and hide
//add sortable div
if(!$('#sortable1').length){
var new_sort=document.createElement('div');
$(new_sort).attr('id', "select-tools");
$('#pipeline_form').append(new_sort);
$o_list=$('<ol id= "sortable1">'+'</ol>'
);
$().append().hide(); //again hide
} //ends check for div of sort
//
}//check ends for legnth
}
}); //ends pager_illume
I hope I'm not following any goofy coding practice?
Please guide, and enlighten here.