jQuery no javascript working inside of ajax created tabs

Question

I have these jQuery tabs that pull in content through ajax when clicked on, but for some reason none of the stuff seems to be working, and I had lots of stuff in it.

<li><a href="page.php">Page</a></li>

And the page has a bunch of elements in it suchly

   <form id="create_upload_image_form_dialog_<?php echo $u_row['type']; ?>" onsubmit="return false;" method="post" action="<?php echo $urlbase; ?>/build/scripts/upload" enctype="multipart/form-data">
        <input onchange="create_upload_image_dialog('#create_upload_image_form_dialog_<?php echo $u_row['type']; ?>','<?php echo $u_row['type']; ?>','<?php echo $urlbase; ?>/themes/<?php echo $_SESSION['theme_root']; ?>/Library/Themes/<?php echo str_replace('+', '%20', urlencode($_SESSION['theme_name'])); ?>.theme/<?php echo $u_row['image_path'] . $u_row['image_name']; ?>.png');" type="file" name="imgfile" id="create_image_upload_<?php echo $u_row['type']; ?>" />        
        <input type="hidden" value="image_style_scale" name="image_style" id="image_style_dialog_<?php echo $u_row['type']; ?>"/>
        <input type="hidden" name="image_type" value="<?php echo $u_row['type']; ?>" />
        <input type="hidden" name="image_negative" value="" id="image_negative_dialog_<?php echo $u_row['type']; ?>"/>
        <input type="hidden" name="image_grayscale" value="" id="image_grayscale_dialog_<?php echo $u_row['type']; ?>"/>
    </form>
    Optimal image size is <?php echo $u_row['image_x'] * 2; ?>x<?php echo $u_row['image_y'] * 2; ?>.
</span>        
<span><form id="create_upload_image_form_<?php echo $u_row['type']; ?>" onsubmit="create_upload_image(this,'<?php echo $u_row['type']; ?>','<?php echo $urlbase; ?>/themes/<?php echo $_SESSION['theme_root']; ?>/Library/Themes/<?php echo str_replace('+', '%20', urlencode($_SESSION['theme_name'])); ?>.theme/<?php echo $u_row['image_path'] . $u_row['image_name']; ?>.png');return false;" method="post" action="<?php echo $urlbase; ?>/build/scripts/upload" enctype="multipart/form-data">
    <?php if (false/* strlen($u_row['image_default_path']) > 0 */) { ?><span><input type="button" value="Download original image" onClick="download_image();"/></span><?php } ?>
        <span class="resize_method">
            <button onclick="create_reset_image('<?php echo $u_row['type']; ?>','<?php echo $default; ?>');" >Reset</button>
            <button onclick="$('#upload_image_dialog_<?php echo $u_row['type']; ?>').dialog('open');return false;" id="create_upload_button-<?php echo $u_row['type']; ?>">Upload</button>
            <input onchange="create_update_elements('<?php echo $u_row['type']; ?>',this);" type="radio" name="image_style_<?php echo $u_row['type']; ?>" id="image_style_scale_<?php echo $u_row['type']; ?>" value="image_style_scale" checked="checked"/><label for="image_style_scale_<?php echo $u_row['type']; ?>">Scale</label>
            <input onchange="create_update_elements('<?php echo $u_row['type']; ?>',this);" type="radio" name="image_style_<?php echo $u_row['type']; ?>" id="image_style_stretch_<?php echo $u_row['type']; ?>" value="image_style_stretch"/><label for="image_style_stretch_<?php echo $u_row['type']; ?>">Stretch</label>
            <input onchange="create_update_elements('<?php echo $u_row['type']; ?>',this);" type="radio" name="image_style_<?php echo $u_row['type']; ?>" id="image_style_zoom_<?php echo $u_row['type']; ?>" value="image_style_zoom"/><label for="image_style_zoom_<?php echo $u_row['type']; ?>">Zoom</label>
            <input onchange="create_update_elements('<?php echo $u_row['type']; ?>',$('#image_style_<?php echo $u_row['type']; ?>'));" type="checkbox" name="image_negative" id="image_negative_<?php echo $u_row['type']; ?>" value="true"/><label for="image_negative_<?php echo $u_row['type']; ?>">Negative</label>
            <input onchange="create_update_elements('<?php echo $u_row['type']; ?>',$('#image_style_<?php echo $u_row['type']; ?>'));" type="checkbox" name="image_grayscale" id="image_grayscale_<?php echo $u_row['type']; ?>" value="true"/><label for="image_grayscale_<?php echo $u_row['type']; ?>">Grayscale</label>
            <button id="okay_button_<?php echo $u_row['type']; ?>" onclick="$('create_upload_image_form_<?php echo $u_row['type']; ?>').submit();">Save</button>
        </span>
        <br />
        <span style="display:none;">
            <label for="image_background_color_<?php echo $u_row['type']; ?>">Background color</label><input type="text" name="image_background_color" id="image_background_color_<?php echo $u_row['type']; ?>"/>
            <label for="image_tint_color_<?php echo $u_row['type']; ?>">Tint color</label><input type="text" name="image_tint_color" id="image_tint_color_<?php echo $u_row['type']; ?>"/>
        </span>
        <input type="hidden" name="image_type" value="<?php echo $u_row['type']; ?>" />
        <input type="hidden" id="image_style_<?php echo $u_row['type']; ?>" name="image_style" value="image_style_scale" />
    </form></span><br />

And I have jQuery UI making these elements look really nice and I have some other UI things inside of here too that don't work. Here's the JS

$('#create_theme').tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. ");
            }
        }
    });
    $('.tab_images').accordion({
        autoHeight: false,
        header: 'h3'
    });
    $(".upload_image_dialog").dialog({ 
        autoOpen: false 
    });
    $("input[type='button']").button();
    $('.resize_method').buttonset();
        $('.presets').hover(function(){
        $('.presets').css('overflow-y','auto');
    },function(){
        $('.presets').css('overflow-y','hidden');
    });

basically when it's there from the start it works, but anything pulled in through ajax doesn't. I've seen some things that have to do with $.live() (deprecated for $.on() in 1.7) that might help me here, but I'm seriously real lost.

You have to use $.live() (or $.on()) as you have mentioned in the post to bind events for dynamically generated or changed elements. WHy you didn't try? What are the ajax generated elements in this jquery code? — Manjula
– Manjula, Commented Dec 2, 2011 at 4:50
Lots of <button />s and <input />s and a jQuery UI accordion and I have no idea how to use the .on() function.. I've read the API on it but it still just makes no sense to me :/ — Brian Leishman
– Brian Leishman, Commented Dec 2, 2011 at 12:14

Mark Schultheiss · Accepted Answer · 2011-12-02 14:30:43Z

1

I would tend towards delegate here to get the code out of the markup. The advantage of delegate over live is that live binds to the body and delegate (in this example) binds to the .resize_method classed element:

<span class="resize_method">

old markup snip:

<button onclick="create_reset_image('<?php echo $u_row['type']; ?>','<?php echo $default; ?>');" >Reset</button>

changed markup (I added an ID to the button but you could do other selectors as well if you desire):

<button id='myReset'>Reset</button>

new code: (put other stuff inside the document ready event as well)

$(document).ready(function(){
    $('.resize_method).delegate('#myReset', 'click', function(){
        create_reset_image('<?php echo $u_row['type']; ?>','<?php echo $default; ?>');" 
    });
});

answered Dec 2, 2011 at 14:30

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brian Leishman Over a year ago

Ahhh, no I see how this part of jQuery works! thank you a ton, btw I love how stackoverflow thought your javascript was php and made everything gray past your hashtag

Manjula · Accepted Answer · 2011-12-02 13:57:58Z

1

Why don't you put those ON EVENT methods(methods defined in onclick, onchange attributes) of those html elements inside jquery document-ready method similar to the ones you have already put there? it is really hard to maintain it because you have put it directly inside html elements. I am sure you will understand how to use $.live, if you do that.
Let say you put "my_reset_button" as the ID of the first button (which is with the value "Reset")

<button id="my_reset_button" name="my_reset_button" type="button">Reset</button>

Inside jquery document ready function,

$('#my_reset_button').live('click', function(){

    create_reset_image('<?php echo $u_row['type']; ?>','<?php echo $default; ?>');

);

answered Dec 2, 2011 at 13:57

Manjula

5,1413 gold badges31 silver badges42 bronze badges

Collectives™ on Stack Overflow

jQuery no javascript working inside of ajax created tabs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related