AJAX nesting content on call - javascript

I have my website, http://www.yokaproject.com/, i decided to clean it up, im still in the process so if you see that i have mistakes fine, im not done, but i appreciate any comments. The nav at the top displays anchor tags to click and load jquery into the div#container. My problem is that calls are being doubled each time and nesting more and more content, just click art twice in a row. Ive been at this since last Monday so any help is appreciated. Here is my function
$('.header a').on('click', ajaxLoad);
function ajaxLoad(e) {
e.preventDefault();
var url = $(this).attr("href");
var that = $(this);
that.off('click'); // remove handler
$.ajax({
url: url,
dataType: "html",
type: "GET",
cache: false
}).done(function(data){
$("#container").html(data);
});
};
If you want a better look at the html and css you can just visit my site. i plan on putting it up on github in the future once it gets larger but for now its not necessary.
you can now view complete code on my website

that.on('click', ajaxLoad); // add handler back after ajax
This line of code re-attaches the click handler every time an ajax response comes. And every time you click that you create an ajax request.

Your mistake is:
in always function, you are again calling the ajaxLoad function in callback! So it is calling multiple times. Please remove that line from you code.

Related

JQuery append() information remains even after hard refresh

I made an Ajax call using JQuery and appended (using div.append()) the returned information to a div. This Ajax call was called when clicking on another div on the page. But even after a hard refresh in multiple browsers, the appended information from the previous call stays there, furthermore some of the links in the div it was appended to don't work. I also tried clearing the cache on both the browsers and the server but it didn't work(and found out that they don't store cache on the server).
If it means anything at all, here is the code I used, which I have since commented out:
$("#LogoutDiv").click(function() {
$.ajax({
url: 'header.php',
type: 'POST',
data: {
NumLgtRqt: 1
},
success: function(response) {
$("#HeaderContainer").append(response);
window.location.replace("index.php");
}
});
}
Thank you very much for your help!
The problem was that I put script tags in the append () function. Even though they were inside the append output and in quotations, they still registered to the html.

Maintain reordered divs on refresh with ajax

I have a page that has divs for delivery points (each with a child arrival button) on a route, and I wrote a script that appends the delivery point div to an empty div at the bottom of the page when the arrival button is clicked. I would like to preserve the moved divs at the bottom of the page if the page is refreshed, so that my driver on this delivery route doesn't get confused about which delivery point on the route to go to next.
This is the simple click function script that I need to add an ajax call to. As an aside, both the buttons with the class .arrived and their parent divs are dynamically named in the ruby loop that's printing them both out on my view.
$(".arrived").click( function() {
$("#item_" + $(this).attr("id")).appendTo("#delivered_collector");
});
I found another script elsewhere in the application that I THINK I can borrow logic from for this task, but I'm having some trouble making sense of it and how to translate it into my click function. This example preserves the state of checkboxes even if the page refreshes.
$('input.delivery_label_check').on('click', function(e)
{
var $id=$(this).context.id.split("_")[2];
var $checked=$(this).prop('checked');
$.ajax({type: "POST",
url: "/ops/mark_label/"+$id+"?checked="+$checked,
success: function(data) {
}});
e.stopPropagation();
});
If anyone can help me make enough sense of the second script to implement parts of it in the first, I'll be very grateful!
// select an input with the delivery_label_check class
// whenever one of those appears on the page, add a click function to it
// it doesn't matter when one appears (that's what "on" does)
$('input.delivery_label_check').on('click', function(e)
{
// the click target has an id like "#name_thing_5" so split("_")
// makes ['name','thing','5'], then it gets the last item (aka '5')
var $id=$(this).context.id.split("_")[2];
// is the box checked or not?
var $checked=$(this).prop('checked');
// here is your ajax call
$.ajax({type: "POST",
url: "/ops/mark_label/"+$id+"?checked="+$checked,
success: function(data) {
}});
e.stopPropagation();
});
Does that help?

Ajax-loaded form always send first value entered even if reloaded

I have to admit that I don't really know how to explain this "problem" that I have nor was I able to find a good title for this thread. Anyway, I will try to be clear because I'm not sure if I could add a JSFiddle or code snippet.
Let's start with the project. I'm working on some kind of DVD Library to be used on a local network only. There's a page that allow a user to add new films to the database. To do this, I use the Allocine API (A French equivalent to IMDB) to gather films informations. The user can enter a film title (Or part of it) and perform a search. All the corresponding films from Allocine will then appear.
If the user click on one of them, a modal window opens embedding a form that will allow the user to add the needed informations before sending the form. The form is then sent using AJAX and the result appear in the same modal window.
The problem come when I want to add a second film. If I don't reload the page before trying to submit the form another time, the value from the first film will be sent instead of them from the second one and that is driving me crazy.
Here's the javascript code used to send the form.
$("body").on( "click", "#AddFilmButton", function() {
var formDatas = $('#FormAjoutFilm').serialize();
$.ajax({
url : 'Functions.php',
type : 'POST',
data : 'Action=AddFilm&' + formDatas,
cache: false,
dataType : 'html',
success : function(result, statut){
$(result).modal();
},
});
});
You may notice that I'm watching a button click event instead of a form submit event. That's because when I used the form submit event, the page was refreshed all the time, no matter if I was using preventDefault or not.
I'm starting to wonder if the sent value are not reset exactly because I have used this workaround. Could it be just that ?
What other piece of code would be useful to help you understand my problem ?
EDIT : just like #intale suggested, I have multiple form in the DOM because of this modal system. I made some progress with it. First, I can now use a proper event handler and I'm watching the form submit event as preventDefault now works.
In the success function, I have added this line : $('#FormAjoutFilm').remove();
It works almost as intended in that the datas are submitted only every other time. :p
Still, it's better than the previous behavior and I need to fix it now.
Thanks for anyone who contributed so far. If you know why I need to send the form two times to get it work, let me know. This is what I have now. :)
$("body").on( "submit", "#FormAjoutFilm", function(e) {
e.preventDefault();
var formDatas = $('#FormAjoutFilm').serialize();
alert(formDatas);
$.ajax({
url : 'Functions.php',
type : 'POST',
data : 'Action=AddFilm&' + formDatas,
cache: false,
dataType : 'html',
success : function(result, statut){
$('#FormAjoutFilm').remove();
$(result).modal();
},
});
});
Second Edit : It looks like it's finally solved after a cache clearing. Thanks for everyone who contributed. :)
Try reseting the form after the data is sent:
success : function(result, statut){
$('#FormAjoutFilm')[0].reset();
$(result).modal();
}
This will prevent your serialize function from getting the first submit data

AJAX stop working on loading same site different PHP id

So i have a website that I'm doing for a school project. It's supposed to be like PasteBin. So on the right theres a different div (Uued koodid) that shows newest pastes. On click, they are supposed to show what they include using AJAX to refresh the left div. This only works for 4 times and then stops, but URL is still changing. After refresh it changes again and works again for 4 more times.
In main.js i have
...
$.ajaxSetup({ cache: false });
...
$(".uuedKoodid").click(function () {
$(".left-content").load(document.location.hash.substr(1));
});
...
EDIT:
Also other AJAX functions work. If I log in, I can switch between settings and profile perfectly but still cannot watch new codes
When you replace right menu with new code (from ajax call) you don't attach click event again on .uuedKoodid items so they don't do anything. You need to attach event again or attach it like this:
$(document).on('click', '.uuedKoodid', function () {
$(".left-content").load(document.location.hash.substr(1));
});
Edit:
As you noticed this will cause small problem. onclick event run before browser run standard link action. First you load ajax and then browser changes address. This way you are 1 action behind. Better solution than reading with delay (setTimeout) i think would be to read address directly from link:
$(document).on('click', '.uuedKoodid', function () {
var url = $(this).attr('href');
$(".left-content").load(url.substring(url.indexOf("#")+1));
});

JS/AJAX: Refresh part of a page on the click of a button

I'm currently in the midst of creating a generator which echoes a random line from a .txt file. All is well and good however I need to have this certain part of the page which echoes the random line refresh when a button is clicked. I've tried multiple methods to no avail and I'm running out of ideas - I'm still quite new to JavaScript/AJAX and have no idea on how to go about it. Any help would be brilliant, thanks!
Use Jquery Ajax to get contents from the file and display the contents into a div
$.ajax({
type: "GET",
url: "yourfilename.txt"
}).done(function( msg ) {
$("#YOURDIVID").html(msg.d);
});
Bind click event of your button
$(function(){
$("#YOURBUTTONID").on("click",function(){
//do your work
});
});
Refreshing logic can be wrapped into a function and called on click of button OR you can use javascript settimeout method.

Categories