I did create a little script for form select filtering.
My goal is, that when the user selects something in let's say "field1", then "field2" get's replaced by a filtered one with PHP with only the selection left (done via data in an array).
My JQuery works fine in almost every modern browser:
$(".ajx").on("change", function() {
var $form = $('form');
var $fields = $(".ajx");
var method = $form.attr("method").toUpperCase();
var $this = $(this);
//var $ser = $fields.serialize();
var $ser = $this.serialize();
console.log($ser);
//console.log($(this))
$('.ajx_load').show();
$.ajax({
url: $form.attr("action"),
data: $ser,
type: method,
success: function(res) {
//$('.ajx').html($(res).find('.ajx div'));
//$this.html($(res).find('.ajx div'));
var $fnd = '#' + $this.attr('id') + ' div';
$this.html($(res).find($fnd));
console.log($this.attr('id'));
console.log($this.html($(res).find($fnd)));
$('.ajx_load').hide();
},
error: function (xhr, status) {
$('.ajx_load').hide();
alert('Unknown error - status: ' + status);
}
});
});
The code should reload the html code in <fieldset class="axj" id="ajx_1"><div>
, keep the selection made on the field and replace all <select>
fields in this <fieldset>
by filtered ones via PHP.
Here is the HTML output (without PHP) used: http://jsfiddle.net/69rvLtcn/8/
The serialize()
function does not work in IE (tested in IE11) and Safari - it is empty!
Thanks in Advance for your help
EDIT:
I tried to set a setTimeout() in the "success: function".
When I do this (even when I set it to 1) the same thing that happens in IE/Safari then happens on every other Browser too...?
It's like the selection is not transmitted in the JQuery response?!
EDIT2: It's IE after all! It somehow doesn't serialize request...? If I in PHP I check the request with var_dump($_REQUEST);
in IE/Safari it's empty in all others not...
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…