We Keep Coding

convert normal submit form to ajax real time

im new here so forgive me if my question seems to be stupid
i have the following code to search youtube video with submit button (normal form)
i want to turned to real time input once the user write any word will fetch result depend on what wrot by hime
so i add
$(".search_input").keyup(function(e) {
instead of
$("form").on("submit", function(e) {
full code is here https://jsfiddle.net/5ymndbax/
function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res}
$(function() {
$(".search_input").keyup(function(e) {
e.preventDefault();
// prepare the request
var request = gapi.client.youtube.search.list({
part: "snippet",
type: "video",
q: $("#search").val(),
order: "viewCount",
publishedAfter: "2000-01-01T00:00:00Z"
});
// execute the request
request.execute(function(response) {
var results = response.result;
$("#results").html("");
$.each(results.items, function(index, item) {
$.get("tpl/item.html", function(data) {
$("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}]));
});
});
resetVideoHeight();
});
});
$(window).on("resize", resetVideoHeight);
});
function resetVideoHeight() {
$(".video").css("height", $("#results").width() * 9/16);
}
function init() {
gapi.client.setApiKey("key");
gapi.client.load("youtube", "v3", function() {
// yt api is ready
});
}
i hope can i got some help from you ❤
full of love to each of you.

Currently you are using keyup, and that will check entry by letter.
So you need to check did key up ended with " ",",","." etc. for that will mostly mean the end of the word.
Now when we have the word, we want to add that to
previously entered words so you need to
concatenate or append new_word to previous_words.
And only then you should call AJAX call to URL or script that is using YouTube API for search...
It should go something like this:
**
event.preventDefault();
$.ajax({
type:"GET",
url: "youtube url or some script preforming to yt api call",
data:{"search": previous_words,},
success:function(data){
//display data somewhere
console.log(data);
}
});

What is the proper way of doing long polling using jQuery and AJAX

I have a project which involves live notification. So I stumbled upon using socket io but I didn't have enough time to learn it yet. So I tried doing it with AJAX and jQuery. Below is my code structure and I was wondering if this is gonna work with no drawbacks?
setInterval(function(){
if( !element.hasClass('processing') ){
element.addClass('processing');
$.ajax({
type: 'post',
dataType: 'json',
url: ajaxurl,
data: {},
success: function( response ){
/* Success! */
element.removeClass('processing');
}
});
}
}, 2500);

Some Extra Info
The way you described will work. From Experience I would just like to point out some things.
I usually do a recursive function, allows you to wait your interval between ajax calls and not a fixed rate. //OPTIONAL BUT DOES GIVE THE SERVER SOME BREATHING ROOM.
Use window.setTimeout() with an isActive flag. //ALLOWS YOU TO STOP POLLING FOR WHATEVER REASON, AND BECAUSE FUNCTION IS RECURSIVE START UP AGAIN IF NEED BE
For Sake of being thorough, I found it is always a good idea to handle the error case of the $.ajax() post. You could perhaps display some message telling the user he is no longer connected to the internet etc.
Some Sample Code:
var isActive = true;
$().ready(function () {
//EITHER USE A GLOBAL VAR OR PLACE VAR IN HIDDEN FIELD
//IF FOR WHATEVER REASON YOU WANT TO STOP POLLING
pollServer();
});
function pollServer()
{
if (isActive)
{
window.setTimeout(function () {
$.ajax({
url: "...",
type: "POST",
success: function (result) {
//SUCCESS LOGIC
pollServer();
},
error: function () {
//ERROR HANDLING
pollServer();
}});
}, 2500);
}
}
NOTE
This is just some things I picked up using the exact method you are using, It seems that Web Sockets could be the better option and I will be diving into that in the near future.

Please refer :
Jquery : Ajax : How can I show loading dialog before start and close after close?
I hope this could help you
$("div.add_post a").click(function(){
var dlg = loadingDialog({modal : true, minHeight : 80, show : true});
dlg.dialog("show");
$.ajax({
url : "/add.php",
complete : function (){
dlg.dialog("hide");
}
});
return false;
});
//--Loading dialog
function loadingDialog(dOpts, text = "пожалуйста подождите, идет загрузка...")
{
var dlg = $("<div><img src='/theme/style/imgs/busy.gif' alt='загрузка'/> "+text+"<div>").dialog(dOpts);
$(".ui-dialog-titlebar").hide();
return dialog;
}

Jquery/AJAX function not working

I already asked some questions about ajax, but I still don't get it.
I took a script that I found on the internet and made some modifications, but it didn't work!
HTML:
<a data-toggle="team" id="times">TEAM</a>
ORIGINAL SCRIPT:
<script>
// THIS IS WHERE THE MAGIC HAPPENS
$(function() {
$('nav a').click(function(e) {
$("#loading").show();
href = $(this).attr("href");
loadContent(href);
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
$("#loading").show();
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
};
});
function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT
$.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
// THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
$.each(json, function(key, value){
$(key).html(value);
});
$("#loading").hide();
});
// THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
$('li').removeClass('current');
$('a[href="'+url+'"]').parent().addClass('current');
}
</script>
MODIFIED SCRIPT:
<script>
// THIS IS WHERE THE MAGIC HAPPENS
$(function() {
$('#times').click(function(e) {
$("#loading").show();
var href = $(this).attr("data-toggle");
loadContent(href);
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
$("#loading").show();
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
};
});
function loadContent(url){
$.ajax({
url: 'ajaxcontdent/ajax'+url,
type: 'GET',
error: function(){
// always good to have an error handler with AJAX
},
success: function(data){
$('#content').html(data);
}
// THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
$('li').removeClass('current');
$('a[href="'+url+'"]').parent().addClass('current');
};
</script>
What is wrong with my script? Nothing happens. I click in my <a> link and nothing. I already tried to put the file location on a hrefattribute, but then e.preventDefault(); doesn't work and my website runs like there is no AJAX.
In the original code, the author use some content.php file. But I don't know JSON, so I have no idea what did he put in that file.
There are no errors in the console.
My ajaxcontent/ajaxteam.php file content:
<p style="color:#fafafa;">Team</p>
It's just one line indeed. Just a test.

I think that may be a cause syntax error, I have regenerate one of your function so please use below code.
function loadContent(url){
$.ajax({
url: 'ajaxcontdent/ajax'+url,
type: 'GET',
error: function(){
// always good to have an error handler with AJAX
},
success: function(data){
$('#content').html(data);
}
});
};
Then use your operation, whatever you want, in your success block of above function.
I hope thin will help you.
Thansk

In your code if I am not wrong
url: 'ajaxcontdent/ajax'+url,
this is the main culprit.
Try this one:
url: 'ajaxcontent/ajax'+url,

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

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);
}
});
});