Ajax回调仅适用于jquery表单组列表中的顶部div

Question

Hello smarter people,

So as the title conveys, i'm having some difficulties, and I've wasted a good 8 hours trying to figure it out :)

I posted a Question earlier, to which I got no answers. I was having difficulties with my ajax, and it's interaction with a form. This form is in an admin panel, and is for dynamically creating and editing navigation links on the front end of my (hopefully) soon-too-be site.

My problem specifically is: I am unable to, via ajax, have the text-content of the anchor tag (which causes the form to dropdown), to immediately reflect on screen...

http://i1379.photobucket.com/albums/ah126/conchairtoe/3_zpsb897a6a4.png

As you can see, the ajax has run, no errors, yet the label (anchor tag for enacting drop-down form) remains "test", when I typed "testing!!!!!!" in.

Everything behind the scenes worked, as the database successfully updates the corresponding data, and so does the anchor tag text once i reload the page, but that ain't very ajaxy now is it!

Here's the Javascript for when the form is submitted.

// NAV ITEM FORM - UPDATE / SUBMIT      
    $(".nav-form").submit(function(event) {

        var navData = $(this).serializeArray(); // The serializeArray( ) method serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with.
        var navLabel = $('input[name=label]').val();        
        var navID = $('input[name=id]').val();

        $.ajax({

            url: "ajax/navigation.php",
            type: "POST",
            data: navData

        }).done(function(){

            $("#label_"+navID).html(navLabel);

        }); // END $.ajax

        alert("navID = "+navID+"  navLabel = "+navLabel);

        event.preventDefault(); // will prevent form from submitting

    });//END nav-form

Please note the .done callback.

I've narrowed the problem down!

The ajax works ONLY on whichever of the sortable anchors is in position 1 (the top of the list) - for when I change the "Home Page", or, again, which ever one I happen to move to the top of the list, the label updates immediately as per the ajax.

As you can see in the code, I have those alerts to verify this: http://i1379.photobucket.com/albums/ah126/conchairtoe/final_zps7a7ddc68.png

Here is the code for the DOM environment

Navigation

<div class="row">

<div class="col-md-3">

    <ul id="sort-nav" class="list-group-item">          

<!--EXISTING NAV-ITEMS-->           
        <?php

            $query = "SELECT * FROM navigation ORDER BY position ASC";
            $result = mysqli_query($dbc, $query);

            while ($list = mysqli_fetch_assoc($result)) {  ?>

                <li id="list_<?php echo $list['id']; ?>" class="list-group-item">

                    <a id="label_<?php echo $list['id']; ?>" data-toggle="collapse" data-target="#form_<?php echo $list['id']; ?>">

                        <?php echo $list['label']; ?> <i class="fa fa-chevron-down"></i>

                    </a>                        

                    <div id="form_<?php echo $list['id']; ?>" class="collapse">

                        <!--FORM-->             
                        <form class="form-horizontal nav-form" role="form" action="index.php?page=navigation&id=<?php echo $list['id']; ?>" method="post">

                            <!-- ID  -->                    
                            <div class="form-group">

                                <label class="col-sm-2 control-label" for="id">ID</label>

                                <div class="col-sm-10">
                                    <input type="text" class="form-control input-sm" value="<?php echo $list['id'];?>" name="id" id="id" placeholder="ID - name" />                                         
                                </div>

                            </div>

                            <!-- LABEL -->
                            <div class="form-group">

                                <label class="col-sm-2 control-label" for="label">Label</label>

                                <div class="col-sm-10">
                                    <input type="text" class="form-control input-sm" value="<?php echo $list['label'];?>" name="label" id="label" placeholder="Label" />
                                </div>

                            </div>

                        <!--URL -->                 
                            <div class="form-group">

                                <label class="col-sm-2 control-label" for="value">URL</label>

                                <div class="col-sm-10">
                                    <input class="form-control input-sm" type="text" value="<?php echo  $list['url'];?>" name="url" id="url" placeholder="URL"></input>
                                </div>

                            </div>

                            <!--POSITION -->                    
                            <div class="form-group">

                                <label class="col-sm-2 control-label" for="value">Position</label>

                                <div class="col-sm-10">
                                    <input class="form-control input-sm" type="text" value="<?php echo  $list['position'];?>" name="position" id="position" placeholder="Position"></input>
                                </div>

                            </div>

                            <!-- STATUS -->
                            <div class="form-group">

                                <label class="col-sm-2 control-label" for="status">Status</label>

                                <div class="col-sm-10">
                                    <input class="form-control input-sm" type="text" value="<?php echo  $list['status'];?>" name="status" id="status" placeholder=""></input>
                                </div>

                            </div>

                            <!--Button and Hidden Input-->                  
                            <button type="submit" class="btn-btn-default">Save</button>
                            <input type="hidden" name="submitted" value="1" />
                            <input type="hidden" name="opened_id" value="<?php echo $list['id']; ?>" />

                            <span class="pull-right">
                                <a id="del_<?php echo $list['id']; ?>" class="btn btn-danger nav-item-delete" href="#" style="margin-bottom: 2px;" title="delete nav item"><i class="fa fa-trash"/></i></a>
                            </span>

                        </form>  <!--END form-->

                    </div>

                </li>

            <?php } ?>      

    </ul>

</div>

<div class="col-md-9">

    <div id="callback"><?php if(isset($message)) { echo $message; } ?></div>

</div>  <!-- END col-md-12 -->

So yea, I truly apologize for my ignorance. Bare in mind that I barely could grasp css just 2 months ago or so.

THANK YOU SO MUCH FOR YOUR HELP IF YOU CAN PROVIDE IT.

Answer 1

Because you are not looking at the current form for the navID. The code $('input[name=id]') is using the first element it finds. You need to look at the form, use find().

var form = $(this);
var navData = form.serializeArray(); 
var navLabel = form.find('input[name=label]').val();        
var navID = form.find('input[name=id]').val();