How to retrieve value from a div dynamically?

Question

Guys I have a function which uses ajax call to retrieve data dynamically based upon a value in div. Now lastNoticeID value in the function is not getting updated as its not in any loop..thus it keeps repeating the same data..

CODE :

function callMoreData() {
     var lastNoticeID = $('#hiddenLastNoticeID').val();
     $.ajax({
         type: "GET",
         url: "/api/values/getnotice?num=" + lastNoticeID,
         dataType: "json",
         crossDomain: true,
         async: true,
         cache: false,
         success: function (data) {
             $.each(data, function (index, value) {
                 BindNotice(value);
             });
         },
         error: function (x, e) {
             alert('problem while fetching records!');
         }
     });
 }



 function BindNotice(values) {
     $('#divNotices').append('...some code...' +
         '<input id="hiddenLastNoticeID" type="hidden" value="' + values.LastNoticeID +
         '" />' + '...some code...');
 }

As you can see in the code above, I am retrieving value from the above div and then passing it to webApi url... Now this is running fine and on the first scroll I get the values but then the function keeps repeating the same values over and over again i.e. var lastNoticeID is not getting updated. How do I get it to update per scroll event?

btw divNotices has the same html code as BindNotice function.

IDs must be unique. Your `#hiddenLastNoticeId` will be duplicated. jQuery will always match the first element. — Matt, Jun 10 '14 at 19:14
You can't have multiple elements with the same `id`. Selecting by `id` as you do will only ever return 1 element (the first one). Use a class instead and then select and take the last one. Or a better solution might be to just store `LastNoticeID` in a variable. — Matt Burland, Jun 10 '14 at 19:14

score 1 · Accepted Answer · answered Jun 10 '14 at 19:17

Use classes instead:

 function BindNotice(values) {
     $('#divNotices').append('...some code...' +
         '<input class="hiddenNotice" type="hidden" value="' + values.LastNoticeID +
         '" />' + '...some code...');
 }

And then:

var lastNoticeID = $('.hiddenNotice').last().val();

Or, you could just store the LastNoticeID in a variable:

var lastNoticeID = 0;

function BindNotice(values) {
     $('#divNotices').append('...some code...' +
         '<input class="hiddenNotice" type="hidden" value="' + values.LastNoticeID +
         '" />' + '...some code...');
     lastNoticeID = values.LastNoticeID;
}

score -1 · Answer 2 · answered Jun 10 '14 at 19:15

-1

It would seem that you are adding more elements of the same ID. ID's are supposed to be single instance and Jquery will therefore only grab the first instance in the DOM. (Which is why $('#hiddenLastNoticeID').val(); is the same every time)

answered Jun 10 '14 at 19:15

Joseph Dailey

4,735
2
15
18

1

Not really an answer in that it doesn't provide the OP with a solution. – Matt Burland Jun 10 '14 at 19:16
nevermind, you apparently have it covered. But solutions don't always have to be code and really shouldn't be. It was apparent that NewbieProgrammer didn't know that ID's are single instance and Jquery treats them as such. Now with that knowledge it would be good for him/her to learn on his/her own. – Joseph Dailey Jun 10 '14 at 19:18

How to retrieve value from a div dynamically?

2 Answers2