9

I have huge problem with loading xml file from assets path by jQuery mobile in phonegap project.

I need to load an xml file. File is placed in the root of my project. Problem is with ajax url: "language.xml". Here is my code:

var language = 'english';
var regEx = /(\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)/;
$.ajax({
    url: "language.xml",
    success: function(xml) {
        $(xml).find('translation').each(function(){
            var id = $(this).attr('id');
            var text = $(this).find(language).text();
            if(text.match(regEx)){
              $("." + id).replaceWith('<a href="mailto:'+text+'" data-role="button" data-inline="true" data-theme="d" rel="external" data-mini="true">'+text+'</a>');
            }
            else{
              $("." + id).html(text);
            }
        });
    }
}); 

When I use the absolute path, I am able to load this file adding url: file:///android_asset/www/language.xml

This is good only for Android assets. But I need the correct path for iOS too.

Is it possible to link URL path absolutly/relativly by jQuery to be able to load file in Android/iOS devices?

UPDATE Code above is correct. Fail was in testing within the desktop browser. Project works fine on Android and iOS with relative paths.

There's no need to add absolute path like file:///android_asset/www/ for Android or file:///var/mobile/Applications/7D6D107B-D9DC-479B-9E22-4847F0CA0C40/YourApplication.app/www/ for iOS .

2
  • 2
    Is you HTML file in the folder www? If yes, did you try using url: "./language.xml" (additional ./) instead of url: "language.xml" ?
    – Littm
    Sep 21, 2012 at 23:01
  • 1
    @Petr Latal, consider posting answer to your own question, if you has found a solution
    – HitOdessit
    Oct 8, 2012 at 13:20

2 Answers 2

1

JQUERY:

    $("#inputString").live("keyup", function(e) 
    {
       $.post("FILE.PHP",{ char:$("#inputString").val() },
         function(data){},'json');
    });

PHP CODE:

<?php
$sql = "SELECT `name` FROM `list` WHERE `name` LIKE '%{$_POST['queryString']}%'";
        $query=mysql_query($sql);
        if($result) 
        {
        foreach ($result as $value) echo '<li onClick="fill(\''.$value['name'].'\');">'.$value['name'].'</li>';
        } 
}
?>

CSS:

#autoSuggestionsList {
    position: absolute;
    margin: 30px 4px;
    width: 175px;
    padding: 0;
    font-size: 11px;
    color: #000;
    border-radius: 5px;
    background: #c3d9ff; /* Old browsers */
    background: -moz-linear-gradient(top, #c3d9ff 0%, #b1c8ef 41%, #98b0d9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3d9ff), color-stop(41%,#b1c8ef), color-stop(100%,#98b0d9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #c3d9ff 0%,#b1c8ef 41%,#98b0d9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #c3d9ff 0%,#b1c8ef 41%,#98b0d9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #c3d9ff 0%,#b1c8ef 41%,#98b0d9 100%); /* IE10+ */
    background: linear-gradient(to bottom, #c3d9ff 0%,#b1c8ef 41%,#98b0d9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d9ff', endColorstr='#98b0d9',GradientType=0 ); /* IE6-9 */
}
.suggestionList {
    margin: 0px;
    padding: 0px;
}
.suggestionList li {
    list-style: none;
    direction: rtl;
    text-align: right;
    margin: 0px 0px 0px 0px;
    padding: 3px;
    cursor: pointer;
}
.suggestionList li:hover {
    background-color: #659CD8;
    color: #fff;
}
#autoSuggestionsList li:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-radius: 5px 5px 0px 0px;
    behavior: url('./css/PIE.htc');
}
#autoSuggestionsList li:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-radius: 0px 0px 5px 5px;
    behavior: url('./css/PIE.htc');
}   
0

Try putting your xml file in "www" folder and then you should be possible to access the file with just the filename.

Also, see the autocomplete example : http://jqueryui.com/autocomplete/#xml In the demo they have directly accessed "london.xml"

$.ajax({
  url: "london.xml",
  dataType: "xml",
  success: function( xmlResponse ) {
  var data = $( "geoname", xmlResponse ).map(function() {
  //alert($('name', this).text());
  return {
    value: $( "name", this ).text() + ", " +
            ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
    id: $( "geonameId", this ).text()
  };
 });

Hopefully it will work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.