Search jQuery

jQuery Forum

jQuery messes input values after browser "back button".

in Using jQuery • 10 years ago

Hi,

I have this strange problem with jQuery and i don't know what causes it. When i'm in main view of my site that contains form with values. Then i press submit button and get to the next view if everything is ok. But if i press browsers back button in second view, i get to see that some of my input values are messed up in first view. And what i mean with "messed up" is that

Input "image_string" contains value of jQuery "grid_offset.left"

Input "end_date" contains value of jQuery "grid_offset.top"

and some of my inputs what i use for debugging contains zeros (i don't know where those values came from).

And you can see from my script, that i don't change id "#image_string" value to anything. I just get values from those.

8 inputs that contains offsets of certain elements has right values, and those are the only values that i want to set with jQuery. So input fields data that i don't even manipulate with jQuery gets changed after back button press. I tried to comment off whole script and then all values was all right after back press.

Here is the script what is located on bottom of my page:

<script>
$.ajaxSetup ( { cache: false } );
$.fn.getOffset = function()
{
var bg_offset = $("#background").offset();
var grid_offset = $("#grid").offset();
var text_offset = $("#draggable").offset();
var text_pos_x = Math.round(text_offset.left - bg_offset.left);
var text_pos_y = Math.round(text_offset.top - bg_offset.top);
$("#grid_offset_left").val(Math.round(grid_offset.left));
$("#grid_offset_top").val(Math.round(grid_offset.top));
$("#bg_offset_left").val(Math.round(bg_offset.left));
$("#bg_offset_top").val(Math.round(bg_offset.top));
$("#text_offset_left").val(Math.round(text_offset.left));
$("#text_offset_top").val(Math.round(text_offset.top));
$("#pos_x").val(Math.round(text_pos_x));
$("#pos_y").val(Math.round(text_pos_y));
};
$(window).resize(function()
{
$(this).getOffset();
});
$(document).ready(function()
{
var bg_offset = $("#background").offset();
$("#draggable").disableSelection();
$("#background").disableSelection();
$("#count_type_1").qtip( { content: 'Tooltip 1' } );
$("#count_type_2").qtip( { content: 'Tooltip 2' } );
$("#draggable").css({"position":"absolute", "top":160, "left":Math.round(bg_offset.left+40)});
$.datepicker.setDefaults(
{
dateFormat: "yy-mm-dd",
showButtonPanel: true,
changeMonth: true,
changeYear: true
},
$.datepicker.regional["fi"]
);
$("#end_date").datepicker();
$("#draggable").draggable(
{
zIndex: 1000,
ghosting: false,
opacity: 0.6,
containment : 'parent',
drag: function()
{
$(this).getOffset();
}
});
$("#colorSelector").ColorPicker(
{
color: '#000000',
onShow: function (colpkr)
{
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr)
{
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb)
{
$("#colorSelector div").css('backgroundColor', '#' + hex);
$("#font_color").val(hex);
}
});
$(this).getOffset();
});
$("#create_image").click(function()
{
var pos_x = $("#pos_x").val();
var pos_y = $("#pos_y").val();
var temp_text_path = $("#temp_text_path").val();
var temp_bg_path = $("#temp_bg_path").val();
$.post("[URL_REMOVED]", { "pos_y" : pos_y, "pos_x" : pos_x, "temp_text_path" : temp_text_path, "temp_bg_path" : temp_bg_path },
function(data)
{
d = new Date();
$("#image_url").append('<img src="'+data.final_image+'" alt="" />')
}, "json");
});
$("#send_data").click(function()
{
var image_string = $("#image_string").val();
var start_date = $("#start_date").val();
var end_date = $("#end_date").val();
var font_size = $("#font_size").val();
var font_color = $("#font_color").val();
var temp_text_path = $("#temp_text_path").val();
var count_type = $("input:radio[name=count_type]:checked").val();
$.post("[URL_REMOVED]", { "image_string" : image_string, "start_date" : start_date, "end_date" : end_date, "font_size" : font_size, "font_color" : font_color, "temp_text_path" : temp_text_path, "count_type " : count_type },
function(data)
{
d = new Date();
$("#image_string_debug").val(data.image_string);
$("#draggable").attr("src","[URL_REMOVED]?"+d.getTime());
}, "json");
});
$(":input").change(function(event)
{
var image_string = $("#image_string").val();
var start_date = $("#start_date").val();
var end_date = $("#end_date").val();
var font_size = $("#font_size").val();
var font_color = $("#font_color").val();
var count_type = $('input:radio[name=count_type]:checked').val();
$.post("[URL_REMOVED]", { "image_string" : image_string, "start_date" : start_date, "end_date" : end_date, "font_size" : font_size, "font_color" : font_color, "count_type" : count_type },
function(data)
{
d = new Date();
$("#debug").text(data.debug);
}, "json");
});
</script>

Replies(4)

jay.blanc..

Re: jQuery messes input values after browser "back button".

10 years ago

Is there a link where we can observe the behavior?

theoner

Re: jQuery messes input values after browser "back button".

10 years ago

I'm developing this site on home server that isn't connected to internet at the moment.

theoner

Re: jQuery messes input values after browser "back button".

10 years ago

I found workaround for this. This strange behavior is happening only with Chrome and Safari. I found discussions from stackoverflow/google and earlier discussions was in 2009. For some reason when user is leaving page from link or from form submit and then presses browsers back button, then jQuery throws bogus data to random inputs.

I made about 20 very simple empty inputs: <input type="text" /> to top of my page. I didn't give name or id. After that i pressed form submit and then pressed back button. About 16 of those inputs were populated with data EVEN they don't have any id or name.

I found from Stackoverflow that this problem occurs when you set input values with ID and only with Chrome and Safari.

I changed all:

$("#my_input").val("My example data");

to this

$("input[name='my_input']").val("My example data");

and now this problem is gone!