No POST data in jquery ajax call
Question
I've been trying to POST data back to a controller from a lightbox using ajax but of course it doesn't work.
I have two select lists, both populated from the default controller. When I select a value and click the submit I have the error box briefly flash up the disappear again.
Using the firebug network tab I can see the POST request however under the post tab there's no data. I must be doing something wrong in the javascript itself but to me it looks ok and all my googling didn't suggest an alternative that worked.
Here's my code...
<body style="background-color: #f0f0f0;">
<div style="margin: 5px;">
<div id="ajax-login-register">
<div id="login-box">
<div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('login')?></div>
<form id="login-form">
<select name="currency_sel" id="brand_country" class="form_select_200px">
<option value="0" selected><i>Select your preferred Currancy</i></option>
<?php foreach($currencies as $currency): ?>
<option value="<?php echo $currency['currency_id']; ?>"><?php echo $currency['currency_name']; ?></option>
<?php endforeach; ?>
</select>
</form>
</div>
<div id="register-box">
<div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('meta_description')?></div>
<form id="register-form">
<select name="language_sel_1" id="brand_country" class="form_select_200px">
<option value="0" selected>Select your preferred Language</option>
<?php foreach($languages as $language): ?>
<option value="<?php echo $language['language_id']; ?>"><?php echo $language['language_name']; ?></option>
<?php endforeach; ?>
</select>
<select name="language_sel_2" id="brand_country" class="form_select_200px">
<option value="0" selected>Select your preferred Language</option>
<?php foreach($regions as $region): ?>
<option value="<?php echo $region['country_id']; ?>"><?php echo $region['country_name']; ?></option>
<?php endforeach; ?>
</select>
<div class="line"> </div>
</form>
</div>
<div>
<form>
<button id="ajax-submit-button" style="font-size: 14px;"><?//=lang('register')?>Submit</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#ajax-login-button').button({
icons: {
primary: "ui-icon-check"
}
});
$('#ajax-submit-button').click(function(){
var error = false;
if(error){
return false;
} else {
$.ajax({
url: "<?=site_url('locale/set_ui_lang')?>",
type: "POST",
dataType: "json",
data: ({
'currency_sel' : $('#currency_sel :selected').val(),
'language_sel_1' : $('#language_sel_1 :selected').val(),
'language_sel_2' : $('#language_sel_2 :selected').val()
}),
success: function(data){
parent.$.colorbox.close();
parent.location.reload();
},
error: function(xhr, ajaxOptions, thrownError){
alert("ERROR! \n\n readyState: " + xhr.readyState + "\n status: " + xhr.status + "\n thrownError: " + thrownError + "\n ajaxOptions: " + ajaxOptions);
}
});
}
});
});
</script>
</body>
When the error notice flags up the ready state and status both come up 0, thrownerror is just error.
Also the receiving controller is currently only just a print_r(&_POST) to test.
I don't seem to be able to get past this myself, if anyone can help it is much appreciated.
Thanks
5 answers
solution1
1 2013-08-08 00:05:34
The keys of your data object should not be in quotes.
It should work (provided the jQuery calls for the values work) when you change it to:
data: {
currency_sel: $('#currency_sel :selected').val(),
language_sel_1: $('#language_sel_1 :selected').val(),
language_sel_2: $('#language_sel_2 :selected').val()
},
Source: jQuery.ajax() documentation
solution2
1 2013-08-08 00:10:29
Is it just me or are you making the click event return false instead of firing off AJAX?
var error = false;
if(error){
return false;
}
solution3
1 2013-08-08 01:30:00
You can't multiple IDs with the same name and you selectors are wrong.
$('#currency_sel :selected').val() should be $('select[name="currency_sel"] option:selected').val() and same for the others.
EDIT
Remove parenthesis of data, it should be
data: {
currency_sel : $('select[name="currency_sel"] option:selected').val(),
language_sel_1 : $('select[name="language_sel_1"] option:selected').val(),
language_sel_2 : $('select[name="language_sel_2"] option:selected').val()
},
solution4
1 2013-08-08 03:39:19
Your ajax call is in a click handler for a button inside a separate form.
Here's what's happening..
When you click the button, you trigger an ajax call.
The click handler then returns normally and the form that contains the button is submitted.
When that happens a new page loads, and the browser cancels any pending ajax request, which triggers your error. (after you click ok in the error alert, you should notice a normal page load)
To prevent that you can either return false; after your ajax call, or call preventDefault() on the event object:
$('#ajax-submit-button').click(function(e){
e.preventDefault();
/* Rest of the code */
});
This should fix your problem.
* Edit: * note the e parameter on the function definition
solution5
0 ACCPTED 2013-08-13 18:51:33
Fixed this in combination of Ben & L105. For anyone else with a similar problem here's the working code. div names etc are a bit sketchy, this is still a prototype build...
<body style="background-color: #f0f0f0;">
<div style="margin: 5px;">
<div id="ajax-login-register">
<div id="login-box">
<div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('login')?></div>
<form id="login-form">
<select name="currency_sel" id="currency_sel" class="form_select_200px">
<option value="0" selected><i>Select your preferred Currancy</i></option>
<?php foreach($currencies as $currency): ?>
<option value="<?php echo $currency['currency_id']; ?>"><?php echo $currency['currency_name']; ?></option>
<?php endforeach; ?>
</select>
</form>
</div>
<div id="register-box">
<div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('meta_description')?></div>
<form id="register-form">
<select name="language_sel_1" id="language_sel_1" class="form_select_200px">
<option value="0" selected>Select your preferred Language</option>
<?php foreach($languages as $language): ?>
<option value="<?php echo $language['language_id']; ?>"><?php echo $language['language_name']; ?></option>
<?php endforeach; ?>
</select>
<div class="line"> </div>
</form>
</div>
<div>
<form>
<button id="ajax-submit-button" style="font-size: 14px;"><?//=lang('register')?>Submit</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#ajax-login-button').button({
icons: {
primary: "ui-icon-check"
}
});
$('#ajax-submit-button').click(function(e){
e.preventDefault();
$.ajax({
url: "<?=site_url('locale/set_ui_lang')?>",
type: "POST",
dataType: "json",
data: {
currency_sel:$('select[name="currency_sel"] option:selected').val(),
language_sel_1:$('select[name="language_sel_1"] option:selected').val()
},
success: function(data){
parent.$.colorbox.close();
parent.location.reload();
},
error: function(xhr, ajaxOptions, thrownError){
alert("ERROR! \n\n readyState: " + xhr.readyState + "\n status: " + xhr.status + "\n thrownError: " + thrownError + "\n ajaxOptions: " + ajaxOptions);
}
});
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.