Hey guys. I am developing a full system for my company. I have VERY LITTLE understanding of jquery and this is my first time working with it significantly. I clearly need to get a book and start reading about it. Until then, please help me get this working.
I have a “check in” page where staff members will be checking in the received orders. Because an order can have multiple items, and one form the php looks through for each item to check in.
If an item is received BUT not the proper item there is a field to search for the item received. The ajax then lists the search results which can be selected. There is also and ajax portion that checks to see if the device has a valid ESN IF it is in the array.
I built the page without the form tags. Once I completed the page and started testing, my ajax calls for the product search and check esn field were posting instead of performing their function. Before the form tag they performed perfectly. So, I then modified the product search ajax. It worked PERFECTLY and only runs itself on an enter. However, after doing the same thing to the ajax call for “checking esn” it WOULD NOT work. So I reverted back to the old code. The ESN check should be performed on change… so after an enter or they tab to the next field etc… where as the product search can be “just enter” or on change.
Lastly, I was trying to “hide” the drop down for each item my page displays once the product search returns results. Once the user selects the radio, the drop down will be shown by slideDown. You can see that commented out at the bottom but it did not work. I assume it has to do with it being an ajax call.
So, basically 3 times. I need both ajax calls to run but NOT to post the full form to my page and prematurely process information before everything can be processed. Lastly, the drop down be hidden until an input is selected for the Ajax call. If the another radio is selected it hides the shown one and slides the new one down.
Thanks so much for any help guys! (: Its been so frustrating :mad:
<script type="text/javascript">
$(function() {
//Show/Hide Drop down radios
$('.optRadio').hide();
$('.optional-li').hide();
$('input[name^="optRadio"]').change(function(){
var selected = $(this).val();
var classUp = $(this).attr("name");
$('.'+classUp).slideUp("fast");
$('#dd-'+selected).slideDown("fast");
if ($("[id^='noProduct-']").is(":checked")) {
$(".text-" + classUp).hide("fast");
} else {
$(".text-" + classUp).show("fast");
}
});
//Show/Hide ESN override radios
$('.masterESN').hide();
$('.masterESN-modify').click(function() {
var myClass = $(this).attr("id");
$('input[name="answer-'+myClass+'"]').prop('checked', false);
$('#open-'+myClass).slideToggle('fast');
event.preventDefault();
});
//Form for product searching ajax
$("[id^='product-search']").bind("keypress", function (e) {
if (e.keyCode == 13) {
var myClass = $(this).attr("class");
// getting the value that user typed
var searchString = $("#product-search" + myClass).val();
// forming the queryString
var data = 'productSearch='+ searchString + '&formID=' + myClass;
// if searchString is not empty
if(searchString) {
// ajax call
$.ajax({
type: "POST",
url: "<?php echo $path ?>ajax/product_search.php",
data: data,
beforeSend: function(html) { // this happens before actual call
$("#results" + myClass).html('');
$("#searchresults" + myClass).show();
$(".word").html(searchString);
},
success: function(html){ // this happens after we get results
$("#results" + myClass).show();
$("#results" + myClass).append(html);
}
});
}
return false;
}
});
//Check ESN Ajax
$("[id^='inventory-ESN-']").change(function() {
var arr = [<?php
$j = 1;
foreach($checkESNArray as $value){
echo "'$value'";
if(count($checkESNArray) != $j)
echo ", ";
$j++;
}
?>];
var carrier = $(this).attr("class");
var idVersion = $(this).attr("id");
if($.inArray(carrier,arr) > -1) {
// getting the value that user typed
var checkESN = $("#inventory-ESN-" + idVersion).val();
// forming the queryString
var data = 'checkESN='+ checkESN + '&carrier=' + carrier;
// if checkESN is not empty
if(checkESN) {
// ajax call
$.ajax({
type: "POST",
url: "<?php echo $path ?>ajax/checkESN.php",
data: data,
beforeSend: function(html) { // this happens before actual call
$("#esnResults" + idVersion).html('');
},
success: function(html){ // this happens after we get results
$("#esnResults" + idVersion).show();
$("#esnResults" + idVersion).append(html);
}
});
}
return false;
}
});
});
//This should hide the ajax drop down until the radio is clicked. This doesnt work.
// $('input[name^="new-device-"]').change(function(){
// var selected = $(this).attr("name");
// $('.condition-dd').slideUp("fast");
// $('input[name="dd-'+selected +'"]').slideDown("fast");
// });
</script>