Create div append and hide - Good practice?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

Create div append and hide - Good practice?

Post 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.
User avatar
gautamz07
Forum Contributor
Posts: 331
Joined: Wed May 14, 2014 12:18 pm

Re: Create div append and hide - Good practice?

Post 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.
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

Re: Create div append and hide - Good practice?

Post 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.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Create div append and hide - Good practice?

Post 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.
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

Re: Create div append and hide - Good practice?

Post 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.
Post Reply