SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pass html code as variable?

    Pass html code as variable?

    Hi all

    Is it possible to store a block of html code as a variable then use that variable to output the
    html code.

    I have a select drop down menu, when an option is selected from that menu I would like to create another menu,
    The contents of the second will be determined by the selection of the first.

    I have tried to do it like this - this doesn't work at all.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<style type="text/css" media="screen">
    	 *{
    	   margin:0;
    	   padding:0;
    	 }
    	 #wrap{
    	   margin:50px;
    	 }
    	</style>
    </head>
    
    <body>
      
      <div id="wrap">
        
        <select id="select" >
          <option value="One">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
        </select>
        
        <div id="second">
          
        </div><!-- #second -->
        
      </div><!-- #wrap -->
      
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
      <script type="text/javascript">
      
        var optionOne = '
          <select id="select" >
            <option value="OneOne">OneOne</option>
            <option value="OneTwo">OneTwo</option>
            <option value="OneThree">OneThree</option>
          </select>
        '
        var optionTwo = '
          <select id="select" >
            <option value="TwoOne">TwoOne</option>
            <option value="TwoTwo">TwoTwo</option>
            <option value="TwoThree">TwoThree</option>
          </select>
        '
        var optionThree = '
          <select id="select" >
            <option value="ThreeOne">ThreeOne</option>
            <option value="ThreeTwo">ThreeTwo</option>
            <option value="ThreeThree">ThreeThree</option>
          </select>
        '
        $('#select').change(function(){
          if((this.value) == One){
            secondSel = OptionOne;
          }
          if((this.value) == Two){
            secondSel = OptionTwo;
          }
          if((this.value) == Three){
            secondSel = OptionThree;
          }
          $('#second').html(secondSel);
        })
        
      </script>  
    </body>
    </html>

    So the option selected in the first menu will determine the contents of the second menu.

    I don't no if this is the best way to do this so I would be happy if anyone had any other ideas how to do this.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ttmt View Post
    So the option selected in the first menu will determine the contents of the second menu.
    The standard way of doing this is for the select options to all be on the page, and to use javascript to hide them when the page loads, then reveal the appropriate one that is chosen.

    HTML Code:
    <form id="order">
        <select name="main">
            <option value="">Please choose...</option>
            <option value="first">First</option>
            <option value="second">Second</option>
            <option value="third">Third</option>
        </select>
        <select name="first">
            ...
        </select>
        <select name="second">
            ...
        </select>
        <select name="third">
            ...
        </select>
    </form>
    Code javascript:
    function hideRelatedSelects(main) {
        $('option', main).each(function () {
            $('[name="' + this.value + '"]', this.form).hide();
        });
    }
     
    var mainSelect = $('#order [name="main"]');
    hideRelatedSelects(mainSelect);
     
    $(mainSelect).change(function () {
        hideRelatedSelects(this);
        $('[name="' + this.value + '"]', this.form).show();
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the code paul_wilkins, I think I'll stick with my idea - easier for me to understand.

    I have a problem with my way though - I can't seem to use the second drop down when it's added

    this doesn't work.

    Code:
    $('#second2').change(function(){
      alert((this.value));
    })
    Is this because of the way I have added it. ?

    [code]

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<style type="text/css" media="screen">
    	 *{
    	   margin:0;
    	   padding:0;
    	 }
    	 #wrap{
    	   margin:50px;
    	 }
    	 #second{
    	   margin:20px 0 0 0;
    	 }
    	</style>
    </head>
    
    <body>
    
      <div id="wrap">
    
        <select id="select" >
          <option value="One">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
        </select>
    
        <div id="second">
    
        </div><!-- #second -->
    
      </div><!-- #wrap -->
    
    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
      <script type="text/javascript">
    
        var optionOne = '<form>'+
                    '<select id="select2" >' +
                    '<option value="OneOne">OneOne</option>' +
                    '<option value="OneTwo">OneTwo</option>' +
                    '<option value="OneThree">OneThree</option>' +
                    '</select>'+
                    '</form>';
        var optionTwo = '<form>'+
                    '<select id="select2" >' +
                    '<option value="TwoOne">TwoOne</option>' +
                    '<option value="TwoTwo">TwoTwo</option>' +
                    '<option value="TwoThree">TwoThree</option>' +
                    '</select>'+
                    '</form>';
        var optionThree = '<form>'+
                    '<select id="select2" >' +
                    '<option value="ThreeOne">ThreeOne</option>' +
                    '<option value="ThreeTwo">ThreeTwo</option>' +
                    '<option value="ThreeThree">ThreeThree</option>' +
                    '</select>'+
                    '</form>';
    
        $('#select').change(function(){
          if (this.value == 'One'){
            secondSel = optionOne;
          }
          if (this.value == 'Two'){
            secondSel = optionTwo;
          }
          if (this.value == 'Three'){
            secondSel = optionThree;
          }
          $('#second').html(secondSel);
        });
        
        $('#second2').change(function(){
          alert((this.value));
        })
        
      </script>
      
    </body>
    </html>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ttmt View Post
    I can't seem to use the second drop down when it's added

    this doesn't work.

    Code:
    $('#second2').change(function(){
      alert((this.value));
    })
    Is this because of the way I have added it. ?
    It's likely to be due to there being nothing with an id of "second2" - should that be something else instead?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry that was typo

    This still doesn't work

    Code:
    $('#select2').change(function(){
          alert((this.value));
        })
    #select2 should be the select menu thats added

    Code:
    var optionOne = '<form>'+
                    '<select id="select2" >' +
                    '<option value="OneOne">OneOne</option>' +
                    '<option value="OneTwo">OneTwo</option>' +
                    '<option value="OneThree">OneThree</option>' +
                    '</select>'+
                    '</form>';

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<style type="text/css" media="screen">
    	 *{
    	   margin:0;
    	   padding:0;
    	 }
    	 #wrap{
    	   margin:50px;
    	 }
    	 #second{
    	   margin:20px 0 0 0;
    	 }
    	</style>
    </head>
    
    <body>
    
      <div id="wrap">
    
        <select id="select" >
          <option value="One">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
        </select>
    
        <div id="second">
    
        </div><!-- #second -->
    
      </div><!-- #wrap -->
    
    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
      <script type="text/javascript">
    
        var optionOne = '<form>'+
                    '<select id="select2" >' +
                    '<option value="OneOne">OneOne</option>' +
                    '<option value="OneTwo">OneTwo</option>' +
                    '<option value="OneThree">OneThree</option>' +
                    '</select>'+
                    '</form>';
        var optionTwo = '<form>'+
                    '<select id="select2" >' +
                    '<option value="TwoOne">TwoOne</option>' +
                    '<option value="TwoTwo">TwoTwo</option>' +
                    '<option value="TwoThree">TwoThree</option>' +
                    '</select>'+
                    '</form>';
        var optionThree = '<form>'+
                    '<select id="select2" >' +
                    '<option value="ThreeOne">ThreeOne</option>' +
                    '<option value="ThreeTwo">ThreeTwo</option>' +
                    '<option value="ThreeThree">ThreeThree</option>' +
                    '</select>'+
                    '</form>';
    
        $('#select').change(function(){
          if (this.value == 'One'){
            secondSel = optionOne;
          }
          if (this.value == 'Two'){
            secondSel = optionTwo;
          }
          if (this.value == 'Three'){
            secondSel = optionThree;
          }
          $('#second').html(secondSel);
        });
        
        $('#select2').change(function(){
          alert((this.value));
        })
        
      </script>
      
    </body>
    </html>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ttmt View Post
    Sorry that was typo

    This still doesn't work
    One at a time, these issues are resolved by fixing one thing at a time.

    Quote Originally Posted by ttmt View Post
    Code:
    $('#select2').change(function(){
          alert((this.value));
        })
    The next issue is that when that above section of code is executed, the "select2" identifier does not yet exist on the page. You can deal with that by making use of jQuery's .live() method instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still having problems here so I have an example that closer resembles what I'm trying to do.

    http://www.ttmt.org.uk/

    So I have a select menu thats adds a div which contains another select menu. The contents of the second select menu in the div is determined by the option selected in the first menu.

    The problem I'm having now is I need to capture the value selected in the second menu in the div

    Code:
    $$ = $("<div class='selectDiv'></div>").appendTo('#contents');
    $$.append(
    	$('<form />').html(theMenu).change(function(){
    		var index = $(this).parent().index();
    		alert(this.value);
    	})
    )
    It's currently alerting 'undefined', is this because it isn't available when the script is calling it?

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<style type="text/css" media="screen">
    	 *{
    	   margin:0;
    	   padding:0;
    	 }
    	 #wrap{
    	   width:500px;
    	   margin:50px auto 0 auto;
    	 }
    	 .selectDiv{
    	   background:red;
    	   height:100px;
    	   margin:10px 0 0 0;
    	 }
    	 .selectDiv .divSelect{
     	   margin:20px;
     	 }
    	</style>
    </head>
    
    <body>
      <div id="wrap">
        <form method="" action="">              
          <select id="addDiv">
            <option value="One">One</option>
            <option value="Two">Two</option>
            <option value="Three">Three</option>
          </select>
        </form>
        
        <div id="contents">
          
        </div><!-- #contents -->
        
      </div><!-- #wrap -->
    
    
    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="code.js" type="text/javascript"></script>
    </body>
    </html>

    jQuery
    Code:
    window.one=
      '<select class="divSelect">'+
      '<option value="One-One">One-One</option>'+
      '<option value="One-Two">One-Two</option>'+
      '<option value="One-Three">One-Three</option>'+
      '</select>';
    window.two=
      '<select class="divSelect">'+
      '<option value="Two-One">Two-One</option>'+
      '<option value="Two-Two">Two-Two</option>'+
      '<option value="Two-Three">Two-Three</option>'+
      '</select>';
    window.three=
      '<select class="divSelect">'+
      '<option value="Three-One">Three-One</option>'+
      '<option value="Three-Two">Three-Two</option>'+
      '<option value="Three-Three">Three-Three</option>'+
      '</select>';
    
    $('#addDiv').change(function(){
    	if((this.value) == 'One'){
    		theMenu = window.one;
    	}
    	if((this.value) == 'Two'){
    		theMenu = window.two;
    	}
    	if((this.value) == 'Three'){
    		theMenu = window.three;
    	}
    	//
    	$$ = $("<div class='selectDiv'></div>").appendTo('#contents');
    	$$.append(
    		$('<form />').html(theMenu).change(function(){
    			var index = $(this).parent().index();
    			alert(this.value);
    		})
    	)
    })

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ttmt;
    It's currently alerting 'undefined', is this because it isn't available when the script is calling it?
    Nope, what's happening there is that the change even it attached to the form element.
    You'll be wanting to apply that advice I gave earlier about using the live() method instead.
    Last edited by paul_wilkins; Jan 18, 2012 at 03:08.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    paul_wilkins, I did look at the live() method on the jQuery site but the documentation said it's deprecated and replaced by on(). I couldn't get on() to work.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ttmt View Post
    paul_wilkins, I did look at the live() method on the jQuery site but the documentation said it's deprecated and replaced by on(). I couldn't get on() to work.
    Well what did you try?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't keep it, I'll try and do it again now.

  12. #12
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've just done this, and it's working now - I'll try it in the proper code and see what happens

    Code:
    window.one=
      '<select class="divSelect">'+
      '<option value="One-One">One-One</option>'+
      '<option value="One-Two">One-Two</option>'+
      '<option value="One-Three">One-Three</option>'+
      '</select>';
    window.two=
      '<select class="divSelect">'+
      '<option value="Two-One">Two-One</option>'+
      '<option value="Two-Two">Two-Two</option>'+
      '<option value="Two-Three">Two-Three</option>'+
      '</select>';
    window.three=
      '<select class="divSelect">'+
      '<option value="Three-One">Three-One</option>'+
      '<option value="Three-Two">Three-Two</option>'+
      '<option value="Three-Three">Three-Three</option>'+
      '</select>';
    
    $('#addDiv').change(function(){
    	if($(this).val() == 'One'){
    		theMenu = window.one;
    	}
    	if($(this).val() == 'Two'){
    		theMenu = window.two;
    	}
    	if($(this).val() == 'Three'){
    		theMenu = window.three;
    	}
    	//
    	$$ = $("<div class='selectDiv'><form>"+theMenu+"</form></div>").appendTo('#contents');
    	
    	$('.divSelect').on('change', function(){
    		alert($(this).val());
    	})
    	
    })
    I would really like to do it this way so the on() function is outside the function adding the form but this doesn't work.

    Code:
    window.one=
      '<select class="divSelect">'+
      '<option value="One-One">One-One</option>'+
      '<option value="One-Two">One-Two</option>'+
      '<option value="One-Three">One-Three</option>'+
      '</select>';
    window.two=
      '<select class="divSelect">'+
      '<option value="Two-One">Two-One</option>'+
      '<option value="Two-Two">Two-Two</option>'+
      '<option value="Two-Three">Two-Three</option>'+
      '</select>';
    window.three=
      '<select class="divSelect">'+
      '<option value="Three-One">Three-One</option>'+
      '<option value="Three-Two">Three-Two</option>'+
      '<option value="Three-Three">Three-Three</option>'+
      '</select>';
    
    $('#addDiv').change(function(){
    	if($(this).val() == 'One'){
    		theMenu = window.one;
    	}
    	if($(this).val() == 'Two'){
    		theMenu = window.two;
    	}
    	if($(this).val() == 'Three'){
    		theMenu = window.three;
    	}
    	//
    	$$ = $("<div class='selectDiv'><form>"+theMenu+"</form></div>").appendTo('#contents');
    	
    })
    
    $('.divSelect').on('change', function(){
    	alert($(this).val());
    })

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    The second way can be done when you use .on() with a selector that exists, such as the document, and specify in the parameters the selector to attach it to.

    The .on() documentation page says for you to see the .live() documentation page for help with the conversion.

    The syntax you need to use is:

    Code:
    $(document).on(events, selector, data, handler);
    The reason why what your attempted to use doesn't work, is that you didn't have a valid selector to apply .on() to.

    This will work:

    Code javascript:
    $(document).on('change', '.selectDiv', function() {
        alert($(this).val());
    });

    It will still not alert anything useful, because the this keyword is referencing the div element (and not a form field), but you should be able to make further progress from here.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help paul_wilkins, I should be able to muddle through from here.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •