Question

there is a part of my XML response that I need to put in different list view with number. this is the response

  <Note>
Cook pasta according to directions, chill in ice water, drain.¶Blanch broccoli in boiling water, chill in ice water, drain.¶Use ½ soy sauce to season the chicken, heat oil in no stick pan, brown chicken, and reduce heat and finish cooking.¶Don"t overcook! Slice chicken into 1" strips, turn and cut into ¼" pieces, place into bowl with other ingredients except dressing and soy sauce.¶Mix remainder of soy sauce into dressing and pour over pasta, chicken, and vegetables.¶Toss gently and serve immediately.¶You might like to leave the pasta, chicken, broccoli un-chilled and serve it semi-warm
 </Note>

The "¶" is the sign for seperation of each procedure. How can i append that lo listview? seperately..I need some help thank you


This is my codes. Not working

$(req.responseText).find('NewDataSet').each(function(){
                 var split =  $(this).find('Note').text();
                  var lines = split.split('¶');
                    $.each(lines, function(key, line) {
                    $('#RecipeProc').append('<li><a href="#">' + line + '</a></li>');
                         $('#RecipeProc').listview('refresh');
                   });


              });
Was it helpful?

Solution

Working example: http://jsfiddle.net/Gajotres/Z7uxZ/

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <ul data-role="listview" data-theme="a" id="custom-listview">

                </ul>
            </div>

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

            </div>
        </div>    
    </body>
</html>   

Javascript :

$(document).on('pagebeforeshow', '#index', function(){       
    var split = 'Cook pasta according to directions, chill in ice water, drain.¶Blanch broccoli in boiling water, chill in ice water, drain.¶Use ½ soy sauce to season the chicken, heat oil in no stick pan, brown chicken, and reduce heat and finish cooking.¶Don"t overcook! Slice chicken into 1" strips, turn and cut into ¼" pieces, place into bowl with other ingredients except dressing and soy sauce.¶Mix remainder of soy sauce into dressing and pour over pasta, chicken, and vegetables.¶Toss gently and serve immediately.¶You maight like to leave the pasta, chicken, broccoli un-chilled and serve it semi-warm';

    var lines = split.split('¶');
    $.each(lines, function(key, line) {
        $('#custom-listview').append('<li><a href="#">' + line + '</a></li>');
    });
    $('#custom-listview').listview('refresh');
});

EDIT :

To debug you app:

  1. First check your variable split has a value

    var split =  $(this).find('Note').text(); 
    alert(split); // or console.log(split);
    
  2. If point 1 is correct then check sting is successfully splited:

    var lines = split.split('¶');
    alert(lines.length); 
    
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top