Onchange event triggered by a previous onchange event

I'm using Bootstrap tabs, and on tab one, a user is to select their primary shipping location. I have an onchange event for when that primary shipping location is changed, it goes out, makes an ajax call, and returns the inventory each item at the location selected.

Now, what I'm trying to do, unsuccessfully, is when the user goes to Tab two, display something that says, "the primary shipping location contains "x" amount in their inventory.

Unfortunately, my program is only returning the last item inventory level, instead of both items.

Here is the jQuery code, which makes the ajax call, and displays the HTML on the page:

	//Show only matching durations on rental terms selection
	$('.primaryWarehouse').change(function() {
		window.console.log(depots);
		
		$('.curInventory').val();
		$('.accInv').empty();
		
		var location = $(".primaryWarehouse").val();
		var quote = $(".quote").val();
		var iteration = $(".iteration").val();
		var dataString = 'loc='+ location + '&quote='+ quote +'&iteration='+iteration+'&type=check_all_items'; 
	
		$.getJSON(systemURL + "includes/ajax/getInventory.php?" + dataString, function (data) {
			
			
		$(".itemWarehouses").val(location);
		$(".itemWarehouses").change(function() {
			$.each(data.item_inventory, function (key, v) {
				
				var current_product = $(".current_product").val();
				alert(current_product);
				
				if(current_product = v.product_id) {
					$('.current_loc_inv').html(v.location_inventory);
				}
			});
		});
	});
});

Open in new window


Here is the Json returned from the ajax call: Its in an array called "item_inventory"

<pre>Array
(
    [0] => Array
        (
            [quote_line] => 67
            [item_id] => 133
            [product_id] => 1
            [location] => 10
            [location_inventory] => 4
        )

    [1] => Array
        (
            [quote_line] => 68
            [item_id] => 134
            [product_id] => 6
            [location] => 10
            [location_inventory] => 14
        )

)

Open in new window


Finally, here is the PHP code I'm trying to append the matching inventory to:

foreach($new_line_array AS $key => $val) {
	if ($val['quote_line_id'] != $last_item) {
		echo '<input type="hidden" name="item_id[]" class="current_product" value = "'.$val['item_id'].'">';
		
		$text = '<strong>' . $val['original_qty'] . '  of the ' . $val['make_model']. ' products have been ordered.  Select the warehouse(s) below. The primary warehouse selected currently has <span class="current_loc_inv"></span> currently available.</strong>';
							
		echo '</table><br />';
		echo $text . '<br />';
		echo '<table class="table table-striped table-inverse table-bordered">';
	} 

	echo '<table class="table table-striped table-inverse table-bordered">';

	echo '<tr>
				<td>' . $val['quote_line_id'] . '</td>
				<td>
					<div class="form-group">
						<label class="col-sm-2"><span class="asterisk">*</span>Shipping Warehouse</label>
						<div class="col-sm-4">
							<select name="itemWarehouses" class="form-control itemWarehouses">
								<option value = "">Select a Shipping Location</option>';
									foreach(Location::fetch_all_locations() AS $locs) {
										echo '<option value = "'.$locs['branch'].'">'.$locs['branchname'].' ('.$locs['depotNum'].')</option>';
								}
								echo '
							</select>
						</div>
					</div>
				</td>
			</tr>';

	#echo '</table><br /><br />';
	$last_item = $val['quote_line_id'];
}

Open in new window


Essentially what I'm trying to have happen is that when I initially set the primary warehouse on tab 1, it'll look at the item_id class in tab 2, look up the inventory for each item_id on the page, and append it to the sentence in the PHP code that contains, "currently has <span class="current_loc_inv"></span> currently available.</strong>';"
LVL 1
t3chguyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
You do have a syntax error in the jQuery on this conditional:
if(current_product = v.product_id) {

Open in new window

Should be:
if(current_product == v.product_id) {

Open in new window

I have not studied the code thoroughly enough to know if that will fix the issue however.
t3chguyAuthor Commented:
Thank you for pointing that out, I have fixed the syntax error, but the issue still exists, where I'm still grabbing the last item_id as the item_id for all items on the page.
Tom BeckCommented:
This line is odd:
var current_product = $(".current_product").val();

Open in new window

It will always assign the same value. Were you expecting to iterate of a collection of values?
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

t3chguyAuthor Commented:
Yes, exactly!  I've got a foreach loop in php that assigns iterates over each item with it's own id, and I was hoping to pass all those IDs over to javascript so i can match that with the proper inventory level.
Tom BeckCommented:
I see this line inside a foreach loop in the php script:
echo '<input type="hidden" name="item_id[]" class="current_product" value = "'.$val['item_id'].'">';

Open in new window

That should produce a collection of inputs distributed however on the page:
<input type="hidden" name="item_id[]" class="current_product" value = "133" />
       <input type="hidden" name="item_id[]" class="current_product" value = "134" />
       <input type="hidden" name="item_id[]" class="current_product" value = "135" />

Open in new window

Am I right so far?

Then you have this in a loop in the jQuery:
var current_product = $(".current_product").val();

Open in new window

current_product will equal 133 every time, the first input with class="current_product", because you are not specifying which input in the collection you want to target.

If you had an index in your jQuery loop you could do something like this:
var current_product = $(".current_product").eq(index).val();

Open in new window

t3chguyAuthor Commented:
Yes, you are absolutely right so far, and that explains the exact problem I'm having and what is occurring on my script.  How can I create an index in my loop?  I'm not too well-versed in javascript.
Tom BeckCommented:
Maybe this is what you really need. Loop over all the hidden inputs for each inventory item.
$.each(data.item_inventory, function (key, v) {
				
		$(".current_product").each(function(){
			alert(current_product);
			if($(this).val() == v.product_id) {
			   $(this).next('strong span.current_loc_inv').html(v.location_inventory);
			}
		});
	});

Open in new window

Tom BeckCommented:
You will need to target the proper span tag as well.

$.each(data.item_inventory, function (key, v) {
				
		$(".current_product").each(function(){
			alert(current_product);
			if($(this).val() == v.product_id) {
			   $(this).next('strong').children('span.current_loc_inv').html(v.location_inventory);
			}
		});
	});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
t3chguyAuthor Commented:
That makes sense, the only issue I'm having with it is that it's not adding the value of v.location_inventory to the span class on the HTML page.
Tom BeckCommented:
It's probably not targeting the span tag properly. I'm imagining an output like this for each product...
<input type="hidden" name="item_id[]" class="current_product" value = "133" />
       <strong>Blah blah <span class="current_loc_inv">One</span> blah blah</strong>

Open in new window

... a hidden input with class="current_product" directly followed by a sibling <strong> tag with a child <span class="current_loc_inv">.

If that's the case then... $(this).next('strong').children('span.current_loc_inv').html(v.location_inventory);
...is the correct targeting selector.

If not, then you will have to adjust.

Post the relevant piece of rendered source code if you need help with the selector.
t3chguyAuthor Commented:
I was able to figure out the selector piece per the code you provided in the last comment.  Thank you so much for the help!
Tom BeckCommented:
You're welcome. Thanks for the points.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.