We Keep Coding

Code Works in JSFiddle But not Localhost, Please help me find out why

I am having a problem here getting my code to run properly on my LAMP server localhost when I can get it to run on JSFiddle.. Now normally when this happens, it is something small that I kick myself later on about. However as you all know, More sets of eyes on a problem are better than one set. Please If anyone can, help me find the solution to my problem.
Here is the JS Function I am using on JSFiddle. This function takes a series of checkbox's and populates a sort list on the next JQuery Fade In Form. Here on JSFiddle its all displays At once, but on my actual doc its 2 forms (still both in index) that fade in and out when the user hits next.
https://jsfiddle.net/1ukyLgnh/5/
Here is my Repository that has my Full Index.html File,
https://github.com/dhierholzer/Basiconlineordering
Note:
The function in my index file is located at the bottom under the $('#btn4').click(function(e){ }
It may help to download my file from Github and run it if you have a web server running.
The fuction that I am using (That works in FSFiddle and not my Index.html file) is this:
$(document).ready(function() {
$( "#sortable1, #sortable2, #sortable3" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
//Some code
$("#sortable3").sortable();
//Some more code
$("#addStuff").click(function(e) {
e.preventDefault();
var itemSelector = $("#myList li"),
items = [],
dataObj = {};
$.each(itemSelector, function(i, v) {
items.push($(v).val());
});
//I Am Sure There Is A Better Way Of Sending Checked Items Than A Ton Of IF Statements, However This Works..
if(document.getElementById('bacon').checked) {
items.push($("#bacon").val());
}
if(document.getElementById('bananapeppers').checked) {
items.push($("#bananapeppers").val());
}
if(document.getElementById('blackolives').checked) {
items.push($("#blackolives").val());
}
if(document.getElementById('greenpeppers').checked) {
items.push($("#greenpeppers").val());
}
dataObj.stuff = items;
$.ajax({
url: '/echo/json/',
data: {
json: JSON.stringify(dataObj)
},
success: function(data) {
$("#sortable3").empty();
$.each(data.stuff, function(k, v) {
$("#sortable3").append("<li>" + v + "</li>");
})
},
type: 'POST',
datatype: 'json',
cache: false
});
});
});
Any Comments and help would be useful,
Thanks again!

Have you tried adding -
contentType : 'application/json'
to your ajax request object

unable to refresh on firefox with javascript

the cache in firefox is really a pain to me right now and I know this question has been asked several time.
But is there really no other way to allow window.location.reload(); work in firefox, it worked perfectly in chrome
I've tried all the methods I can find on Google and stackoverflow but none is working for my case.
I've tried the following:
document.location.reload(true);
window.href=window.href;
window.location.href;
I've also tried assigning a different version to the js file.
I would like to see if there are other way to bypass this.
This is how my js file looks like.
$(".drag").sortable({ // begin sortable
connectWith: ".drag",
receive: function(event, ui) { // begin receive
var id = $(ui.item).attr('id');
var status = this.id;
//alert(id);
$.ajax({ // begin ajax
url: "ajax/connectwith-multiple.ajax.php",
type: "GET",
data: {
'sales_card_id': id,
'status': status
}
}) // end ajax
//refresh page when ajax is completed
document.location.reload(true);
});
}, // end receive
}) // end sortable

This is my solution for the above question with the help from the comments above.
$(".drag").sortable({ // begin sortable
connectWith: ".drag",
receive: function(event, ui) { // begin receive
var id = $(ui.item).attr('id');
var status = this.id;
//alert(id);
$.ajax({ // begin ajax
url: "ajax/connectwith-multiple.ajax.php",
type: "GET",
data: {
'sales_card_id': id,
'status': status
}
}) // end ajax
//refresh page when ajax is completed
.always(function() {
window.location.reload();
});
}, // end receive
}) // end sortable

Autocomplete not firing on first input

so I've googled, searched here, went everywhere, and I can't find an answer. I'm using jQuery UI autocomplete to search a list of item ids numbers. They can be any length from 1 - 99999.
The Issue:
When I type '2' for example, nothing happens, then I hit backspace and type '2' again and this time, anything starting with 2 appears below, and the event shows up in the "Network List" on developer's tools. Furthermore, when I search 1, only 1 shows up, but it's not performing the search it's just spitting back the input value. but when i hit backspace and type in 1 again, the search fires and I get the same results as I did with 2. Normally no matter what number I type it should just fire by default shouldn't it? How do I correct this and get my autocomplete working properly.
CODE:
$('.item-inventory').on('keyup', '#item_num', function(){
//var search = $(this);
var itemname;
var itemprice;
var itemdesc;
$(this).autocomplete({
delay : 100,
source: function(request, response){
$.ajax({
url: '../assets/server/orders/item_search.php',
dataType: 'JSON',
data: {search: request.term},
success: function (data){
var keys = data.search;
// $('#item-name').val(data.search[0].item);
// itemPrice = data.search[0].price;
// itemDesc = data.search[0].desc;
response($.map( keys, function(i){
return{
label : i.id
};
}));
}
});
},
minLength : 1
});
//$('#item-search-results').removeClass('hidden');
$(this).on('autocompleteselect', function(event, ui){
$('#item-search-results').removeClass('hidden');
});
});

Basically you are connecting the autocomplete after the first keypress (which is too late for the first keypress). You are also reconnecting it on every keypress.
You need to connect the autocomplete once at startup to any relevant element.
e.g. place this outside of the key handler:
$('.item-inventory #item_num').autocomplete({
delay : 100,
source: function(request, response){
$.ajax({
url: '../assets/server/orders/item_search.php',
dataType: 'JSON',
data: {search: request.term},
success: function (data){
var keys = data.search;
// $('#item-name').val(data.search[0].item);
// itemPrice = data.search[0].price;
// itemDesc = data.search[0].desc;
response($.map( keys, function(i){
return{
label : i.id
};
}));
}
});
},
minLength : 1
});

you can add more event keydown like here:
$('.item-inventory').on('keyup keydown', '#item_num', function(){
........
});

If not works Properly then At Page load call the autocomplete function with empty array of strings.
E.g. $("input").each(function () { $(this).autocomplete({ src: [] }); });
Now this will work at first keypress also. Best of Luck.

Please initialize the autocomplete in ready function.
Like : $(Id).autocomplete();

jQuery selectable() post via ajax issue where the selections loop their history before posting

I have a table that a user can select multiple rows. Selected rows have unique ID which is then aggregated into a string and POSTed to a php file. It all works fantastic except I have one problem. If the rows are selected, re-selected a number of times it does not POST the last status of the selection. So when I look into the log this is what I basically see:
14_629_2 view.php:541
14_629_15 view.php:541
14_629_2 view.php:541
14_629_15 view.php:541
14_629_2;14_629_15 view.php:541
14_629_15 view.php:541
This is two rows by the way. So the last state could be both rows selected 14_629_2;14_629_15 view.php:541 , but it would post the 14_629_15 view.php:541 instead, for some reason. It's as if it keeps cache or history of selections made and then loops and dumps everything in one spur.. and sometimes messes up.
I basically need it to keep track of only the current selection, no history.
Code I use:
<script>
$('#t1').selectable({
filter:'tbody tr',
stop: function(event, ui){
var map = $( this ).find( ".ui-selected" ).map(function() {return this.id;}).get().join(";");
// var result = $( "#plate" ).empty().html(map);
$('#batch_send').click(function (){
$(function() {
$.ajax({
url: 'batch_send.php',
type: 'POST',
data: 'variable='+map,
success: function(data) {
$('.display_div').html(map);
console.log(map);
}
});
});
});
}
});
</script>
I'm new to javascript so this must be some obvious mistake...

Solution:
The reason it looped was because the ajax request was in a function.
So I rewrote the code to make it a bit more simple
var map;
$("#t1").selectable({
filter:'tbody tr',
cancel: 'a, #slct_ignore, thead',
stop: function(event, ui) {
map = $(this).find( ".ui-selected" ).map(function() {return this.id;}).get().join(";");
}
});
$("#batch_send").click(function() {
$.ajax({
url: 'batch_send.php',
type: 'POST',
data: 'variable='+map,
success: function(data) {
$("#plate").html(map);
$(".display_div").html(map);
}
});
});

Default select issue for JQuery UI 'selectable'

Below is my JS. When the page loads, I want it to automatically run the function as if its being clicked on. The default selection makes it started selected, but doesn't initiate the function. Any idea on how to make that work?
$(function() {
$( "#selectable" ).selectable({
selected: updatefilters
});
function updatefilters(ev, ui){
// get the selected filters
var template, html;
var pagego;
if(! pagego){
var page = 0;
}
var $selected = $('#selectable').children('.ui-selected');
// create a string that has each filter separated by a pipe ("|")
var filters = $selected.map(function(){return this.id;}).get().join("\|");
$.ajax({
type: "POST",
url: 'updatefilters',
dataType: 'json',
data: { filters: filters, page: page },
success: function(data){
html = "Do Something";
$('#board').html(html);
}
});
}
$('#lets').addClass('ui-selected')
});
Thanks!

Just call the function after declaring it:
$(function() {
$( "#selectable" ).selectable({
selected: updatefilters
});
function updatefilters(ev, ui){
...
}
$('#lets').addClass('ui-selected');
// none of your params are consumed in the function anyways, so you don't need to pass anything
updatefilters();
});

Try to run function in the body tag
<body onload="name_of_function()">