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.

issue with window.onload in included file

I have a php page that runs standalone without any issue.
When I open the page it includes a js file with some functions. What I am interested in is that the JS contains a
window.onload = function() {
//my js stuffs here
}
that fires when the php opens.
Next step was to move the php inside my framework loading it in a div of an existing page.
So in the framework I did
$('#destinatario').change(function(){
var hk = $(this).val();
$('#sotto').html('');
$('#sotto').load('../websocket/index.php?hk='+hk);
});
my page keeps loading fine without any inconvenient but the window.onload never gets fired. What am I doing wrong?

Yes, you could workaround this doing:
$('#destinatario').change(function(){
var hk = $(this).val();
$('#sotto').html('');
$('#sotto').load('../websocket/index.php?hk='+hk, function (){
window.onload();
});
});
if it does not work create a function on index.php something like loaded() and then in the callback to when the index.php is loaded call that function.

JQuery .load and html issue

I am trying to use Javascript to load different pages when you press a link. Here is the function I am using to change the page.
function loadPage(url){
$(".body").fadeOut(400, function(){
$(".body").load(url, function(){
$(".body").fadeIn(400);
});
});
};
The problem is, it fades the stuff into the page, but it disappears once the fadeIn is done. The code html from the file is still in the main files html, it just doesn't show up.

I had an issue, and I used this. File in your case would be the url:
var loader = function(file) {
$('.body').fadeOut(500);
$.ajax({
url: file
success: function(data) {
$('.body').html(data);
$('.body').fadeIn(500);
}
});
}
Changed the code to try and match what your looking to do, tested it with just a div with a background and it seems to work okay.
Is this the same as what you have ?
Andrew

Why won't my links trigger jQuery.click events?

So, I'm dabbling in some jQuery today, and I come across an issue. I have a page that has a number of links in the following format:
<a class="a_link" id="a_id<#>" href="#">Click me</a>
Where <#> is a number generated in a for loop in the PHP that runs the page. At the top of the page, I have a script tag linking to the Google CDN for jQuery 1.7.2 minimized, and a div with id of "form_map". After all the links have been displayed, I have the following script:
<script type="text/css">
$(document).ready(function(){
$('.a_link').click(function(){
var c_id = $(this).attr('id');
var task = 'read';
var ajax_url = 'engine.php';
alert('link pressed for id: '+c_id);
$.get({
url: ajax_url,
data: { 'task':task, 'c_id':c_id },
success: function(res){ $('#form_map').val(res); }
});
});
});
</script>
Disregarding all that wonky Ajax calls (which also do not seem to work correctly), when I click a link nothing happens. It doesn't even run the script. I tested this by setting a breakpoint and adding the alert. Nothing seems to even trigger this.
Any suggestions on what I am doing wrong?

use:
<script type="text/javascript">
instead of:
<script type="text/css">
also use:
$('#form_map').html(res);
instead of
$('#form_map').val(res);

You may want to fix the opening tag
<script type="text/css">
to
<script type="text/javascript">

You need to return false at the end of the function you pass into .click().
$('.a_link').click(function() {
// Your AJAX stuff here.
return false;
});
Returning false stops the link from continuing to work as normal.

AddThis button will not work inside AJAX, but will work normally

Basically, this is what I'm doing.
User visits site, loads "index.html"
Within index.html, it automatically loads, through AJAX, "details.html" into a DIV.
I put an ADDTHIS button on "details.html". However, for some reason , the roll-over doesn't work.
When I visit details.html in the browser, the roll-over works. I'm guessing it's because of the AJAX?
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4adf7e45288f5b21">
<img src="http://s7.addthis.com/static/btn/sm-share-en.gif" width="83" height="16" alt="Bookmark and Share" style="border:0;margin-top:16px;"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4adf7e45288f5b21"></script>

I recently ran in to issues with using AddThis on an all AJAX site and was able to come up with a couple of solutions for this issue.
It turns out there is a variable that you can pass when loading the AJAX script as well as a way to re-initialize the script if the DOM is reloaded via AJAX.
I have posted the full solution in detail on my blog here:
http://joecurlee.com/2010/01/21/how-to-use-addthis-with-ajax-and-overflowauto/
To briefly summarize, the solution is loading AddThis with the variable domready=1 appended, and re-initializing the script by deleting the initial load and then reloading the script dynamically:
var script = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
if (window.addthis){
window.addthis = null;
}
$.getScript( script );

addthis.toolbox(".addthis_toolbox");

if i understand your question correctly, in the callback of the ajax function, bind the roll-over to the add-this button.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(){
$('.addthis_button').hover(
function(){
//do mouse over
},function(){
//do mouse out
});
}
});
you can also try
$('.addthis_button').live('mouseover',function(){//do mouseover});
$('.addthis_button').live('mouseout',function(){//do mouseout});
i've never used live, but it seems like it would work for you since your add_this button's get created after the $(document).ready()

Ran in the same problem and this solved it for me in all major browsers (IE6+, FF, Safari in MAC/XP):
http://joecurlee.com/2010/01/21/how-to-use-addthis-with-ajax-and-overflowauto/comment-page-1/#comment-24

I had the same problem. Fixed it with the following code. I hope that fixes it for you too.
Original Method:
var script = 'http://s7.addthis.com/js/300/addthis_widget.js?domready=1';
if (window.addthis){
window.addthis = null;
}
$.getScript( script );
New Method:
<script>
var script = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
if (window.addthis) {
window.addthis = null;
window._adr = null;
window._atc = null;
window._atd = null;
window._ate = null;
window._atr = null;
window._atw = null;
}
$.getScript(script);
</script>
In AJAX REQUEST you can use like this:-
$.ajax({
url:Url,
type: 'POST',
cache: false,
success: function(res){
var script = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
if (window.addthis) {
window.addthis = null;
window._adr = null;
window._atc = null;
window._atd = null;
window._ate = null;
window._atr = null;
window._atw = null;
}
$.getScript(script);
// your custom code
}
});

It seems like the script is calling the onLoad event of javascript and using this ajax call won't actually trigger that event. You could try other "share this" widget?
Like http://sharethis.com/#STS=g12m3ugh.21zb
or pre-load that button?
Can you post a little bit more of the story on what are you doing?

Is details.html a fully compliant page on it's own? HTML, BODY, HEAD tags, etc?
If so, I think things can get kind screwy when you try to load it into another page. I would either change details.html to just include the barebones markup that you need - or - if you need it to still be individually accessible - you could use jQuery to strip out the needed bits after the ajax call and only inject that portion.
Details.html
<html>
<head>
</head>
<body>
<div id="details">
The needy bits.......
</div>
</body>
</html>
Index.html
$("#targetDivID").load("detail.html #details");

Add this snippet of .js to the .html you are loading. Replace "#atbutton" with your button's selector.
addthis.button("#atbutton");