SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    returned html event calls

    I am using the code below to display HTML from the click of a radio button. The displayed HTML uses additional jQuery event calls, but the event calls (keyup or click) in the generated HTML will not work.

    Code JavaScript:
    	var ship_type = '';
    	$('input[name^=pickup_delivery_]').click
    	(
    	function()
    	{
    		var i = this.name.substr(this.name.lastIndexOf('_') + 1);
    		if ($(this + ':checked').val() == 0)
    		{
    			ship_type = '<input type="hidden" name="product_shipping_1" id="product_shipping_'+ i +'" value="fixed|0.00" />';
    		}
    		else
    		{
    			ship_type =
    			'Postal code: <input type="text" name="postal_code_' + i + '" id="postal_code_' + i + '" size="7" value="" />' +
                '<p><input type="button" class="button1" name="calculate_shipping_' + i + '" id="calculate_shipping_' + i + '" value="Calculate Shipping" /></p>' +
                '<span id="product_shipping_' + i + '">' +
                '</span>';
    		}
    		$('#shipping_type_' + i).html(ship_type);
    	});
     
     
    	$('input[id^=postal_code_]').keyup
    	(
    	function()
    	{
    		var postal_code = $(this).val();
    		var i = this.name.substr(this.name.lastIndexOf('_') + 1);
    		postal_code = postal_code.replace(/\s+/g, '');
    		postal_code = postal_code.toUpperCase();
    		$(this).val(postal_code);
     
    	});

    Code HTML4Strict:
                <p> <strong>Shipping information:</strong><br />
     
    			<input type="radio" name="pickup_delivery_1" value="0" /> Product Pickup
    &nbsp;
    			<input type="radio" name="pickup_delivery_1" value="1" /> Product Delivery
    			</p>
    			<p id="shipping_type_1">
    			</p>
    Last edited by descarte; Mar 7, 2011 at 09:41.

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At what point are you executing your bind? if the document isn't ready, the bind listener will not work....

  3. #3
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry. I do have the document ready. I forgot to include it. So...

    Code JavaScript:
    $(document).ready
    (
    function()
    {
    // code from original post
    });

  4. #4
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, (duh) I had a moment where I was not paying attention. The problem lies with a scoping issue in your generated code. As it is added to the page after the bind, your event listener will not recognize it. You have the option of doing 2 things:
    1. You the "live" method instead, that also detects any future instantiations on the page of the target element. $(elem).live('keyup click', functio() {});
    2. place your second bind listener at the end of the function that gets executed, therefore after you have already inserted the new element

    So you would end up with something that looks like this for example:
    $(document).ready(function() {
    var ship_type = '';
    $('input[name^=pickup_delivery_]').click
    (
    function()
    {
    var i = this.name.substr(this.name.lastIndexOf('_') + 1);
    if ($(this + ':checked').val() == 0)
    {
    ship_type = '<input type="hidden" name="product_shipping_1" id="product_shipping_'+ i +'" value="fixed|0.00" />';
    }
    else
    {
    ship_type =
    'Postal code: <input type="text" name="postal_code_' + i + '" id="postal_code_' + i + '" size="7" value="" />' +
    '<p><input type="button" class="button1" name="calculate_shipping_' + i + '" id="calculate_shipping_' + i + '" value="Calculate Shipping" /></p>' +
    '<span id="product_shipping_' + i + '">' +
    '</span>';
    }
    $('#shipping_type_' + i).html(ship_type);


    $('input[id^=postal_code_]').keyup
    (
    function()
    {
    var postal_code = $(this).val();
    var i = this.name.substr(this.name.lastIndexOf('_') + 1);
    postal_code = postal_code.replace(/\s+/g, '');
    postal_code = postal_code.toUpperCase();
    $(this).val(postal_code);

    });

    });
    });

  5. #5
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks TommiChi for the help! Number 2 worked nicely.


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
  •