Page 1 of 1

Create div append and hide - Good practice?

Posted: Thu Dec 10, 2015 11:37 am
by publicGenome
Hi There,

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

In my above code I'm hiding the sort div created, the form created, and would hide whatever I create to prevent showing on the page.

I hope I'm not following any goofy coding practice?
Please guide, and enlighten here.

Re: Create div append and hide - Good practice?

Posted: Sat Dec 12, 2015 3:44 pm
by gautamz07
I would ideally create the form in the HTML , also you can create the form in a separate html document and use jQuerys load() function. but whats the need for you to generate the Div in JS ? can't you create it in HTML and then use jQuerys show() and hide() method to show or hide the elements depending on weather you want the form to be visible.

Re: Create div append and hide - Good practice?

Posted: Sat Dec 12, 2015 4:36 pm
by publicGenome
Hi Gautam,

Thanks for your reply.
I don't know, nothing specific to use it in JS.
I learned that way, so started implementing on the application.

Is creating div a bad practice in JS, and hiding?
PS: I'm a newbie, kindly pardon my naive questions.

Re: Create div append and hide - Good practice?

Posted: Sat Dec 12, 2015 5:02 pm
by Celauran
I agree with gautamz; I see no real benefit to creating these elements in your JavaScript. You're adding complexity but do not appear to be getting anything in return.

Re: Create div append and hide - Good practice?

Posted: Sat Dec 12, 2015 5:06 pm
by publicGenome
Celauran wrote:I agree with gautamz; I see no real benefit to creating these elements in your JavaScript. You're adding complexity but do not appear to be getting anything in return.
Hi Celauran,

Thank you for your reply. :)
I shall make necessary changes in the code.