t3chguy
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:
Here is the Json returned from the ajax call: Its in an array called "item_inventory"
Finally, here is the PHP code I'm trying to append the matching inventory to:
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>';"
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 + '"e='+ 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);
}
});
});
});
});
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
)
)
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'];
}
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"></
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();
It will always assign the same value. Were you expecting to iterate of a collection of values?
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:
Then you have this in a loop in the jQuery:
If you had an index in your jQuery loop you could do something like this:
echo '<input type="hidden" name="item_id[]" class="current_product" value = "'.$val['item_id'].'">';
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" />
Am I right so far?Then you have this in a loop in the jQuery:
var current_product = $(".current_product").val();
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();
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);
}
});
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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...
If that's the case then... $(this).next('strong').chi ldren('spa n.current_ loc_inv'). html(v.loc ation_inve ntory);
...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.
<input type="hidden" name="item_id[]" class="current_product" value = "133" />
<strong>Blah blah <span class="current_loc_inv">One</span> blah blah</strong>
... 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').chi
...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.
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.
Open in new window
Should be:Open in new window
I have not studied the code thoroughly enough to know if that will fix the issue however.