We Keep Coding

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

javascript redirect page and refresh cache at the same time

i have a problem when i redirect an user after edit profile and he edits the profile pic. I redirect him to his user page but it doesnt display the edited pic only if he manualy refresh page. Here is my code of the profile_edit.php page that redirects to profil.php:
<script type="text/javascript">
$(document).ready(function() {
var f = $(\'form\');
var b = $(\'#submit1\'); // upload button
b.click(function(){
// implement with ajaxForm Plugin
f.ajaxForm({
beforeSend: function(){
},
success: function(e){
window.location=\'profil.php?user='.$user_session.'\';
},
error: function(e){
}
});
});
});
</script>

add one more parameter with your url for cache busting some thing like this
window.location=\'profil.php?pram='+Math.random()+'&user='.$user_session.'\';

At first - you can add some hash, to prefer caching like
window.location=\'profil.php?user='.$user_session.'&rand='.mt_rand().'\';
This will create new url - so browser will load page as new
And it is possible, that you need add this trick to image url -- please check this moment
if you need to refresh page ( your current url equal to new one ) - use
window.location.reload(true);
at success callback instead redirect - true say to browser to refresh page

.load() function load the entire page on click

I have use modal for user sign up and its working correctly when user click on register link the modal popup load perfectly now i am making comment box where user can comment on pictures and if user is not login i want to load the same popup modal which is bind with register link some how i am successful but the error is that the load() function load the entire page for me on the same page i am totally confuse. here is my coding .
$("#button").click(function(){
var user=$("#username").val();
var message=$("#form-s-t").val();
if(user != ""){
if(message != ""){
$.ajax({
type:"post",
url:"retriveing.php",
data:"name="+name+"&message="+message+"&action=addcomment",
success:function(data){
showComment();
}
});
$("#form-s-t").val('');
}
else {alert("you can not post empty comments");}
}
Here in else portion i am loading the popup.
else{
$('.topopup').load("#toPopup");
}
});
});
The popup which loads with register link is this.
User which is not login want to comment it load the page twicly and oppositly as shown in picture.

There is no need of load() function if the model resides in the same page . try to trigger the register link which can be done like that.
Remove the load function in your else portion and just write the code I have give below.
$('.topopup').trigger("click");
.topopup
is a id of register link and you want to load this popup when user is not sign in and want to comment. I hope it will work for you. if the model resides in the same page.

From you screenshot, you send the wrong argument to the server.
$('.topopup').load("#toPopup");
// you just load "/#toPopup" page from the server
// and the server return a new page to you
// then jQuery update '.topopup' with the new
// page

You are loading an anchor, so the same page is getting injected into the elements with class .topopup. Just check your register button's onclick function and use else { thatFunction(); } if you want to recreate the same behaviour. [Also try using retrieving.php as a filename.]
To clarify: load("#toPopup") is equiv. to load(currentURL+"#toPopup"). First parameter is an URL string, not a selector string.

Loading dynamically generated jQuery page after page reload

I have a search script written in jQuery. To submit a query a user presses enter and then a URL for the results page is created which is something like #search/QUERY/. However, when you either reload the page, click a result which goes to a different page or return back from a previous page the search results are no longer there. Why could this be?
My jQuery code is:
$(document).ready(function(){
$("#search").keyup(function(e){
if(e.keyCode==13){
var search=$(this).val();
var query=encodeURIComponent(search);
var yt_url='search.php?q='+query;
window.location.hash='search/'+query+'/';
document.title=$(this).val()+" - My Search Script";
$.ajax({
type:"GET",
url:yt_url,
dataType:"html",
success:function(response){
$("#result").html(response);
}
});
}
});
});

When a user reloads the javascript, all variables and functions are reinitialized. JavaScript does not pass variables from page to page. You either need a server side solution, or use JavaScript storage. The later may not work in all browsers.

This is because you are loading the search results dynamically with an AJAX call. If the page gets reloaded, that information gets lost.
A possible solution would be to store the search query and/or results in the user session. Then you will be able to automatically add the content on page reloads.