We Keep Coding

$(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

Event handling in dynamically generated page

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.

Ajax start event issue

Im trying to show a progressbar when my page is doing an ajax request.
I have a div with an image inside it and i would like to show it on the ajaxStart event. The problem is the img only shows itself when the ajaxStart event is done. However the alert is fired before the ajax request.
$(document).ajaxStart(function () {
alert("test");
document.getElementById('LoadingDiv').style.visibility = "visible";
});

$.ajax({
url: url,
async: true,
dataType: 'json',
success: function (data) {
Posted abit to early changed async to true and works now.

You can show/hide loading spinner like this:
/*LOADING SPINNER*/
jQuery.ajaxSetup({
beforeSend: function() {
$('#loadingDiv').show()
},
complete: function(){
$('#loadingDiv').hide()
},
success: function() {}
});
The #loadingDiv simply contains an animated image. The ajaxSetup method set default values for future Ajax requests.
That means that this loading indicator will be shown every time when making ajax calls.

Hide leanModal div with form

First of all I want to say I am not a javascript expert at all..
I am testing Ray Stone's leanModal pluggin.
I am able to open and close modal using the pluggin.
I have added a form to modal div.
What I want to do now is to close the modal when user clicks submit button (as you can see in project website).
The problem is that I don't process the form as usual. I get the data using jQuery and I do request to server using $.ajax(). Here is my code:
$(function() {
$('#add-user').submit(function() {
$.ajax({
type: 'post',
url: '***',
data: '***',
contentType: 'application/json',
dataType: 'json'
});
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
return false;
});
});
Where
#add-user is the link that opens the modal.
#cp is the div id of the modal.
In this case the div gets close but the blur behind the div does not dissapear until user do clicks. The effect is the same than using $('#cp').remove();
How can I totally close the div when the request is sent?
Thanks in advance
Update: A jsFiddle with my code is available here.
Some CSS rules are missed and I have not featured the AJAX request but I think the main code is there.

Firstly $.ajax() is asynchronous so the following lines
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
will be executed even if your query is not successful.
You would better do
$.ajax({
...
success: function () {
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
}
});
Secondly, after checking the source, I think you should use
$.leanModal.close_modal('#cp');
$("#lean_overlay") seems to be the "blur" element you want to get rid of.
Ultimately you could do $("#lean_overlay").remove() but the plugin seems to manage it already
Finally you should have
$(function() {
$('#add-user').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '***',
data: '***',
contentType: 'application/json',
dataType: 'json',
success: function () {
$('#add-user :input:not(:submit)').val('');
$.leanModal.close_modal('#add-user');
}
});
return false;
});
});

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