Where should I put this +- Quantity code?

JavaScript and client side scripting.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

Sorry to have confused this thread. The three points are:
1) Making the + - work. (not sure this is possible).
2) Making the ajax_thickness.php (id of DIV quote) reset or disappear until called again.
3) Figuring out why it sends the ID to Ajax, and shows TWO entries, and making it show just one.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

Ok I have fixed some issues.
When you select Depth option, only ONE comes up. I figured out why.
When you select the Length option, Thickness comes up just once as well.

So what I need to be able to do, is when Depth is simply just Clicked, it clears id='dimensions_length' and id='dimensions_thickness'. So rather than forcing them to "Reset", just clicking the Dropdown (not necessarily changing it), will reset it.

Can this be done?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Where should I put this +- Quantity code?

Post by Celauran »

simonmlewis wrote:But I don't know about "listeners". I don't know how they work.

Code: Select all

$('select[name="depth"]').change(function() {
        // do stuff
});
.change() is your listener. onChange is an event, as you're aware. .change() is a jQuery method that listens for change events. 'select[name="depth"]' is your selector. Selectors work mostly the same as they do in CSS. So $('select[name="depth"]').change(function() {}) attaches the change listener to that selector, meaning jQuery listens for an onChange event to be triggered by an element matching the selector criteria -- in this case a select element with the name "depth" -- and then executes the closure passed to the listener. You want to trigger an ajax call when the selected item changes, so you pass your ajax call to that closure.

http://api.jquery.com/jquery.ajax/

jQuery's .ajax method accepts a TON of options, but you don't need to worry about most of them. url, type, data (for POST requests), and dataType you will surely need, as well as probably success. So you're looking at something more or less like this:

Code: Select all

$('select[name="depth"]').change(function() {
	var depth = $(this).val();
	$.ajax({
		url: '/ajax_premier.php?depth=' + depth,
		type: 'GET',
		success: function(data, status, request) {
			// Do something with the results here
			// What you do depends on what the results are
		}
	});
});
Does that make any sense?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

Kind of. .change listens and does this, rather than onchange that does something on a trigger.
So how do I use that, so that when $depth changes (or the onchange is run), the ajax_thickness.php file, or the id='dimension_thickness' div that contains it, is reset?

Or are you saying, that I can fake the $length submission in that query, but posting a "null" type value to the thickness query, which generates nothing?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Where should I put this +- Quantity code?

Post by Celauran »

simonmlewis wrote:Kind of. .change listens and does this, rather than onchange that does something on a trigger.
No. They work the same way.
simonmlewis wrote:when $depth changes (or the onchange is run)
Those are the same thing.
simonmlewis wrote:So how do I use that, so that when $depth changes (or the onchange is run), the ajax_thickness.php file, or the id='dimension_thickness' div that contains it, is reset?
Depends on what you're sending back from the AJAX request. You can target the div by selector and use the .html() method to update the contents.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

Really no idea if I am going down the right lines here.
When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content.
So I added the html() code to the ajax script that sends data for the next dropdown.
But it doesn't do anything. I've obviously done it wrong. I thought I could just tell the DIV to be empty.

Code: Select all

function checklength(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("dimension_length").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax_length.php?depth="+str,true);
xmlhttp.send();

$( "div.dimension_productthickness" )
.html( "" );
}


<select name='depth'  onChange=\"checklength(this.value);\" class='selectpremier'>
 <option value='0'>Choose</option>";
  while ($rowdepth = mysql_fetch_object($resultdepth))
  {
  if ($rowdepth->depth == "") { echo "<option value='$rowdepth->depth'>n/a</option>";}
  else { echo "<option value='$rowdepth->depth'>$rowdepth->depth\"</option>";}
  }
  echo "</select>

<div id='dimension_thickness' class='product_dimensionthickness'></div>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

A slightly better way of doing this, might be:
Selects first set of options.
Second available set appears.
First set disabled on change.
Second set disables on change.

And a link for "Reset Selection" which somehow clears the lot (or just reloads the page??).

http://jsfiddle.net/PK2vc/
I've tried this method, but I think it has problems for my usage. Can you help me fathom how to make "depth" disabled on change?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

http://www.webdeveloper.com/forum/showt ... u-onchange
Bingo.
Now all I need is a click of a button that resets them all, without having to turn the page over....mmmmmmmm
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

I noticed this has been put into Javascript, which makes sense.

Maybe the Subject should be changed.

So I now have the three <select> dropdown fields doing what I want. As the first is select, it disables, as the second is select, it updates the third. I would like to disables the second on change as well.

However, right now I just want to know how I can clear the THREE Ajax submissions, and put the first $depth field back to normal (not disabled) by the click of a hyperlink or <form> button.

Anyone know?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

And the answer to the + - puzzle is here... so simple.

http://www.dynamicdrive.com/forums/show ... form-field
One line of code that does it without the need of any external scripts.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply