Solved

Wordpress Jquery Function Not Working: Selection List Function Not Working Properly in Wordpress Website.

Posted on 2016-11-18
3
28 Views
Last Modified: 2016-11-19
Background: I have a function which I wrote, which allows me to select an option from one list and set the default selection of another list. (See the code file attached). This file works really well, perfectly as a matter of fact.

Problem:

When I try and run this jQuery function on a Wordpress Site using the exact same "Element ID's" and code from the attached HTML file, it completely fails.

What I have tried so far:

1. I have tried to place the code inside the body of the page, the header of the page as well as the footer. Nothing worked.

2. I have tried to change the element ID's, nothing.

3. When I am logged into Wordpress and I select an option, and refresh the page, the selection works, but only after REFRESHING the page.

4. I have tried to debug the Wordpress page in question, but to no avail, the code just does not work there. There is not anything to debug - it just won't work. What am I missing?

5. I know I am using the right element id's because when I use the code from the attached jqsnippet.txt file, it tells me which element value I have selected, when I select it.

6. Also, I need to have completely autonomous code, because I am manipulating values from the "Post Type Builder" plugin. Should not matter however, I should be able to type TWO ELEMENT ID's into the function and be off to the races. I just need to get the existing function, or something similar to work in my Wordpress site.

The WordPress page in question is here: http://www.wjdoe.com/firstowner/testing/

jQuery/JS Element Finder:          
jqsnippet.txt

HTML That Works
Selection_Tester3.html

If anyone could please help me with this, it would be much appreciated. I am essentially pulling my hair out, at this point. The solution to this is probably trivial, but I could use all of the help I can get. I am not looking for the complete answer here, just a place to start. A complete answer would be nice, just not expected ;)
0
Comment
Question by:Richard Bennett
3 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41894111
Lots of questions here
1. You go to all the trouble of including jQuery and defining a .ready() function and then use plain getElementById to access your elements?
2. In your test code you have the line
<p>Select the top list and the second list should populate with the corresponding related values.</p>
Suggesting that select 2 should change and only show items relating to select 1 - instead it just selects the first item that pertains to the first.
3. Not sure what the snippet is meant to achieve - doesn't appear to do anything - but I would have expected it to be linked to an onchange on the first.
4. You are setting an id on each of your options - not sure why?

What you probably want is dynamically assigned dropdowns where 2 populates based on the value of 1
Something like this
HTML
Options here - either put a -- SELECT MAKE -- and -- SELECT MODEL -- as default items - or make the second default to only the Honda items as that will be the default on load
<select id="ptb_testbox_temp_make">
<option id="1">Honda</option>
<option id="2">Ford</option>
<option id="3">Toyota</option>
</select>

&nbsp;

<select id="ptb_testbox_temp_model">
<option id="8">Honda Civic</option>
<option id="9">Honda CRV</option>
<option id="10">Honda Prelude</option>
<option id="11">Honda Pilot</option>
</select>

Open in new window

jQuery
<script>
jQuery(function($) {
var models = {
 Honda: {
    8: 'Honda Civic',
    9: 'Honda CRV',
    10: 'Honda Prelude',
    11: 'Honda Pilot'
  },
 Ford: {
    4: 'Ford Mustang',
    5: 'Ford Fiesta',
    6: 'Ford F-150',
    7: 'Ford Escort'
    },
 Toyota: {
    12: 'Toyota Prius',
    13: 'Toyota RAV',
    14: 'Toyota Corolla',
    }
};
  jQuery( "#ptb_testbox_temp_make" ).change(function () {
    var val = $(this).val();
    jQuery('#ptb_testbox_temp_model').empty();
    for(var i in models[val]) {
      jQuery('#ptb_testbox_temp_model').append(
        jQuery('<option/>').html(models[val][i]).val(i)
      );
    }
  });
});
</script>

Open in new window

Note we have a data structure that breaks the options down by first option. We then use the value of the first select to populate the second.

You can see your example working here
There is another sample you can look at here

Now looking at your WordPress site you have this
<select data-placeholder="Show All Make" name="make" id="ptb_testbox_temp_make">
  <option value="">Show All Make</option>
  <option  value="make_1">Ford</option>
  <option  value="make_2">Honda</option>
  <option  value="make_3">Toyota</option>
</select>
<select data-placeholder="Show All Model" name="model" id="ptb_testbox_temp_model">
  <option value="">Show All Model</option>
  <option  value="model_1">Honda Accord</option>
  <option  value="model_2">Honda Civic</option>
  <option  value="model_3">Honda Prelude</option>
  <option  value="model_4">Ford Mustang</option>
  <option  value="model_5">Ford Festiva</option>
  <option  value="model_6">Ford Festiva</option>
  <option  value="model_7">Toyota Prius</option>
  <option  value="model_8">Toyota Rav4</option>
  <option  value="model_9">Toyota Corolla</option>
</select>

Open in new window

What do you notice about this select compared to yours?
1. No id's
2. value attributes

In your HTML sample - the value will default to the label because you did not define a value
In the Word Press sample this is not the case.

So if you are going to use the sample above you will have to change the models array to use the values in the selects rather than the sample values.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 41894148
Your issue is the use of the jQuery Chosen Plugin which replace your select boxes  by UL and LI to display sweet HTML dropdown instead.
<select> are not well customizable unlike <UL> and <LI>.

In your current test page, just replace :
	<script>

jQuery(document).ready(function($) {

jQuery( "#ptb_testbox_temp_make" )
 .change(function () {
  var str = "";
   jQuery('option:selected', this).each(function() {
    str += jQuery( this ).text() + " ";
    // jQuery("#ptb_testbox_temp_model option").removeAttr('selected');
    jQuery("#ptb_testbox_temp_model option:contains(" + str + ")").first().attr('selected','selected');
     });
    })
    .change();
  });

</script>

Open in new window

by :
<script>
	jQuery(function($) {

		$("#ptb_testbox_temp_make").change(function () {
			var $selectedMake = $("option:selected", this);
			var chosen = $selectedMake.val()?$selectedMake.text():"";
			$("#ptb_testbox_temp_model").next("div").find(".chosen-search input").val(chosen + " ")
		}).change();

		$("#ptb_testbox_temp_model").on("chosen:hiding_dropdown", function() {
			setTimeout(function() {
				var $make = $("#ptb_testbox_temp_make");
				var $selectedMake = $("option:selected", $make);
				var chosen = $selectedMake.val()?$selectedMake.text():"";
				$("#ptb_testbox_temp_model").next("div").find(".chosen-search input").val(chosen + " ");
			},100);
		});

	});
</script>

Open in new window


toyotaall modelshonda
0
 

Author Closing Comment

by:Richard Bennett
ID: 41894389
leakim971, you are the man sir! If I knew where you were I would by you beer, nay I would buy you a KEG of Beer + Plus 2 Six Packs! I cannot thank you enough! This works perfectly. And to the powers that be at Experts Exchange - you just made me a lifetime member.
1

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…

758 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

22 Experts available now in Live!

Get 1:1 Help Now