Parse XML via jquery on listview jquerymobile

Question

I want to display datas from XMl on list with jquery and jquerymobile. I saw here many samy topcis, but it wasn't helpful for me. So I will show you the code that I've done, and could some tell me please where I did wrong.

Here is my Xml (called emertimi.xml and its located on root):

 <?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>

and here is my html and jquery

<html>
<!DOCTYPE html>
<head>
    <title>..:Emra per femije:..</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"  href="site.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,500,400italic,500italic,700italic,700,900,900italic' rel='stylesheet' type='text/css'>
    <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>
    <script type="text/javascript" src="main.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: parseXml
          });
        });

        function parseXml(xml)
        {
          $("#menu_meshkujt").html("<ul id='content' data-role='listview' data-inset='true'></ul>");
          $(xml).find("Row").each(function()
          {
            $("#content").append("<li><a href='"+$(this).find("Emri").text()+"'><h2>"+$(this).find("Kuptimi").text()+"</h2><p>"+$(this).find("Gjinia").text()+"</p></a></li>");
          });  
        }
</script>
 </head>
<body>
<div id="meshkujt_wrapper" data-role="page">
<div id="menu_meshkujt" >


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

albciff · Accepted Answer · 2014-05-31 08:09:30Z

1

I use your code changing the url to download the xml from my local apache and works ok on chrome:

chrome execution

Maybe your problem is the server call which is not returning your XML as you expect. Add the error function definition in your ajax call to check if something wrong is happening:

$(document).ready(function()
    {
      $.ajax({
        type: "GET",
        url: "emertimi.xml",
        dataType: "xml",
        success: parseXml,
        error : function(jqXHR, textStatus, errorThrown){
            alert(textStatus);
            alert(errorThrown);
        }
      });
    });

EDIT:

I just realize that you are trying to load your XML from a local file, this is not allowed in some browsers due to security requirements. If you want to try with chrome you can disable chrome websecurity. To do so try to start chrome with --disable-web-security property from your command line (before start be sure that there is none chrome instance running if not disable-web-security doesn't work):

"C:\...\Google\Chrome\Application\chrome.exe" --disable-web-security

I check your code and disabling chrome web security it works from a local file, also remember to specify url:"file:///your_path" in your ajax call.

When you start chrome with --disable-web-security property correctly you have to see a yellow warning:

chrome with disable web security

Hope this helps,

edited May 31, 2014 at 8:09

answered May 30, 2014 at 9:24

albciff

18.6k4 gold badges67 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hariss Over a year ago

Thank you for response, now I tried with the old code in mozilla and it works, but in chrome not yet. It says erorr:: thats all

albciff Over a year ago

I update my answer, I don't realize that you are using a local file directly in your ajax call. I hope this time the answer is in the right way :).

Hariss Over a year ago

How to disable-security I have no idea, am trying in different ways but it doesnt work :( also how to specify the url file///emertimi.xml ? p.s Sorry for my questions but I really don't know how to do it.

Hariss Over a year ago

I've tried online, and it works perfectyle. I will do this for android (hopw I can do it), so whan I launch this do you know if will work as an android app, becaus I dont use the file online.?

albciff Over a year ago

Do You want to generate an android app with i.e webview and there load a local xml from the html? Did you see this stackoverflow.com/questions/20425481/… ?

|

Collectives™ on Stack Overflow

Parse XML via jquery on listview jquerymobile

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related