jquery-mobile Panel passing Value to Ajax

Question

This is my first attempt to use jquery-mobile and I am trying to pass a value that is stored in the id of the li tag generated by Ajax. The li tag is generated for the Panel widget as you can see below.

var mrn = '123';
$.ajax({
    type: "GET",
    url: "CFCs/assessment_forms.cfc",
    dataType: "json",
    data: {
        method: "NeroForm_rlu"
    },
    success: function (data) {

        var d = data.items;
        var x = '';

        for (var i = 0; i < d.length; i++) {
            x += '<li data-icon="action" id="formSwitcher_' + d[i].ASSESSMENT_DICTIONARYID + '"><a href="forms.cfm?MRN=' + mrn + '"class="ui-btn ui-btn-icon-right ui-icon-action">' + d[i].FORM_NAME + '</a></li>'
        }
        $('#leftNav').append(x).listview("refresh");
    }
});

I am trying to pass the value generated by the first ajax to this ajax to return information needed to populate the page.

$('li[id^="formSwitcher"]').on("click", function (event) {
    var FORMID = $(this);
    $.ajax({
        type: "GET",
        url: "CFCs/assessment_forms.cfc",
        dataType: "json",
        data: {
            method: "FormInstruction_rlu",
            AID: FORMID
        },
        error: function (data) {},
        success: function (data) {
            var d = data.items;
            $('#headerName').html('ACCESSMENT - <b>' + d[0].FORM_NAME + '</b>');
            $('#instructions').html(d[0].INSTRUCTION_TOP);
        }
    });
});

Here is the HTML for the navPanel

<div data-role="panel" data-display="overlay" id="nav-panel"  data-theme='a'>
   <ul data-role="listview" id="leftNav">
      <li data-icon="delete">
         <a href="" data-rel="close">Close menu</a>
      </li>
      <li data-icon="home">
         <a href="?MRN=123">Home</a>
      </li>
   </ul>
</div>

I believe that my selector is not binding so I am a little confused as to how to correct this issue.

score 2 · Accepted Answer · answered Oct 22 '14 at 15:45

2

"I believe that my selector is not binding so I am a little confused as to how to correct this issue."

For dynamically created elements, you have to delegate event. $(static_parent).on(event, dynamic_child, function)

$("#leftNav").on("click", "li[id^='formSwitcher']", function (event) {
  /* code */
});

answered Oct 22 '14 at 15:45

Omar

32,302
9
69
112

1

Omar, you beat me to it (+1), here is a demo of what you posted: http://jsfiddle.net/ezanker/eay9dp4d/ – ezanker Oct 22 '14 at 15:47
This kinda worked what was lacking was in the click event I needed to "click", "li" instead of the selector and I was able to get the ID by using the split function – Th0raxe Oct 22 '14 at 16:04

score 1 · Answer 2 · answered Oct 22 '14 at 15:41

1

try to replace that line with this;

var FORMID = $(this).attr("id");

answered Oct 22 '14 at 15:41

eyurdakul

894
2
12
29

Nice catch, however the selector isn firing so I never get to that point where it can read the ID from the LI tag. – Th0raxe Oct 22 '14 at 15:46

score 1 · Answer 3 · edited Oct 22 '14 at 16:10

1

Here is what worked thanks everyone for your help.

$("#leftNav").on("click",'li' , function (event) {
  var id = $(this).attr('id').split('_')[1];
  console.log(id);
})

edited Oct 22 '14 at 16:10

Omar

32,302
9
69
112

answered Oct 22 '14 at 16:05

Th0raxe

86
6

jquery-mobile Panel passing Value to Ajax

3 Answers3