Welcome Guest, Not a member yet? Register   Sign In
Applying jQuery to Dynamically Created Elements
#1

[eluser]Fielder[/eluser]
Can a jQuery and/or ajax expert help me out?
To summarize, my jQuery is loaded on pageload. However the <div id="store_body"> referenced in the jQuery has not yet been created. It is created dynamically when the grid is finally create through a means of AJAX, and displayed back to the user. But when displayed back to the browser, the <div id="store_body"> is not hidden as I've asked it to be in my initial jQuery load.

What you will see is in my view at the very end is I've created a couple of static <div>s just to test that the jQuery works correctly. The
<div><image id="button_showstore" src="../../../assets/images/icons/shape_square_edit.png" /></div>
that acts as the button and
<div id="store_body">Information here</div>
as what I want to hide. This is loaded as part of the initial pageload, so I have to think it has something to do with the dynamically created <div>.

If anyone can give me some more ideas, I've tried everything and have come up with nothing.
Oh, and no errors or problems reported in firebug.

When the page loads it loads my
jquery.js
Code:
$(document).ready(function() {
        
        $("#store_body").hide();
        
        $("#button_showstore").click(function() {
            $("#store_body").slideToggle("fast");
        });
});

For those of you familiar with xajax, I'm using xajax to dynamically create my output table.
store_form.php
Code:
$xajaxgrid = $this->xajaxgrid->createGrid($con_id);
                
                $objResponse->Assign("div_table", "innerHTML", $xajaxgrid);
                $objResponse->Assign('multistore_exclusive', 'checked', false);
                $objResponse->Assign("div_submit", "innerHTML", "");

My grid is created as such and sent back to the store_form.php and displayed to the user.
xajaxgrid.php library
Code:
function addRow($table, $data, $edit=TRUE, $delete=TRUE, $divName="grid", $fields=NULL)
    {
        
        $nameRow = $divName."Row".$data[0]; // <tr id="gridRow".multistore_id>
        $row = '<tr id="'.$nameRow.'" class="'.$this->rowStyle.'" >';
        
        $inc = 0;

        foreach ($data as $key => $value)
        {
            $nameCell = $nameRow."Col".$inc;
            if($key != 'id')
            {
                $row .= '<td id="'.$nameCell.'">'.$value.'</td>';
            }                  
               $inc++;
        }
        if ($edit)
        {
            $editStore = "editRow".$data[0];
            $row .= '<td align="center" width="5%"><a href="[removed]void(0);" id="button_showstore"><img id="button_showstore" src="../../../assets/images/icons/shape_square_edit.png" /></a></td>';
            
            $editRow = $this->editRow($data[0]);
        }
        
        $row .= '</tr>';
        
        if (isset($editRow))
        {
            $row .= $editRow;
        }
        
        $this->rows .= $row;
        
        if ($this->rowStyle == "row0")
        {
            $this->rowStyle = "row1";
        }
        else
        {
            $this->rowStyle = "row0";
        }
        
    }
    
    function editRow($multistore_id)
    {
        $editStore = "editRow".$multistore_id;
        
        $editRow = '<tr><td colspan="5">';
        
        $editRow .= '<div id="store_body">'.$this->editRow_contents($multistore_id).'</div>';
        
        
        $editRow .= '</td></tr>';
        
        return $editRow;
    }
    
    function editRow_contents($multistore_id)
    {
        $form = $multistore_id;
        
        return $form;
    }

    function render()
    {
        $grid = $this->top . $this->header . $this->rows . $this->footer;
        
        return $grid;
    }
my view
Code:
&lt;?=form_open('contractstore_form/postback', $form_attributes); ?&gt;
    <table class="selectBox">
        <tr>
            <td>&lt;?=$storename_name_dropdownlist?&gt;</td>
            <td><div id="div_store_number">&lt;?=$div_store_number?&gt;</div></td>
            <td><div id="div_store_upscode">&lt;?=$div_store_upscode?&gt;</div></td>
        </tr>
        <tr>
            <td class="table_footer">Store Name</td>
            <td class="table_footer">Store Number</td>
            <td class="table_footer">UPS Code</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <li>&lt;input type="checkbox" name="multistore_exclusive" id="multistore_exclusive" value="1" /&gt;&lt;label for="multistore_exclusive">Check for Exclusivity</label></li>
            </td>
            <td class="button">
                <li><div id="div_submit"></div>
            </td>
        </tr>
        <tr class="empty">
            <td colspan="3"></td>
        </tr>
    </table>
    <div><img id="button_showstore" src="../../../assets/images/icons/shape_square_edit.png" /></div>
    <div id="store_body">Information here</div>
    <div id="div_table"></div>
&lt;/form&gt;


Messages In This Thread
Applying jQuery to Dynamically Created Elements - by El Forum - 06-21-2009, 09:33 PM
Applying jQuery to Dynamically Created Elements - by El Forum - 06-21-2009, 11:07 PM
Applying jQuery to Dynamically Created Elements - by El Forum - 06-21-2009, 11:19 PM
Applying jQuery to Dynamically Created Elements - by El Forum - 06-21-2009, 11:32 PM
Applying jQuery to Dynamically Created Elements - by El Forum - 06-22-2009, 07:05 AM
Applying jQuery to Dynamically Created Elements - by El Forum - 06-22-2009, 07:23 AM
Applying jQuery to Dynamically Created Elements - by El Forum - 06-22-2009, 07:45 AM
Applying jQuery to Dynamically Created Elements - by El Forum - 06-22-2009, 11:28 AM
Applying jQuery to Dynamically Created Elements - by El Forum - 06-22-2009, 12:28 PM
Applying jQuery to Dynamically Created Elements - by El Forum - 06-22-2009, 12:29 PM
Applying jQuery to Dynamically Created Elements - by El Forum - 06-22-2009, 04:13 PM
Applying jQuery to Dynamically Created Elements - by El Forum - 06-22-2009, 05:56 PM



Theme © iAndrew 2016 - Forum software by © MyBB