开发者

Embedded php within JQuery within HTML table within PHP ... won't fire

Specific questions are at the end of this (very long) pre-amble. Sorry, I tried to make it as short as poss. (took over an hour to write the question).

A .php file uses a (php) function to read rows in a SQL db and dynamically create an HTML table.

For each row, the SQL data is returned via $book['id'], $book['code'], $book['description'], etc.

The $book['code'] is a two-char alpha-numeric ID, eg. B7 or DW

In the HTML for each row is a <td></td开发者_JAVA百科> containing an anchor tag with an onclick= event that runs a JQuery script (to show/hide elements for that row).

Suppose a couple or rows were clicked and a couple of elements were hidden by the embedded JQuery script (which is working correctly, by the way)

When the user views a different page and then returns to this one, hidden elements (that were hidden by the JQuery script) are no longer hidden.

I wish to preserve a string of $book['code'] values for each clicked row an d, upon return to the first page, parse that string to reset the hidden elements.

<?php
function render_row_from_mysql() {
    $output .= '
        ...create header row... 

        foreach ($books as $book) 
        {
            create table row cells 1, 2, 3, 4
            after cell 4: 
            <td>
            <a id="addToShelf.php" onclick="
                jQuery.ajax(\'./addToShelf.php?id='.$book['id'].'ats'.'\'); 
                jQuery(addToShelfLink'.$book['id'].')[0].style.display = \'none\'; 
                jQuery(rfs'.$book['id'].')[0].style.display = \'block\'; 
                jQuery(mt'.$book['id'].')[0].style.display = \'none\';
                jQuery(grn'.$book['id'].')[0].style.display = \'block\';
                return false;
            ">
                add to bookshelf
            </a>
            </td></tr>' ;
        }
}

Questions:

  1. Why doesn't the JQuery code above, which works correctly, need closing parentheses?

  2. What is the syntax for creating/updating a var, in the anchor tag, that would preserve the cumulative clicked-row data? I ask because my many attempts all break the code.

  3. Should the var be initialized at the top of the function, before the foreach loop?

  4. I tried using PHP to create/update a cookie by inserting the following code after "return false;" (see below). The below php code does create a cookie when pasted into a separate script for testing.) The php code does not fire. Why?


The answers are:

1) Still not sure, just syntax.

2) As mentioned in Q4, I had been entering code AFTER the "return false;" statement, which is what concludes the onclick event. Therefore, any code placed after "return false;" would not fire as part of the onclick event... and there was nothing else to MAKE it fire.

3) Irrelevant

4a.) The above code is created within a PHP code block -- one cannot create a PHP code block inside JQuery inside HTML that is being created by (i.e. already inside) PHP. 4b.) Further to answer (2), my alert() tests would not fire because they followed the "return false;" statement, 4c.) Any new PHP code must be moved out of the HTML and placed back with the rest of the PHP, such as above the function(render_row_from_mysql){}.

It is now "back to the drawing board" to figure out how to preserve the "clicked items" data between when a user leaves this page and when he returns back to it. At this time, I suspect that will be some kind of a FORM $POST event, but having never done one before I'm not sure what that will look like.


I completely agree with Bjorn comment from 22 minutes ago. You need to remove all that onclick code and add a identifying class to your anchor tags. You sure also make sure that each HTML element has a unique id, it is a W3C validation requirement. If each book's id is unique system wide I would use that, see Example below:

<?php
function render_row_from_mysql() {
    $output .= '

    foreach ($books as $book) 
    {
        //create table row cells 1, 2, 3, 4
        //after cell 4:

        <td>
        <a id="'.$book['id'].'" class="addToShelf">
            add to bookshelf
        </a>
        </td></tr>' ;
    }
}

Add this javascript code to the bottom of your HTML code.

jQuery(document).ready(function($) {
    // bind event to all anchor tags with class addToShelf
    $('a.addToShelf').click(function() {
        var book_id = this.id;

        $.ajax('addToShelf.php?id='+book_id, function() {
            // execute code after the ajax request is complete...
            $('addToShelfLink'+book_id).hide();
            $('rfs'+book_id).show(); 
            $('mt'+book_id).hide();
            $('grn'+book_id).show();            
        });

        return false;
    });
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜