We Keep Coding

button imported with get function doen't work

I have a problem with a button imported in a HTML file using JQUERY and get function.
I'm trying to check if it is clicked or not but i don't know why i can't print anything to the console. I imported the button using this script:
$.get( "nuovotaglio.html", function( data ) {
var newDiv = $('<div/>',{id:'Servizio'+ incremento}).appendTo('.nuovoServizi');
newDiv.html(data);
var idInputeText = newDiv.children().children().find("input[name='servizio']");
idInputeText.attr('id','input'+incremento);
});
then I wrote
$(function() {
$('button').click(function(){
console.log('ciao');
});
});
I also tried
$('button').click(function(){
console.log('ciao');
});
also this script doesn't work
$('button').on('click', function(event) {
console.log('ciao');
});
does someone know how to check an events from an HTML code imported using GET?

Your problem is likelly in adding an element to the page AFTER you fire the ready JQ function.
Rewriting your JQ code to the following should fix it.
$(document).on('click', 'button', function(event) {
console.log('ciao');
});
Alternativelly, if stuff is still bugging out, you can try (yes, I have actually seen that bug out for some reason once, so here is solution B if needed)
$('body').on('click', 'button', function(event) {
console.log('ciao');
});

When the the second script initialized then there was no button at that moment. That's why the click event didn't worked.
Load this script after successfully load the content.
You may use
$(document).ready(function() {
// second script here
});
Or you can use:
$.ajax({
url: "test.html",
method: "GET",
data: { id : $( "ul.nav" ).first().attr( "id" ) },
dataType: "html",
success: function() {
$('button').click(function(){
console.log('ciao');
});
}
});

If you have more file or portion of code to import in your HTML and Javascript or Jquery doesn't work try also using PHP instead of HTML.
Rename your file with PHP extension and upload your file on a real server or virtual server like MAMP or XAMP).
Then use this sintax to import your file:
<?php include("your_file_path/your_file_name.html"); ?>
I tried to include a big section of a website inside the mainpage and my other HTML file was in the same folder of the HOMEPAGE. I used
<?php include("section6.html"); ?>
After use this method all my Jquery library worked correctly.

PHP Output Not Appearing in HTML

I have made some code to post the output of a PHP file showing the music I have been recently listening to on Spotify.
The HTML, CSS and JS (for the spotify.php file) are included in this fiddle.
The JS within my index.php file is:
<script type="text/javascript">
function get_spotify() {
$.ajax({
type: 'POST',
url: 'https://theobearman.com/cv/modules/spotify.php',
data: {
request: 'true'
},
success: function(reply) {
$('.now-playing').html("" + reply + "");
}
});
}
window.onload = get_spotify;
</script>
My issue is that the output of the .php file is not showing up under the 'Music' header on my website.
This was working a few days ago, so I'm not sure why it is not working now.
Thanks in advance for any help,
Theo.

Try
$(document).ready(function() {
get_spotify();
});
instead of window.onload = get_spotify, which may run before the element is rendered on the page.

Try using a $(document).ready() to call your function instead of window.onload = ... this ensures that jQuery has correctly been loaded.
Example: $(document).ready(get_spotify);

I visited your site and everythings seems to be fine, only problem is that your function is not gettng called, I tried it from console and works perfectly

After having a look at your website code I found the problem.
You can have only one window.onload in one page but you have two of them so that's why it is not working.
Here is code of your first window.onload, put the get_spotify in here:
window.onload = function() {
get_spotify();//INSERT HERE
var elevator = new Elevator({
element: document.querySelector('.elevator-button'),
mainAudio: 'https://www.theobearman.com/cv/music/elevator-music.mp3',
endAudio: 'https://www.theobearman.com/cv/music/ding.mp3'
});
And also put get_spotify function body and prototype above this onload call.

Insert text into a div with jquery load

I'm trying to get jquery to load the text from a text file into a div for a blog, but it's not working at all. any help?
this is what I'm using (what I've seen other's use). Also, I'm not testing it locally.
$("#content").load("articlename.txt");
update:
is there any way for it to keep the enters as breaks?

There is a no direct way to get data from external file in jquery.
But via ajax its possible.
$(document).ready(function() {
$("#loadData").click(function() {
$.ajax({
url : "articlename.txt",
dataType: "text",
success : function (data) {
$("#content").html(data);
}
});
});
});

$(document).ready(function() {
$("#content").load("articlename.txt");
});
Wrap your call inside document.ready.

Why does $.load( handler(eventObject) ) not work for data returned from server after Ajax request, trying to make it wait for all images to load

I need to keep displaying the loading gif until all images
in the returned data (html) have been finished loading.
The data and everything is returned properly, but the .live('load', function() {})
is never executed, have tried without the .live as well. The contents of #ContentBody
just get replaced with the returned html data (#LoadingLayer disappears too of course) and I can see images loading as usual.
<script type="text/javascript">
$("#RightLink").click(function (event) {
event.preventDefault();
var tourl = $(this).attr('data-ajax-url');
$.ajax({
type: "POST",
url: tourl,
dataType: "html",
async: true,
beforeSend: function () {
$("#LoadingLayer").show(); //show layer with image loading gif
$('#ColumnContainer').hide();
},
success: function (data) {
$('#ContentBody').html(data).live('load', function () { $("#LoadingLayer").hide(); });
}
});
});
</script>
HTML layout:
<body>
<div id="ContentBody">
<a id="RightLink" href="/store/ContentBodyGenerator" />
<div id="LoadingLayer"><img src="loading.gif" /></div>
<div id="ColumnContainer">... Main contents, lots of images here</div>
</div>
</body>

Why don't you just hide #LoadingLayer directly?
$('#ContentBody').html(data);
$("#LoadingLayer").hide();
Edit:
I misread your question, I don't think there is an easy way to detect that all images have been loaded. I suggest you try the waitForImages plugin.

Try changing the contents of the "success" function to this...
$('#ContentBody').html(data).live('load', function () {
var imgcount = $(this).find("img").length;
$(this).find("img").one("load", function() {
imgcount--;
if (imgcount == 0) {
$("#LoadingLayer").hide();
}
}).each(function() {
if (this.complete) $(this).load();
});
});
It waits till html(data) is loaded and then gets an image count. It then adds an event handler to each of the images to decrement the image count when the image is loaded. The one("load" code means only allows the following code to run once, and the each code basically says "if it's already loaded (as per cached images) then run the load event".
Once the image count is 0 it hides the loading layer.
Without a URL where I can run this through the console I can't be 100% sure it's accurate, so it may need a fiddle about. If you get stuck give us a shout.

Try binding the load event to the images. Keep track of how many have loaded, and remove the loading layer only after they've all loaded. This is untested code but should give you an idea:
success:function(data){
// Set the content
$('#ContentBody').html(data);
// How many images do we have?
var images = $('#ContentBody img'),
leftToLoad = images.size();
// Listen for load event *FOR IMAGES*
images.bind('load', function (){
// Hey look we loaded one, was that the last one?
if(--leftToLoad === 0){
// Yep, we're done
$("#LoadingLayer").hide();
}
});
}
If you'd rather use live than handling in the ajax callback, do this in your $(document).ready callback:
$('#ContentBody img').live('load', function(){...});
Should do the trick.
Cheers

page transitions with jquery

I'd to create some transitions between pages. I've made it this way:
$("div.fading").css('display', 'none');
$("div.fading").fadeIn(500);
$("a.fade").click(function(event){
event.preventDefault();
link = event.href;
$("div.fading").fadeOut(500, redirect(link));
});
in redirect have I used window.location and it has been working, but the fadeIn effect has been running for every page which has been loaded. I didn't like that, so I'm trying make it with ajax. It should allow me to call the fadeIn function as a callback function in jquery. I have this code,
$(".fading").click(function(event){
event.preventDefault();
var link = this.href;
$(".fade").fadeOut(300, function(){
$.ajax({
url: link,
success: function(){
$(".fade").fadeIn(300);
}
});
});
which is not fully working..All effects are OK, but page which I get after fadeIn is simply the same that faded out..IMHO can I do it another way with .load() function, I tried to implement that, but there were too some problems:-)Does anybody know what I should do to make it fully working?Thanks..

You're calling the page via ajax, but you're not replacing the contents of the current .fade div before you call fadeIn(). I've modified your code to do that below. .load() should do the same thing a little cleaner.
$(".fading").click(function(event){
event.preventDefault();
var link = this.href;
$(".fade").fadeOut(300, function(){
$.ajax({
url: link,
success: function(pageHTML){
$(".fade").html(pageHTML);
$(".fade").fadeIn(300);
}
});
});

I think you're just missing any used of the data returned. In the success function you'll need to do something like:
$('.fade').html(data);
Then and you can fade it back in with the page having been updated.