button imported with get function doen't work - javascript

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.

Related

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.

Making jQuery function work with ajax call

I am trying to achieve something when i click the button. The button is loaded from the server using an AJAX call. However, nothing happens when the button is clicked. Here is my code:
(This ajax call is in JS Fiddle -- only for testing purposes)
JS Fiddle
Code:
<div id="target"></div>
new Request.HTML({
url: '/echo/html/',
data: {
html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
delay: 0
},
method: 'post',
update: 'target'
}).send();
$("button").click(function(){
var value = $(this).siblings(".title").text();
value += $(this).siblings(".date").text();
alert(value);
});
Since the button does not yet exist you can use jQuery.on to delegate an event handler.
$("body").on('click', 'button', function(){
var value = $(this).siblings(".title").text();
value += $(this).siblings(".date").text();
alert(value);
});
Also your fiddle does not work since you are using both jQuery and MooTools but only loading MooTools.
Added after seeing authors page:
The var value = $(this).siblings(".title").text(); selector will not work. I would recommend adding an event class (as in calendar event) to the wrapper and using:
var value = $(this).parents(".event").find(".title").text();
If you are adding elements to the DOM via AJAX (or any other method) and you want listeners to remain bound to them, then you need to attach those listeners to elements in the document that don't change - like $(document).
e.g.
$(document).on('click','button',function(e) {
//your code here
});
The problem with your code is that you're getting all the buttons by doing $("button") and then attaching click listeners to them. The problem is that when you're doing this, your button hasn't been attached to the document and, therefore, will not have a click listener attached to it.
If button doesn't exist on page load. You can;t use $("button") to address it. You have to surround it by something else(div for example) and do it like this:
$('div').on('click','button', function(){...})
There are 2 things you need to consider.
ONE - jQuery that is included with mootools.
I was surprised that $ function in mootools version that you are using gave me a very BASIC jQuery function. I tried higher versions of mootools and still the same happened. I am sure it is not jQuery at all and mootools is just using $ variable for their purpose. [Optional: So, you may also consider defining jQuery as a different variable in your script.]
So, I added a link to latest jQuery in External Resources on jsfiddle and then it worked. Do not forget to expand External Resources on left on jsfiddle. But, if mootools is using $ for its own purpose, then jQuery will surely overwrite it. Please consider using jQuery as a different variable than $.
TWO - Use the onSuccess function of AJAX request.
You call the AJAX request and so you have to wait for some time for browser to load it which depends on user's internet connection. So, this is why we use onError and onSuccess events. Write the button function in onSuccess because button does not exist on document until AJAX is loaded.
Please check this code and it works.
http://jsfiddle.net/U7ewu/
Code:
new Request.HTML({
url: '/echo/html/',
data: {
html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
delay: 0
},
method: 'post',
update: 'target',
onSuccess: function() {
$("button").click(function(){
var value = $(this).siblings(".title").text();
value += $(this).siblings(".date").text();
alert(value);
});
}
}).send();
EDIT:
Please use $.noConflict(); so that mootools and jquery do not conflict each other on $ variable. $ is already being used by mootols, so please use the word jQuery instead.
Please check this jsfiddle.
http://jsfiddle.net/wkMep/
Code:
$.noConflict();
new Request.HTML({
url: '/echo/html/',
data: {
html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
delay: 0
},
method: 'post',
update: 'target',
onSuccess: function() {
jQuery("button").click(function(){
var value = jQuery(this).siblings(".title").text();
value += jQuery(this).siblings(".date").text();
alert(value);
});
}
}).send();
try this
$("button").on("click",function(){
var value = $(this).siblings(".title").text();
value += $(this).siblings(".date").text();
alert(value);
});

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.

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

jQuery Basic problem

I have a page that display some data. It is loaded from a database using php and mysql, I use zend framework to handle all this.
On this page I have two things that use jquery. one is a paginator and the other is a thumps up function.
the paginator works fine. It receives the data as json and applys it to the view. all the functions that I need to handle this are located in one js file. In this file I listen for clicks...
$(document).ready(function() {
$("a#next").click(getProgramms);
$("a#previous").click(getProgramms);
$("a#page").each(function() {
$(this).click(getProgramms);
});
});
Now I have a problem with the thumps up function. It is located in another js file. Everytime the thumbs up button is clicked the script should just alert "click". actually when you click before you use the paginator a "click" appears, but when you do it after nothing happens. but the html in the dom inspector appears to be the same.
in my thumpsup.js I just have
$(document).ready(function() {
$("a.tp").click(thumpsUp);
});
function thumpsUp() {
alert("click");
}
I do not know where the problem is. maybe the js files are interferring each other!?
function thumpsUp() {
var url = window.location.hostname + '/programme/thumpsup/id/'
+ $(this).attr('page');
$.post(url, {
"format" : "json"
}, function(data) {
alert(data);
}, 'html');
return false;
}
I'm guessing the paginator is rewriting your elements and they are losing their click event binding. Try using live() for event binding instead:
$(document).ready(function() {
$("a.tp").live('click',thumpsUp);
});
function thumpsUp() {
alert("click");
}
You might have the Script files (which are included in your mark up) the wrong way round. That's the only solution I can think of...
I'm pretty sure you can get away with two $(document).ready()'s (even if it is frowned upon).

Categories