Event handling in dynamically generated page - javascript

I have a div with class called 'taglines' which is contained in a div with class called 'container'. When 'taglines' is clicked, it navigates to another page. The problem is the events on this new page are not responding after navigation. The following is the code that I am using to navigate:
$(document).ready(function(){
$('.container').on('click', '.tagLines', function(){
window.location = "manageMarks.php";
});
}
The following is the code with the event that is refusing to work after navigation:
$(document).ready(function(){
$('.container').on('click', '.loadSub', function(){
alert('Clicked');
});
});
However, If i use ajax to load the new view I want, the events do eventually work. The following is the ajax I code I am using:
$(document).ready(function(){
$('.container').on('mouseover', '.tagLines', function(){
$.ajax({
type: 'GET',
url: 'manageMarks.php',
data: {
videoCode: $(this).attr('data-code')
},
success: function(data){
//alert(data);
$('.container').html(data);
}
}).error(function(){
alert('An Error Has Occured');
});
});
How can I get it to work without using ajax?

Are you doing a full page reload? If so your events would need to be wired up again. If not they should get wired up to dynamically loaded content.

Related

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.

$(document).foundation(); not working

I try to get my elements, that I load via ajax back to work but when I try to reinitialize the events on them, it simply doesn't work.
I tried to insert $(document).foundation(); on different places in my code but nope :(
Here an example:
$.ajax({
url: 'dashboard/ajax/links/get',
method: 'post',
data: {
_token: $('input[name=_token]').val()
},
success: function(data) {
$('.links-container').html(data);
$(document).foundation();
}
});
Any ideas?
Update
Another example
// open edit link modal
$('.item-link-edit').on('click',function(e){
e.preventDefault();
// get item id
var id = getItemId(this);
// open modal and load content
$('#edit-link-modal').foundation('reveal','open',{
url: 'dashboard/ajax/links/modals/edit',
data: {
id: id
},
success: function() {
setTimeout(function(){
$(document).foundation();
console.log('reinit');
},1000);
}
});
});
still not working :/
You need to use reflow if you add new content to the DOM.
$(document).foundation('reflow');
Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them. If you dont want to reflow everything you can specify the module you want to re-apply;
$(document).foundation('orbit', 'reflow'); // orbit, for an example
Further documentation can be found here:
http://foundation.zurb.com/docs/javascript.html

Why is my div populated with my whole page?

I'm trying to load a div from another page using ajax but maintain the URL integrity using the History API. The ajax and history part is working (ie. the div is loading and the url is changing) but for some reason my div contains my entire page not just what is meant to be in the div!
This is the case for both the original page and the page div being loaded.
Stripped back HTML
<!DOCTYPE html>
<html>
<body>
<div id="slider">
... all the page content
<a rel='tab' href="p/password.jsf">Forgot password?</a>
</div>
</body>
</html>
JS
<script>
$(function(){
$("a[rel='tab']").click(function(e){
//get the link location that was clicked
pageurl = $(this).attr('href');
//to get the ajax content and display in div with id 'content'
$.ajax({
url:pageurl + '?rel=tab',
success: function(data){
$('#slider').html(data);
}});
//to change the browser URL to 'pageurl'
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
return false;
});
});
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({
url:location.pathname+'?rel=tab',
success: function(data){
$('#slider').html(data);
}});
});
</script>
If you want to fetch an part of an page with ajax, then you can use the load method with the id of the element to fetch the content from.
$('#slider').load(pageurl + '?rel=tab #container_with_content_to_fetch', function() {
alert('callback after success.');
});
More info about load(): info
You may need to stop the default click action. It appears as though your link is acting as a... link.
$("a[rel='tab']").click(function(e){
e.preventDefault();
...
you if you want to select a specific part of the page that you recive with the ajax response
then do the following
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({
url:location.pathname+'?rel=tab',
success: function(data){
var mydiv = $('#my_div_id' , data ) // this will get the div with an id of #my_div_id
$('#slider').html(mydiv );
}});
});
$.ajax loads the whole page. You can use .load()
Instead of
$.ajax({
url:pageurl + '?rel=tab',
success: function(data){
$('#slider').html(data);
}});
you can use
$('#slider').load(pageurl + ' [rel=tab]');
The docs are here.

Hyperlink's click even not triggering in jQuery

Here is my full JS code:
var timeOutId;
function ft(){
$.get("progress.txt", null, function(data){
if(data.substr(0,10) == "MSG::MSG::"){
$("#box").html(data);
window.clearTimeout(timeOutId);
}else{
$("#box").html(data);
}
});
};
$(document).ready(function(){
$("#box").corner('20px');
$("#progress").hide();
});
$("#newm").click(function(){
$("#progress").show();
$("#list").html = $.ajax({
url: "action.php",
global: false,
type: "POST",
data: ({keyword : $("#keyword").value()},{format: $("#format").value()},{filename: $("#filename").value()},{list: $("#list").value()}),
dataType: "html"
});
timeOutId = window.setTimeout("ft()", 10000);
});
and there is a hyperlink with ID "newm" on page but clicking on the link doesnt trigger the ajax request. Can anyone tell me what is wrong?
Description
I have tryed your code and recognize that your binding to click is not working because the DOM element is not available at this time.
You should bind it under $(document).ready() to ensure the DOM is fully loaded before binding javascript / jquery to that.
This will enusre that your link will work, but its hard to help you without the html source.
If this will not help, please post the html.

How to update a value by jQuery AJAX

I load content of a page by jQuery AJAX as
$(document).ready(function(){
$('#next').click(function(event){
$.ajax({
url: "load.php?start="+$('#lastid').text(),
success: function(html){
$("#results").append(html);
$("#lastid").empty().load('html #start');
}
});
});
});
In the current document, I have <div id="lastid"></div> and in the external php file <div id="start"></div>
The value for id="start" is updated from database, and it will be transferred to id="lastid". However, this code only works for FIRST click. For default <div id="lastid">1</div>, when clicking the button (id="more") it will read load.php?start=1 and updates the current document to <div id="lastid">11</div> (it's visible). But the second click will not load load.php?start=11
It seems that $('lastid') well reads the default value of <div id="lastid"></div>, but NOT when it has been updated by $("#lastid").empty().load('html #start')
How can I modify this code to work for subsequent clicks?
Wow, what a mess! Let's clean up a bit :)
You need to get rid of the id, as an id has to be unique and if you load another div with id lastId into your site, jQuery will not know which id to get. If you have many divs, each containing the id, you can just read the last id by using ('div:last').text();
So your ajax would look like this:
$(document).ready(function(){
$('#next').click(function(event){
$.ajax({
url: "load.php",
data: "start="+$('div:last').text()
success: function(html){
$("#results").append(html);
}
});
});
});
I also don't know what you do with the last line in the success, as load should be used to load data from the server with ajax, what is what you do by using $.ajax(). Also load() takes at least an url as parameter, see here.
try .live() function instead of .click()
Mate,
What I see from you code is that you are attaching an event once the page is loaded. And this creates a static call with static values that don't get updated as you continue.
My suggestions is to use a function that will feed an Id dynamically to your ajax call as follows:
$(document).ready(function(){
$(document).on("click", '#next', function(event){
$.ajax({
url: buildurl(),
success: function(html){
$("#results").append(html);
$("#lastid").empty().load('html #start');
}
});
});
});
function buildurl()
{
return "load.php?start="+ $('#lastid').text();
}
This will force your event to always call this function and the function to get a fresh value from lastid.
Regards
you have to change your success function because you have multiple #lastid when clicking twice.
try something like:
success: function(html){
$("#lastid").removeAttr("id"); // remove's the id from #lastid
$("#results").append(html); // appends the new one
$("#lastid").empty().load('html #start');
}

Categories