jQuery no javascript working inside of ajax created tabs

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.

Answers


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; ?>');" 
    });
});

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; ?>');

);

Need Your Help

AppStore: App downloadable only for 3GS and above?

ios xcode app-store

My test unfortunately show that my app runs too slow on an iPhone 3G.

for loops and if statements without {}s?

php objective-c

They are pretty popular but I never have the "balls" to use them.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.