We Keep Coding

How to use "object HTMLTableElement"

I got a table on my site which I want to save in the session storage and replace it on button click (discard changes). Seems to work well to save it in session storage, but now I dont know how to make it usable for my HTML, that I can replace the current table with the table in my storage.
Tried to convert it with this , but I only got this:
I hoped that I can store it like this: [ and just set it later on.
This is my current code.
$(document).ready(function () {
let table = document.querySelector('.overallTable');
sessionStorage.setItem('init', JSON.stringify(table));
document.getElementById("dcChanges").addEventListener("click", function () {
if (sessionStorage.getItem('init') == sessionStorage.getItem('cache')) {console.log("equal")}
});
document.getElementById("saveInCache").addEventListener("click", function () {
document.getElementsByClassName('overallTable');
sessionStorage.setItem('cache', table);
console.log(table);
console.log("Output: Table: " + sessionStorage.getItem('cache'));
console.log("Output: Converted: " + JSON.stringify(sessionStorage.getItem('cache')));
});
});
I hoped I just could do something like this document.getElementsByClassName("overallTable").innerHTML = sessionStorage.getItem('cache');

You can use html() function of jQuery.
$('.overallTable').html();

try document.getElementsByClassName('overallTable')[0].innerHTML

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

Hiding images with same data value jquery

Im trying to code a site where the objective is to click on two identical images and it hides the both the images you've managed to match to eachother.
$(document).ready(function(){
var animal1;
var animal2;
$(".memory1").on("click", function(){
animal1 = $(this).data('animal');
});
$(".memory2").on("click", function(){
animal2 = $(this).data('animal');
if (animal1==animal2){
$(this).data('animal').hide();
}
else {
alert("Wrong, Try again!");
}
});
});
so the line where its going wrong is obviously
$(this).data('animal').hide();
But I cant figure out a way to hide both images, or a better way of going about it.. :/
http://jsfiddle.net/4vgfca76/

This doesn't work the way you think it does
$(this).data('animal').hide();
When data is used with one argument, it get's the data attribute, which you should already know as you're doing it a few lines above.
What you get is the string hund etc. and that string doesn't have a hide() method.
You should be using the attributes selector to select the elements with that attribute instead
$(document).ready(function () {
var animal1, animal2;
$(".memory1").on("click", function () {
animal1 = $(this).data('animal');
});
$(".memory2").on("click", function () {
animal2 = $(this).data('animal');
if (animal1 == animal2) {
$('img[data-animal="'+animal1+'"]').hide();
} else {
alert("Fel! Försök igen");
}
});
});

Combo box populated by Json

I am looking to populate a combo box with a Json file that is representing the file contents of a folder in a directory. I have snippets of code but its obviously not working and I am unsure how to go about implementing it correctly.
My Json code i want to populate the combo box looks like this:
["xml/cdcatalog.xml","xml/equip.xml"]
And this is the script i have embedded into the HTML page:
$(document).ready(function() {
$("#list1").jCombo(function() {
$.getJSON('Jsontest.php?q=' + escape($('#list1').val()), function(data) {
if ($("#list1").val() > 0) {
alert("You chose " + $("#list1").val());
}
});
});
});

I think you want something like this:
$(document).ready(function() {
$.getJSON("Jsontest.php", function(result) {
var options = $("#list1");
$.each(result, function(item) {
options.append($("<option />").val(item).text(item));
});
});
});
Code taken from this answer:
jQuery: Best practice to populate drop down?

Getting Jquery script to call action method

Good Morning Stack OverFlow enthusiasts. I have been having an issue that I am attempting to narrow down, and I could use the help of the good people at stack overflow... For some reason, the action controller that I attempt to call from a view never executes... I have breakpoints set and everything and it just never seems to get called...
$(function () {
$("#DemoGraphSubmit").click(function (e) {
e.preventDefault();
var data = [];
$.getJSON("/PatientACO.aspx/SearchByDemographic", null, function (data) {
data = $.map(data, function (item, a) {
return "<option value=" + item.Value + ">" + item.Text + "</option>";
});
$("#PatientListToAdd").html(data.join(""));
});
});
});
I checked to make sure that the url is correct... PatientACOController is my controller and SearchByDemographic is my action method... DemoGraphSubmit is the button in my view that submits... I am not sure what I am doing wrong here... Any help would be appreciated.

If you're using the default routing in MVC the URL should be /PatientACO/SearchByDemographic.
The .aspx part shouldn't exist