1

I actually have a dropdown menu with different actions such as : create task, edit task, delete task.

What I thought about is to manually set the form content by using .html() on the main content div (though I have some difficulties trying to escape the double quotes).

What is the best method in term of performance here ?

  • Manually set the html content for each case using html() : eg html("htmlcode:form and input")
  • Using load() function to get the content from an external file
  • Hide and show different inputs according to the case (a lot to hide and show in my case)

Thanks for your help

Code : 

$('#dropdown-choice').click(function()
{
$('#maincontent').html
(
"<form class='form-newproject'>             
<fieldset>
<legend>Change email</legend>                                    
<label>New email</label>  
<input class=\"form-control\" type=\"email\" name=\"newemail\">
<label>Confirm email</label>
<input class=\"form-control\" type=\"email\" name=\"newemailconfirm\">
<label>Password</label>
<input class=\"form-control\" type=\"password\" name=\"passwordcheck\"> 
</fieldset>
</form>"
)
});
adaba
  • 374
  • 1
  • 18

2 Answers2

1

I think the difficult with escaping is because javascript does not support multiline string variables. See Creating multiline strings in JavaScript

As for your problem, you have many options.

1.- As you mentioned, hide and show is a great option. Just specify some forms with IDs and show them as wanted. Note that .form-newproyect elements should start hidden. So you CSS may include a .form-newproyect {display:none} rule.

<form id="form1" class="form-newproyect">...</form>
<form id="form2" class="form-newproyect">...</form>
<form id="form3" class="form-newproyect">...</form>

$('#dropdown-choice').click(function(){
  //maybe a case statement
  //suppose you need only #form2:
  jQuery(".form-newproyect").hide(); //hide all other forms
  jQuery("#form2").show(); //display the needed one
}

2.- A second approach is to use a templating system. You may define some templates:

<script type="text/template" id="form1Tpl">
  <form id="form1" class="form-newproyect">...</form>
</script>

<script type="text/template" id="form2Tpl">
  <form id="form1" class="form-newproyect">...</form>
</script>

<script type="text/template" id="form2Tpl">
  <form id="form1" class="form-newproyect">...</form>
</script>

We use <script type="text/template" id=""> so the content is not rendered nor interpreted as javascript, but its content can still be retreived by javascript ;)

Then you call it as:

$('#dropdown-choice').click(function(){
  //maybe a case statement
  //suppose you need only #form2:
  var formTemplate = jQuery("#form2Tpl").html(); //get the template
  jQuery("#form-container").html(formTemplate); //replace the form-container html
}

We should measure both, but I think the first has a better performance.

As for the load() approach, a remote call like that will be slower than the other options.

Community
  • 1
  • 1
aldo.roman.nurena
  • 1,323
  • 12
  • 26
0

1) Why are you having trouble escaping? Does \" not work fine for you?

2) Manually setting html content seems efficient. Using load() will require an HTTP request to be sent and received/processed which seems like the slowest option. Your last option of case:'s seems perfectly efficient too.

Don't forget how high-level all of this is. I may be misunderstanding, but if you're worried about having 100 case:'s or if/else:'s being inefficient... don't. :)

HC_
  • 1,040
  • 10
  • 23
  • For the second half, I don't know, but for your escaping issues, you could try to use like `.html('//content')` so that `"`s don't even need to be escaped. (example: `alert('"hey!"');` will alert `"hey!"` – HC_ Oct 17 '13 at 21:48