Question

I’m really new to jquery and I am not a “tumbleweed” )-; so please keep that in mind.

I have a jquery mobile app that current posts data to an api.

I have three xml documents based on daily, weekly, and monthly activities generated by an api. I need to take the value a user selects from three options (Previous Day Summary, Previous Week Summary, and Previous Month Summary) to call the correct XML document already provided for that time period, parse the XML document to locate three nodes, and then write the text from those nodes to a div for a different page of the jquery mobile application.

Right now the app isn’t calling the select change function. I’d appreciate any insight into what I’m doing wrong on that issue as well as any other suggestions for improving on my overall work here.

The XML document structure follows:

<StatusModel>

<Uid>
 xxxxxxx
 </Uid>

<Created>
2011-08-02T08:57:39.377
</Created>

<User>
xxxxxx
</User>

<Level>
x
</Level>

<Doing>
xxxxx
</Doing>

<Thinking>
xxxxx
</Thinking>

</StatusModel> 

The html for the select is as follows:

 <div data-role="fieldcontain">
 <label for="summaries" class="select">Review a summary of your scores and notes:</label>
   <select name="summaries" id="summaries" data-native-menu="false">
      <option value="time_period" selected>Choose a time period</option>
      <option value="Previous_Day_Summary">Previous Day Summary</option>
      <option value="Last_Week_Summary">Last Week Summary</option>
      <option value="Last_Month_Summary">Last Month Summary</option>
     </select>  
 </div>

The script is as follows:

$(function() {

$('[name = "summaries"]').change(function() {

alert("selection called");

$(this).children(":selected").text();

//getting the text from the summaryreviews form selection

var newVal = $("#summaries").val();

//newurl builds the url based on the timeframe chosen in the summaryreviews select box

var newurl = $("http://somedomainname/api/list" + "newVal");


$.ajax( {
type: "GET",
url: (newurl),
cache: false,
dataType: "xml",
success: summaryxml

});

function summaryxml(xml) {

    //parse the xml document including children using the *;

$(xml).find(*).each(function() {

    var level = $(this).find("level").text();
    var doing = $(this).find("doing").text();
    var thinking = $(this).find("thinking").text();


$('<li>' + 'level' + '<br />' + 'doing' + '<br />' + 'thinking' +  '</p></li>').appendTo("#summarylist");

//refresh the summarylist

$("#summarylist").listview('refresh');

    });
}

});

 });

The div I want to populate is on another jquery mobile page

<div data-role="page" id="summarynotes" data-theme="d" data-position="fixed" data-transition="slide">
<div data-role="header">

</div>


<div data-role="content" id="summarize" data-theme="d">


<ul id="summarylist" data-role="listview">

// Display Day, Week, or Month summary notes here


</ul>

<div data-role="footer" data-position="fixed">

</div>
</div>

Answer 1

A few thoughts that hopefully help:

• did you mean to call document.ready on Line 1 of your JS? i.e. $(function() {
• Line 3 – why not just use address your select by its ID? $('#summaries').change()
• var newurl = $("http://somedomainname/api/list" + "newVal"); — this will evaluate to http://somedomainname/api/listnewVal. Is that what you intended?