Solved

Change this jQuery to look for a word

Posted on 2014-11-23

1 solution

141 Views

Last Modified: 2014-11-25

This is related question that leakme and Alexander helped me with here. I don't have a QA server to upload this to.
If user selects "Canada", only states from Canada should be displayed in States ddl. If "US" is selected, only US states should show.

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28562594.html

This works but I finally was able to get the dropdown working by adding a custom attribute.
Now, the ddl looks like this. It has "data-countrycode". It doesn't have "value=118-126".

<select id="StateId">

<option value="118" data-countrycode="126">
Alabama
</option>
<option value="169" data-countrycode="25">
Alberta
</option>

</select>

How can I change this jquery to not looking for "dash"...but look for "data-countrycode". In the code below, i replaced the "-" with "data-countrycode". Switched the country but it only displayed one state.

I tried this but didnt work

reverseLogic[i].value.indexOf("data-countrycode=" + "''"+ val +"''")

Open in new window

 jQuery(function($) {
        var reverseLogic = [];
        $("#StateId option:gt(0)").each(function(i, v) {
            reverseLogic.push({ value: $(this).val(), text: $(this).text() });
        });
        $("#CountryId").change(function() {
            var putAllBack = $(this).prop("selectedIndex") == 0;
            var val = $(this).val();
            $("#StateId option:gt(0)").remove();
            for (var i = 0; i < reverseLogic.length; i++) {
                if (putAllBack || reverseLogic[i].value.indexOf("-" + val) > 0) {
                    $("#StateId").append("<option value='" + reverseLogic[i].value + "'>" + reverseLogic[i].text + "</option>");
                }
            }
        }).change();
    });

Open in new window

This is how the Country ddl looks like

<select data-val="true"  id="CountryId" name="CountryId"><option value="Selects items">Country*</option>
<option value="25">Canada</option>
<option value="126">United States</option>
</select>

Open in new window

Comment

Question by:Camillia

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

22 Comments

LVL 53

Expert Comment

by:Scott Fell, EE MVE

ID: 404609752014-11-23

Instead of targeting .val() you can use attr("data-countrycode")

LVL 7

Author Comment

by:Camillia

ID: 404609812014-11-23

Not sure where in that jQuery I should change to use attr("data-countrycode")?

What happens to "-" code in that jQuery?

LVL 53

Expert Comment

by:Scott Fell, EE MVE

ID: 404610072014-11-23

Are you trying to create a chained select? Select one thing, then that dictates what is in the next? I use the chained plug in http://www.appelsiini.net/projects/chained

It looks very similar to what you are doing. Just send all the data to the browser at once. The 2nd select has the linked data from the first stored in the class. Just make sure you have the jquery.chained js file loaded on your server.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.chained.min.js"></script>


<select id="mark" name="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series" name="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

Open in new window

LVL 7

Author Comment

by:Camillia

ID: 404610162014-11-23

No way to change that jQuery?? I've already spent too much time on this. My manager will be on my case tomorrow. I don't want to spend more time implementing another solution and learn how to do that chain code.

>>Are you trying to create a chained select?
I already have all the data in "states" dropdown. Everything is loaded upfront. I just want to hide/display based on what country is selected.

If US is selected, I just want to display US states based on data-companycode value.
If CA is selected, hide US states and display CA states.

If there's no other way to change that jQuery, I'll look into the chains solution.

LVL 7

Author Comment

by:Camillia

ID: 404610202014-11-23

That chain solution...the first one...has it as "class" based solution. I don't have a class. I have data-countrycode.

LVL 7

Author Comment

by:Camillia

ID: 404610812014-11-23

I took a look again. Don't think it has to have "class" tag. I'm probably misunderstanding it. I'll try it and post back

LVL 55

Expert Comment

by:Huseyin KAHRAMAN

ID: 404613932014-11-23

Here is what you are trying to do:

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<select id="CountryID">
<option value="10" data-countrycode="126">US</option>
<option value="20" data-countrycode="25">Canada</option>
<option value="90" data-countrycode="25">Turkey</option>
</select>

<select id="StateIdAll" style="display:none">
<option value="111" data-countrycode="10">New York</option>
<option value="112" data-countrycode="10">Utah</option>
<option value="201" data-countrycode="20">Ontario</option>
<option value="201" data-countrycode="20">Alberta</option>
<option value="901" data-countrycode="90">Ankara</option>
<option value="902" data-countrycode="90">Istanbul</option>
</select>


<select id="StateId">
<option value="111" data-countrycode="10">New York</option>
<option value="112" data-countrycode="10">Utah</option>
</select>

<script>
$(function() {
  $("#CountryID").change(function(){
    $("#StateId option").remove();
    var $options = $("#StateIdAll option[data-countrycode='" + $(this).val() + "']").clone();
    $("#StateId").append($options);
  });
});
</script>

Open in new window

initially, put states of first country into StateId... and all states into StateIdAll, which is hidden...

then with jQuery, when CountryID changes, remove all options from StateID, and find states for selected country in StateIdAll, and dump into StateID :)

LVL 7

Author Comment

by:Camillia

ID: 404613952014-11-23

Thank you so much for doing this! I have a demo tomorrow with my boss and needed to get this done. Thanks again.

LVL 7

Author Comment

by:Camillia

ID: 404631632014-11-24

No, this is not going to work.

1. I bring up the page.
2. I load all the states. I need to have all this hidden (see #3 below) it's not hidden now but I need to make this change.
3. User has not selected a country so State dropdown should have all the states for Canada and US hidden.
4. User selected US. "data-countryid" is 126. Country Id is 126. At this point, I want to display states for US.
and vice versa.

initially, put states of first country into StateId... and all states into StateIdAll, which is hidden...

Should I initially put ALL the states in 'StateIdAll"? If so, do I need an empty "StateId" ddl? if so, would your script work? let me try it with an HTML test page.

(I've spent so much time on this, but very close)

LVL 55

Expert Comment

by:Huseyin KAHRAMAN

ID: 404631782014-11-24

StateId should have states for first country (first one will be selected in CountryID)
StateIdAll will have all states, and it will be hidden, will be used to find selected states...

so, initially, StateID will show only ststaes for first country...
when countr is changed, we will delete all from StateID, find all states from StateIdAll for selected countryID and dump all found states into StateID

LVL 7

Author Comment

by:Camillia

ID: 404631902014-11-24

I know what you're saying. But when I bring up with page, user hasn't selected anything from Country yet. I don't want to show any States if Country hasn't been selected. The dropdown has "select country" on it when the page is loaded.

But I think your code should work. I can have StateIdALL with all the states hidden.
Have StateId as empty. Nothing in it.

Then do your code still works

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<select id="CountryID">
<option value="10" data-countrycode="126">US</option>
<option value="20" data-countrycode="25">Canada</option>
<option value="90" data-countrycode="25">Turkey</option>
</select>

<select id="StateIdAll" style="display:none">
<option value="111" data-countrycode="10">New York</option>
<option value="112" data-countrycode="10">Utah</option>
<option value="201" data-countrycode="20">Ontario</option>
<option value="201" data-countrycode="20">Alberta</option>
<option value="901" data-countrycode="90">Ankara</option>
<option value="902" data-countrycode="90">Istanbul</option>

</select>


<select id="StateId">

</select>

<script>
$(function() {
  $("#CountryID").change(function(){
    $("#StateId option").remove();
    var $options = $("#StateIdAll option[data-countrycode='" + $(this).val() + "']").clone();
    $("#StateId").append($options);
  });
});
</script>

Open in new window

LVL 55

Expert Comment

by:Huseyin KAHRAMAN

ID: 404631962014-11-24

I made it simpler for you:

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<select id="CountryID">
<option value="10" data-countrycode="126">US</option>
<option value="20" data-countrycode="25">Canada</option>
<option value="90" data-countrycode="25">Turkey</option>
</select>

<select id="StateIdAll" style="display:none">
<option value="111" data-countrycode="10">New York</option>
<option value="112" data-countrycode="10">Utah</option>
<option value="201" data-countrycode="20">Ontario</option>
<option value="201" data-countrycode="20">Alberta</option>
<option value="901" data-countrycode="90">Ankara</option>
<option value="902" data-countrycode="90">Istanbul</option>
</select>


<select id="StateId">
</select>

<script>
function GetAllStates(){
  $("#StateId option").remove();
  var $options = $("#StateIdAll option[data-countrycode='" + $("#CountryID").val() + "']").clone();
  $("#StateId").append($options);
}

$(function() {
  $("#CountryID").change(function(){
    GetAllStates();
  });
  GetAllStates();
});
</script>

Open in new window

just load all states into StateIdAll and good to go... SateId will be null initially

LVL 55

Accepted Solution

by:Huseyin KAHRAMAN

Huseyin KAHRAMAN earned 500 total points

ID: 404632042014-11-24

you need select a country on top? if yes here it is:

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<select id="CountryID">
<option value="0" data-countrycode="0">select a country...</option>
<option value="10" data-countrycode="126">US</option>
<option value="20" data-countrycode="25">Canada</option>
<option value="90" data-countrycode="25">Turkey</option>
</select>

<select id="StateIdAll" style="display:none">
<option value="111" data-countrycode="10">New York</option>
<option value="112" data-countrycode="10">Utah</option>
<option value="201" data-countrycode="20">Ontario</option>
<option value="201" data-countrycode="20">Alberta</option>
<option value="901" data-countrycode="90">Ankara</option>
<option value="902" data-countrycode="90">Istanbul</option>
</select>


<select id="StateId">
</select>

<script>
function GetAllStates(){
  $("#StateId option").remove();
  var $options = $("#StateIdAll option[data-countrycode='" + $("#CountryID").val() + "']").clone();
  $("#StateId").append($options);
}

$(function() {
  $("#CountryID").change(function(){
    GetAllStates();
  });
  GetAllStates();
});
</script>

Open in new window

LVL 7

Author Comment

by:Camillia

ID: 404632082014-11-24

Thanks, let me try it. I'll post later tonight.

LVL 7

Author Comment

by:Camillia

ID: 404632192014-11-24

Yes, I select a country on top. Without any country selection, my manager doesn't want to see any states in the ddl unless the user has selected a country. Let me try your second solution.

LVL 7

Author Comment

by:Camillia

ID: 404654382014-11-25

It works! but I have another issue. I have a jQuery datepicker on the page. That was working. Now that I add this country code, it breaks the datapicker.

(I can open another question, if needed).

This line breaks the datepicker

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>

Open in new window

I don't know why the datepicker breaks. If I comment that date code out, country/state work. If I put date code back, then datepicker breaks.

I've attached the entire html page. I wonder if there's a jQuery conflict somewhere in there.
entirepage.txt
datepicker-error.png

LVL 55

Expert Comment

by:Huseyin KAHRAMAN

ID: 404654432014-11-25

put these

var $datepicker = $("#PurchaseDate");
$datepicker.datepicker({ maxDate: new Date() });
$datepicker.datepicker();
$datepicker.datepicker('setDate', '');

into

$(function() {
$("#CountryId").change(function () {

GetAllStates();
});
GetAllStates();
>>>>>> here
});

and get rid of this code:

jQuery(function ($) {
var $datepicker = $("#PurchaseDate");
$datepicker.datepicker({ maxDate: new Date() });
$datepicker.datepicker();
$datepicker.datepicker('setDate', '');
});

and this should be another question, so i can get more points :)

LVL 7

Author Comment

by:Camillia

ID: 404654492014-11-25

ok, I just removed that line and both datepicker and country/state work.

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>

Open in new window

But let me try your solution as well.

LVL 55

Expert Comment

by:Huseyin KAHRAMAN

ID: 404654522014-11-25

also, why do you have 2 jqueries here

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>

you are just calling for problems by adding 2 different version of same js library! get rid of one...

LVL 7

Author Comment

by:Camillia

ID: 404654572014-11-25

Yes, works the way you have it. I did remove that jquery-1.10.2 reference. It works without it. Maybe because it's in Scripts folder and MVC has a Bundle reference. Not sure.

LVL 7

Author Comment

by:Camillia

ID: 404654662014-11-25

Yes, removed one of them. I need to clean these libraries.

Thank you so much for being patient and sticking with this question.

LVL 7

Author Closing Comment

by:Camillia

ID: 404655672014-11-25

Thanks again.

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

jquery Dialog box with AJAX request on the page

Article by: Jeffrey

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page. The dialog box was using relative positioning to be positioned next to a form field I had on the page. Everything was working…

jQuery

Using Ajax in CodeIgniter

Article by: Marco

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.

PHP, jQuery, and Form Actions

Video by: Marco

The viewer will learn how to dynamically set the form action using jQuery.

Introduction to jQuery (Part 1)

Video by: Jason

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)