CODEWITHSUNDEEP
xmlhtmljquery-mobile
Hariss
Hariss

Reputation: 273

always return first list from xml to listview html jquery

I am creating small app, I am learning to parse datas from XML to html via Jquery. and I put the datas on list of HTML. But the problem is when I want to click one of the item, always return only the first item.

Example I click the fifth item on list

but again return the first element

Here is my code on html jquery and jquerymobile

        <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
            {
              $.ajax({
                type: "GET",
                url: "emertimi.xml",
                dataType: "xml",
                success: function (xml)
                            {
                              $(xml).find("Row").each(function()
                              {
                                $("#content").append("<li><a  href='"+$(this).find("Emri").text()+"'><h2 id='namedet'>"+$(this).find("Emri").text()+" - "+$(this).find("Kuptimi").text()+"</h2><p>"+"</p><p>"+$(this).find("Gjinia").text()+"</p></a></li>");
                              });  
                            },error: function (jqXhr, status, error) {         alert(status + ':' + error + ':' + jqXhr.responseText)     } 

              });

                    $('.lista').click(function(){
                        var href = $('#namedet').html();
                            $('#prove').html(href);

                    });

                });


    </script>
</head>

<body>
    <div id="meshkujt_wrapper" data-role="page">

        <div id="menu_meshkujt" >
            <ul id='content' class="ui-listview ui-listview-inset ui-corner-all ui-shadow lista" data-filter-placeholder="Kërko emrin..." data-role='listview' data-filter='true' data-inset='true'>

            </ul>
        </div>
        <h1 id="prove">prova</h1>
    </div>
</body>

and here is my XML

    <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <Row>
        <Emri>Abide</Emri>
        <Kuptimi>Adhuruese</Kuptimi>
        <Gjinia>Femer</Gjinia>
    </Row>
    <Row>
        <Emri>Abire</Emri>
        <Kuptimi>Aromë e mirë lulesh.</Kuptimi>
        <Gjinia>Femer</Gjinia>
    </Row>
    <Row>
        <Emri>Adhra</Emri>
        <Kuptimi>Margaritarë i pashpuar</Kuptimi>
        <Gjinia>Femer</Gjinia>
    </Row>
    <Row>
        <Emri>Adile</Emri>
        <Kuptimi>E drejtë</Kuptimi>
        <Gjinia>Femer</Gjinia>
    </Row>
    <Row>
        <Emri>Afife</Emri>
        <Kuptimi>E pastër; E thjeshtë; E lehtë</Kuptimi>
        <Gjinia>Femer</Gjinia>
    </Row>
</Root>

Anyone who can help me, whith this, how to return elemnts data?

Upvotes: 0

Views: 229

Answers (1)

Gajotres
Gajotres

Reputation: 57309

You have an error,

change this:

$('.lista').click(function(){
    var href = $('#namedet').html();
    $('#prove').html(href);
});

to this:

$('.lista li').click(function(){
    var href = $(this).find('#namedet').text();
    $('#prove').html(href);
});

Basically you are telling your code to access first occurrence of element with an id #namedet.

$(this) keyword will look at clicked element and function find will look for an element #namedet inside clicked listview element.

Update:

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

Use this :

$(document).on('click','.lista li',function(){
    var href = $(this).find('#namedet').text();
    $.mobile.activePage.find('#prove').html(href);
});

Upvotes: 1

Related Questions