Values of certain fields that precede a specific button class onClick are undefined?

Question

Thought to test something like this to get the values of fields that precede a repeating UpdateButton's click, but it logs undefined values in the browser console

var $prevID = $(this).prevAll('.UpdateStory').first(".storyID");
var $prevStory = $(this).prevAll('.UpdateStory').first(".currentStory");

var id = $prevID.val();
var story = $prevStory.val();

Here's the HTML (client-side + server-side handlebars.js)

<div id="allStories" class="allStories"> </div><!--/allStories-->
<script id="storyTemplate" type="text/x-handlebars-template">

    <div class="thisness">
      <div class="stories">

        <div class="new" id="new">
          \{{#each stories}}
            <div class="container-fluid">
              <div class="row">
                <div class="col-sm-4 col-sm-offset-4">
                  <form class="updateNewStoryForm">
                    <div class="input-group">
                      <span class="input-group-addon">
                        <input type="checkbox">
                      </span>
                      <input type="hidden" class="storyID" value="\{{ _id }}"/>
                      <input type="text" class="currentStory" value="\{{ story }}">
                      <span class="input-group-addon">
                        <input type="button" class="UpdateStory">
                      </span>
                    </div><!-- /input-group -->
                  </form>
                </div><!-- /.col-lg-6 -->
              </div><!-- /.row -->
            </div><!-- /.container-fluid -->
          \{{/each}}
        </div>

      </div> <!--/stories-->
    </div> <!--/thisness-->

</script>

And here's the ajax .put that otherwise only updates the first story

// UpdateStory button clicks
$(".allStories").on('click','.UpdateStory',function(e) {

    e.preventDefault();
    console.log('UpdateStory clicked');

    // story elements for API that work for only the first item,
    // regardless of whichever UpdateStory button is clicked
    var id = $( ".storyID" ).val();
    var story = $( ".currentStory" ).val();

    console.log(id);
    console.log(story);

    var AjaxPostData = {
        id : id,
        story : story
    };

    // if the story field has content
    if (story.length != 0) {
      console.log('there is a story: ' + story);
        // make an ajax call
        $.ajax({
        dataType: 'json',
        data: AjaxPostData,
        type: 'put',
            url:"http://localhost:4200/api/v1/stories/" + id,
            success: refreshNewStories,
            error: foundAllNewFailure
        });
    };

}); // UPDATE

`.prev()` doesn't do what you think it does. `.storyID` is not the element before `.UpdateStory`. — Barmar, Jun 04 '14 at 22:03
Use `.prevAll()`, as in the solutions here: http://stackoverflow.com/questions/19653267/finding-the-closest-previous-element-with-specific-data-attribute-jquery/19653351#19653351 — Barmar, Jun 04 '14 at 22:04
@Barmar That makes sense, thanks.. This is still logging undefined though.. Any other suggestions? — StackThis, Jun 04 '14 at 22:21

score 1 · Accepted Answer · answered Jun 05 '14 at 03:01

1

It should be:

var group = $(this).closest(".input-group-addon");
var id = group.prevAll(".storyID").val();
var story = group.prevAll(".currentStory").val();

answered Jun 05 '14 at 03:01

Barmar

741,623
53
500
612

Perfect! Much appreciated – StackThis Jun 05 '14 at 13:57
What would the jquery be for a checkbox equivalent? `if (group.prevAll(".archiveCheck").is(":checked")) { var archiveCheck = 'archived';}` doesn't seem to work..for the html: `` – StackThis Jun 05 '14 at 20:26
You have the checkbox AFTER the span. `prevAll` only looks for things BEFORE the span. – Barmar Jun 05 '14 at 20:31
Use `nextAll` to look after, or `siblings` to go in both directions. – Barmar Jun 05 '14 at 20:31
Really appreciate your time with this.. Almost working? http://jsfiddle.net/vG5L8/1/ – StackThis Jun 05 '14 at 22:12
Check the JS console, it's complaining about a syntax error. jsfiddle seems to be loading `bootsrap.min.css` as a Javascript file instead of CSS because you had an extra `"` character at the end of the URL. – Barmar Jun 05 '14 at 22:21
I fixed that here: http://jsfiddle.net/barmar/vG5L8/2/ but it still gets an error because you never set the variable `group`. – Barmar Jun 05 '14 at 22:23
And `prevAll("checkboxInput")` should be `prevAll(".checkboxInput")`. These are all just silly typoes, do you really need me to proofread for you? – Barmar Jun 05 '14 at 22:24
Thanks for that.. There was a differenty logic error in the code.. Solved now.. Many thanks again for clearing up traversing with jquery – StackThis Jun 06 '14 at 01:51

Values of certain fields that precede a specific button class onClick are undefined?

1 Answers1