Jump to content

Works on Desktop, but improperly on mobile.


turkspartan
 Share

Recommended Posts

Hello guys. I have been stuck on this over 2 weeks.

If you go to my site at http://abautoglass.net/contact-us/

there is a form. On PC, I can select year, make, model, and trim just fine. IF I try this on mobile device, I select year, then make. BUT when it comes to selecting model, it starts to show models for ALL cars and not the one I specified....

 

Please please please help if you can :'(

 

Here is the javascript that goes with it in the footer.

PS: I think its because it gets make and model at the same time.

<script>
	var protoCall = "https://";
	var host = "api.edmunds.com";

    // Make sure to change the API KEY
	var apiKey = "kdrpch68q5kmjrb42nmne562";
	var fmt = "json";
	var standardParams = "&fmt=" + fmt +  "&api_key=" + apiKey + "&callback=?"; 
	var $yearSelect = jQuery('#ajYears');
	var $makeSelect = jQuery('#ajMakes');
	var $modelSelect = jQuery('#ajModels');
	var $styleSelect = jQuery('#ajStyles');
	
	// lets bind some events on document.ready.
	jQuery(function(){
		
		$yearSelect.on('change', function() { getMakeModelsByYear()});
		$makeSelect.on('change', function() { enableModelDropdown() });
		$modelSelect.on('change', function() { getStyles() });
		
		// lets build the year drop down.
		ajEdmundsBuildYear();
		
	});
	
	// method to build the year drop down.
	function ajEdmundsBuildYear()
	{
		var baseYear = 1990,
			endYear = new Date().getFullYear();
		$yearSelect.empty();
		$yearSelect.append('<option value="-1">Select Year</option>');
		for(var yyyy=baseYear; yyyy<=endYear; yyyy++)
		{
			$yearSelect.append('<option value="' + yyyy + '">' + yyyy +'</option>');	
		}
	}
	
	// get the makes and models for a year in one go... 
	function getMakeModelsByYear()
	{
		var year = $yearSelect.val(),
			endPoint = "/api/vehicle/v2/makes",
			view = "basic",
			options = "year=" + year + "&view=" + view + standardParams,
			postURL = protoCall + host + endPoint + "?" + options;
		jQuery.getJSON(postURL, 
			function(data) {
				 // clear the make drop down... re add the first option... remove dsiabled attr.
                 $makeSelect.empty();
                 $makeSelect.append('<option value="-1">Select Make</option>');
                 $makeSelect.removeAttr('disabled'); 
                 $modelSelect.empty();
                 $modelSelect.append('<option value="-1">Select Model</option>'); 
                 
                 // loop the makes... each make contains model... add the make in make drop down and models in model dd
                 jQuery.each(data.makes, function(i, val) {
                      make = data.makes[i];
                      $makeSelect.append('<option value="' + make.niceName + '">' + make.name + '</option>');
                      jQuery.each(make.models, function(x, val){     
                           model = make.models[x];
                           $modelSelect.append('<option make="' + make.niceName +'" value="' + model.niceName + '">' + model.name + '</option>');                  
                      });
                 });
			});
	}
	
	// since we already grabed the models... 
	// now just matter of showing only the matching models for a make.
	function enableModelDropdown()
	{
		var make = 	$makeSelect.val();
		$modelSelect.removeAttr('disabled'); 
		$modelSelect.find('option').not('[value="-1"]').hide();
		$modelSelect.find('option[make=' + make + ']').show();
		
	}
	
	// grab the styles... pretty much same as 
	// getMakeModelsByYear()
	function getStyles()
	{
		var year = $yearSelect.val(),
			make = $makeSelect.val(),
			model = $modelSelect.val(),
			endPoint = "/api/vehicle/v2/" + make + "/" + model + "/" + year + "/styles",
			view = "basic",
			options = "view=" + view + standardParams,
			postURL = protoCall + host + endPoint + "?" +  options;
		jQuery.getJSON(postURL, 
			function(data) {
                 $styleSelect.empty();
                 $styleSelect.removeAttr('disabled'); 
                 $styleSelect.append('<option value="-1">Select Style</option>'); 
                 jQuery.each(data.styles, function(i, val) {
                      style = data.styles[i];
                      $styleSelect.append("<option value='" + style.id + "'>" + style.name + "</option>");
                 });
			});
	}
	</script>
Edited by turkspartan
Link to comment
Share on other sites

You may need to do some debugging on mobile. With Firefox Mobile, for example, you can use USB to debug the browser on a laptop or desktop. You may need to add breakpoints to that code or some console.log statements to figure out what is going on. It also enables the model dropdown before you select a make.

Link to comment
Share on other sites

You may need to do some debugging on mobile. With Firefox Mobile, for example, you can use USB to debug the browser on a laptop or desktop. You may need to add breakpoints to that code or some console.log statements to figure out what is going on. It also enables the model dropdown before you select a make.

Oh god, I don't even know how I am going to make that happen, but I'll try.

 

Thanks. If you or anyone else has other suggestions in the mean time, don't hesitate to let me know :)

Link to comment
Share on other sites

You are using multiple id ref when they should unique to eack page.

<p id="left">Year:<br /><select id="ajYears" name="ajYears"><br />
	    </select></p>
<p id="right">Make:<br /><select id="ajMakes" name="makes" disabled="disabled"></p>
<p>	    </select></p>
<p id="left">Model:<br /><select id="ajModels" name="models" disabled="disabled"></p>
<p>	    </select></p>
<p id="right">Trim:<br /> <select id="ajStyles" name="styles" disabled="disabled"></p>
<p>	    </select></p>
The opening select tag and in closing select tag are in separate paragraph tags, which will result in the select not properly rendered see how it will render

From

<p><select></p>

<p></select></p>

 

To

<p>

<select>

</select>

</p>

<p>

<select>

</select>

</p>

 

Suggest you use div instead

 

<div>

<select>

</select>

</div>

No other elements such as br or opening/closing tag of paragraps/div should appear between select opening and closing tags, only option elements.

Edited by dsonesuk
Link to comment
Share on other sites

You are using multiple id ref when they should unique to eack page.

<p id="left">Year:<br /><select id="ajYears" name="ajYears"><br />
	    </select></p>
<p id="right">Make:<br /><select id="ajMakes" name="makes" disabled="disabled"></p>
<p>	    </select></p>
<p id="left">Model:<br /><select id="ajModels" name="models" disabled="disabled"></p>
<p>	    </select></p>
<p id="right">Trim:<br /> <select id="ajStyles" name="styles" disabled="disabled"></p>
<p>	    </select></p>
The opening select tag and in closing select tag are in separate paragraph tags, which will result in the select not properly rendered see how it will render

From

<p><select></p>

<p></select></p>

 

To

<p>

<select>

</select>

</p>

<p>

<select>

</select>

</p>

 

Suggest you use div instead

 

<div>

<select>

</select>

</div>

No other elements such as br or opening/closing tag of paragraps/div should appear between select opening and closing tags, only option elements.

 

 

I got rid of the right and left id tags, but that wasn't interfering. I also did the other changes you wanted and still no result on mobile.

 

I think the problem starts after this line "// get the makes and models for a year in one go... " It gets makes and models at the same time, when it would be better to get it one after another.

BUT again, I have no idea why this works on desktop but not mobile :(

Link to comment
Share on other sites

Seems to work on my tablet and mobile, and IF you have removed the duplicate right, left id tags, should I not be able to see them when i view source? because i can! Also your css is wrong you have two 'background,background-color:' properties also I know that a <divp> is not a valid element.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...