Question

It’s my first time here asking for your help and knowledge!
I have a problem with AJAX script and adding ‘if’ condition for downloading files from XML.

In general, the script as itself works but there is no function ‘if’ which I need to add somehow.
I was looking for some help on Google but with no results 🙁
If I understand well there should be a condition ‘ IF, ELSE’ added but I am not sure how to do this so I would really appreciate your help with this. If anybody was able to help and add this code for me I would be very gratefull!

// this is not active now becouse i don't use this xml file
$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "premier-rates.xml",
        dataType: "xml",
        success: parseXml
    });
    // this is my XML file
    $.ajax({
        type: "GET",
        url: "go-rates.xml",
        dataType: "xml",
        success: parseXml_go
    });

    $("#selCountry").change(onSelectChange);
    $("#selCountry_go").change(onSelectChange_go);

});

function gup(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(window.location.href);
    if (results == null) return "";
    else return results[1];
}

function parseXml(xml) {

    $(xml).find("db_rates").each(function() {
        var this_countryname = $(this).find("country").text();
        var this_id = $(this).find("id").text();
        var curOption = $("<option value='" + this_id + "'>" + this_countryname + "</option>")
        curOption.data("db_rates", $(this)); // bind the country node data from the XML to the                                             option of the dropdown
        $(curOption).appendTo($('#selCountry'))
    });

}

function onSelectChange() {
    var selected = $('#selCountry').children(':selected').data('db_rates');

    $('#rates_output').html("");
    var this_country = $(selected).find('country').text();
    var this_landlineRates = $(selected).find('landline_rates');
    var this_mobileRates = $(selected).find('mobile_rates');

    $("#rates_output").append("<p class='dest_title'>" + this_country + "</p>");
    $("#rates_output").append("<ul><li><div class='dest_list'>Landline</div><div class='dest_list'>" + this_landlineRates.text() + "p /min</div><div class='clear'></div></li><li><div class='dest_list'>Mobile</div><div class='dest_list'>" + this_mobileRates.text() + "p /min</div><div class='clear'></div></li></ul>");

    //$("#rates_output").append("Landline: " + this_landlineRates.text() + "p /min<br />     Mobile: " + this_mobileRates.text() +"p /min");
    this_country = this_country.replace(/ /gi, "-");

    var flagoutput = "";
    var this_id = gup('id');

    if (this_id == "1") {
        flagoutput = "<img src='images/flag/" + this_country + ".png' style='float:right;     border:1px solid #CCC; margin-right:10px; ' />";
    } else {
        flagoutput = "<img src='images/flag/" + this_country + ".png' style='float:left; border:1px solid #CCC; ' />";
    }
    $("#flagoutput").html(flagoutput);
}

function parseXml_go(xml) {

    $(xml).find("db_rates").each(function() {
        var this_countryname = $(this).find("country").text();
        var this_id = $(this).find("id").text();
        var curOption = $("<option value='" + this_id + "'>" + this_countryname + "</option>")
        curOption.data("db_rates", $(this)); // bind the country node data from the XML to the     option of the dropdown
        $(curOption).appendTo($('#selCountry_go'))
    });

}

function onSelectChange_go() {
    var selected = $('#selCountry_go').children(':selected').data('db_rates');

    $('#rates_output_go').html("");
    var this_country = $(selected).find('country').text();

    //THOSE TWO VARIABLE ARE ALWAYS LOADED
    var this_landlineRates = $(selected).find('landline_rates');
    var this_mobileRates = $(selected).find('mobile_rates');



    // THOSE VARIABLES I WOULD LIKE TO ADD TO MY WEBSITE (DEPENDS ON HOW MANY OPERATORS ARE IN THE COUNTRY... SO IT CAN BE: this_mobileRatesC, D, E... 
    var this_mobileRatesA = $(selected).find('mobile_ratesA');
    var this_mobileRatesB = $(selected).find('mobile_ratesB');




    // AGAIN - THOSE TWO VARIABLES ARE ALWAYS LOADED
    $("#rates_output_go").append("<p class='dest_title'>" + this_country + "</p>");
    $("#rates_output_go").append("<ul><li><div class='dest_list'>Landline</div><div class='dest_list'>" + this_landlineRates.text() + "p /min</div><div class='clear'></div></li><li><div class='dest_list'>Mobile</div><div class='dest_list'>" + this_mobileRates.text() + "p /min</div><div class='clear'></div></li></ul>");


    // SO I WAS TRYING TO ADD MY CODE, BUT I THINK SOMETHING IS WRONG AS IT ALWAYS SHOWS VALUE EVEN IF THE VALUE IS 0 OR DOES NOT EXIST IN MY XML FILE (it will be more for this_mobileRatesB, C, D...)
    var this_mobileRatesA = $(selected).find('mobile_ratesA');
    if ('mobile_ratesA' >= "0") {
        $("#rates_output_go").append("<ul><li><div class='dest_list'>A</div><div class='dest_list'>" + this_mobileRatesA.text() + "p /min</div><div class='clear'></div></li></ul>");

        // for more added this_mobileRatesB
        var this_mobileRatesA = $(selected).find('mobile_ratesA');
        if ('mobile_ratesB' >= "0") {
            $("#rates_output_go").append("<ul><li><div class='dest_list'>A</div><div class='dest_list'>" + this_mobileRatesB.text() + "p /min</div><div class='clear'></div></li></ul>");



            this_country = this_country.replace(/ /gi, "-");

            var flagoutput = "";

            /* */
            var this_id = gup('id');

            if (this_id == "1") {
                flagoutput = "<img src='images/flag/" + this_country + ".png' style='float:right;     border:1px solid #CCC;margin-right:10px; ' />";
            } else {
                flagoutput = "<img src='images/flag/" + this_country + ".png' style='float:left; border:1px solid #CCC; ' />";
            }
            $("#flagoutput").html(flagoutput);
        }
    }
}

please note: the comments were only added to make this post clearer

XML file premier-rates.xml

<?xml version="1.0" encoding="utf-8" ?>
<Rates>
<db_rates>
<id>1</id>
<country>country1</country>
<landline_rates>0.10</landline_rates>
<mobile_rates>0.15</mobile_rates>
<mobile_ratesA>0.50</mobile_ratesA> // I WONT IF HAVE VALUE IS APPENDED
<mobile_ratesB></mobile_ratesB> // I WONT IF 0 OR EMPTY IS NOT APPENDED
</db_rates>
<db_rates>
... // MORE COUNTRIES
</db_rates>
...
</Rates>

Please can you help me to solve the problem, not necessarily the way I was trying to do this as there might be a better way of doing it. I will appreciate any help and advice.

thanks a lot

Answer 1

This is the first thing that catches my eye:

// SO I WAS TRYING TO ADD MY CODE, BUT I THINK SOMETHING IS WRONG AS IT ALWAYS SHOWS VALUE EVEN IF THE VALUE IS 0 OR DOES NOT EXIST IN MY XML FILE (it will be more for this_mobileRatesB, C, D...)
var this_mobileRatesA = $(selected).find('mobile_ratesA');
if ('mobile_ratesA' >="0"){
$("#rates_output_go").append("<ul><li><div class='dest_list'>A</div><div class='dest_list'>" + this_mobileRatesA.text() + "p /min</div><div class='clear'></div></li></ul>");

// for more added this_mobileRatesB
var this_mobileRatesA = $(selected).find('mobile_ratesA');
if ('mobile_ratesB' >="0"){
$("#rates_output_go").append("<ul><li><div class='dest_list'>A</div><div class='dest_list'>" + this_mobileRatesB.text() + "p /min</div><div class='clear'></div></li></ul>");

with if ('mobile_ratesA' >="0") you are comparing two constant strings. This result will never change, so the value will always be printed (because 'mobile_ratesA' >= '0' by string comparison).

I believe what you want is

// only print if we find at least one mobileRatesA node
if(this_mobileRatesA.get().length > 0) {
    ...
}

or perhaps

// only print if mobileRatesA contains a string
// representation of a number greater than 0
if(parseInt(this_mobileRatesA.text()) > 0) {
    ...
}