Solved

Change this jQuery to look for a word

Posted on 2014-11-23
22
125 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

0
Comment
Question by:Camillia
  • 14
  • 6
  • 2
22 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40460975
Instead of targeting .val() you can use attr("data-countrycode")
0
 
LVL 7

Author Comment

by:Camillia
ID: 40460981
Not sure where in that jQuery I should change to use attr("data-countrycode")?

What happens to "-" code in that jQuery?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40461007
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

0
 
LVL 7

Author Comment

by:Camillia
ID: 40461016
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.
0
 
LVL 7

Author Comment

by:Camillia
ID: 40461020
That chain solution...the first one...has it as "class" based solution. I don't have a class. I have data-countrycode.
0
 
LVL 7

Author Comment

by:Camillia
ID: 40461081
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
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40461393
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 :)
0
 
LVL 7

Author Comment

by:Camillia
ID: 40461395
Thank you so much for doing this! I have a demo tomorrow with my boss and needed to get this done. Thanks again.
0
 
LVL 7

Author Comment

by:Camillia
ID: 40463163
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)
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40463178
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
0
 
LVL 7

Author Comment

by:Camillia
ID: 40463190
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

0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 51

Expert Comment

by:HainKurt
ID: 40463196
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
0
 
LVL 51

Accepted Solution

by:
HainKurt earned 500 total points
ID: 40463204
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

0
 
LVL 7

Author Comment

by:Camillia
ID: 40463208
Thanks, let me try it. I'll post later tonight.
0
 
LVL 7

Author Comment

by:Camillia
ID: 40463219
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.
0
 
LVL 7

Author Comment

by:Camillia
ID: 40465438
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
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40465443
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 :)
0
 
LVL 7

Author Comment

by:Camillia
ID: 40465449
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.
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 40465452
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...
0
 
LVL 7

Author Comment

by:Camillia
ID: 40465457
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.
0
 
LVL 7

Author Comment

by:Camillia
ID: 40465466
Yes, removed one of them. I need to clean these libraries.

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

Author Closing Comment

by:Camillia
ID: 40465567
Thanks again.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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)

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now