Link to home
Start Free TrialLog in
Avatar of t3chguy
t3chguyFlag for United States of America

asked on

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>';"
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

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.
Avatar of t3chguy

ASKER

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.
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?
Avatar of t3chguy

ASKER

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.
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

Avatar of t3chguy

ASKER

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.
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

ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of t3chguy

ASKER

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.
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.
Avatar of t3chguy

ASKER

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!
You're welcome. Thanks for the points.