来自foreach的javascript数据在php中。

Question

Related to my previous question: How to use javascript load function twice? (load in load)

I've got everything working (load in load). But now I want to use a foreach which sends data to the second load.

When I use this foreach the data (POST ID) remains the same.

Example code:

<script >
    $(document).ready(function () {
        // Forum categories
        $("#main").on("click", "#message", function () {
            $("#getmessage").load("forum/getmessage.php", {'id': $("#id").val()});
        });
    });
</script >

<?php foreach($stickies as $sticky): ?>
                <form id="form_id" >
                    <a href="#" class="list-group-item small" id="message"
                       style="background-color:black; color:white;" >
                        <span class="glyphicon glyphicon-pushpin" aria-hidden="true" ></span >
                        | <?php echo $sticky['header']; ?>
                    </a >

                    <input type="hidden" id="id" name="id" value="<?php echo $sticky['id']; ?>" >

                </form >
            <?php endforeach; ?>

As you can see I'd like to push the value ID as POST data, so the loaded file can perform a query on this POST ID.

How can I send the correct ID for every foreach?

Answer 1

There are a lot of ways to achieve what you need. So it's just an example.

First of all - value of id attribute must be unique. No exceptions. That's why id="message" for every a and id="id" for every input are invalid. For similar elements - use classes.

Fixed code will be:

<?php foreach($stickies as $sticky): ?>
    <form>
        <a href="#" class="list-group-item small js-message"
           style="background-color:black; color:white;" >
            <span class="glyphicon glyphicon-pushpin" aria-hidden="true" ></span >
            | <?php echo $sticky['header']; ?>
        </a >
        <input type="hidden" name="id" value="<?php echo $sticky['id']; ?>" >
    </form >
<?php endforeach; ?>

As you can see, I removed id attributes with same values. For inputs and forms you don't even need them, for as I added class js-message.

Next is handler:

$(document).ready(function () {
    // Forum categories
    $("#main").on("click", ".js-message", function () {
        // ways of getting value id can be different.
        $("#getmessage").load(
            "forum/getmessage.php", 
             {'id': $(this).parent().find("input").val()
        });

        // optionally you can add
        return false;
        // to prevent default click action which in case
        // of link is scrolling to the top of a page
    });
});

Here, as one of the ways to get value I used

$(this).parent().find("input").val()

which is:

$(this).parent()    // find a parent of a clicked a, it will be `form`
    .find("input")  // among `form` children find `input`
    .val()          // take value from found input

Surely, if your markup will change and more inputs will appear on the form, this may stop working. But it's just an example, you can modify this as you want.