Mike Wiesenhart Mike Wiesenhart - 17 days ago 4
Ruby Question

Conditional Statements in jQuery

I have the jQuery code below and currently it has a

Min Rent
and
Max Rent
field. Right now when a value is entered is says
$val1 to $0
even if a value is not entered in the
Max Rent
field. What I am trying to accomplish is if a value is entered in both fields for it to say
$val1 to $val2
. Otherwise I just want it to display the one value. I tried to do this with a conditional statement, but my jQuery is not very strong and not sure where I am going wrong.

jQuery:

$("[data-toggle='popover']").on('shown.bs.popover', function() {
$("#listing-price-selector").next().find("#listing_search_form_min_price").keyup(modPrice);
$("#listing-price-selector").next().find("#listing_search_form_max_price").keyup(modPrice);
});

$("[data-toggle='popover']").on('hide.bs.popover', function() {
modPrice();
});
modPrice();

function modPrice() {
if ($("#listing-price-selector") && $("#listing-price-selector").next()) {
var mn = $("#listing-price-selector").next().find("#listing_search_form_min_price").val();
var mx = $("#listing-price-selector").next().find("#listing_search_form_max_price").val();
if (mn || mx) {
mn = (mn == "") ? 0 : mn;
mx = (mx == "") ? 0 : mx;
$("#priceBox").val(mn + " to " + mx);
if ($("#listing_search_form_max_price").length > 0) {
$("#listing-price-selector").text(" $" + mn + " to $" + mx);
else
$("#listing-price-selector").text(" $" + mn);
}
}
}
}


HTML:

<div class="col-md-2 col-xs-6">
<a tabindex="0" class="button btn-transparent" id="listing-price-selector" role="button" data-toggle="popover">Price Range <span class="caret"></span></a>
</div>

<div id="listing-price-content" style="display: none;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="basic-addon1">$</span>
<%= f.text_field :min_price, class: "form-control", placeholder: "Min Rent", data: { "binding-name" => "min-price" } %>
</div>
</div>
<div class="col-xs-6">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="basic-addon1">$</span>
<%= f.text_field :max_price, class: "form-control", placeholder: "Max Rent", data: { "binding-name" => "max-price" } %>
</div>
</div>
</div>
</div>



Answer

I wasn't sure if my comment helped. So I'm posting this. Provided that this is where, your issue is, this type of check here is not recommended. For all you know they can input "abcd"

if ($("#listing_search_form_max_price").length > 0) {
    $("#listing-price-selector").text(" $" + mn + " to $" + mx);
  else
    $("#listing-price-selector").text(" $" + mn);
  }

You can try this

function modPrice() {
    if ($("#listing-price-selector") && $("#listing-price-selector").next()) {
        var mn = $("#listing-price-selector").next().find("#listing_search_form_min_price").val();
        var mx = $("#listing-price-selector").next().find("#listing_search_form_max_price").val();
        if (mn || mx) {
            mn = (mn == "") ? 0 : mn;
            mx = (mx == "") ? 0 : mx;
            $("#priceBox").val(mn + " to " + mx);
            if (parseFloat($("#listing_search_form_max_price").val()) > 0) {
                $("#listing-price-selector").text(" $" + mn + " to $" + mx);
            } else {
                $("#listing-price-selector").text(" $" + mn);
            } //END listing_search_form_max_price
        } //END mn || mx
    } //END listing-price-selector
}

Let us know.

Comments