I am fetching user record from db-table like
<?php $row=1; ?>
<select id="status<?php echo $row; ?>" name="status<?php echo $row; ?>">
<option value="0">Active</option>
<option value="1">Block</option>
</select>
<?php $row++; ?>
----------------------------------------
Name Status
----------------------------------------
Abc Active
Def Block
Ghi Active
Jkl Block
----------------------------------------
where status is drop-down with two status for each user and If I want to change the status of any user then I select an option from that drop-down and at the same time the status must update in db-table.
For this I coded:
for(var r=1; r<=4; r++){
$("status").each(function() {
var sld = $("#status").val();
alert(sld);
$.ajax({
type: "POST",
url: "response.php",
data: "sld="+sld,
success: function(msg){
alert(msg); // this is the response
}
});
});
}
but for loop does not create script for each drop-down....
You'll need to remove that for loop, and use this code.
My event is now "change" and it will submit two variables, "id" and "sld". You then update your php script to check $_POST['id'] and $_POST['sld'] and then update these into the database.
add class="status" to each of the drop downs.
$(".status").change(function() {
var sld = $(this).val();
alert(sld);
$.ajax({
type: "POST",
url: "response.php",
data: { "sld": sld, "id":$(this).attr('id').replace('status','') },
success: function(msg){
alert(msg); // this is the response
}
});
});
$('status') would select elements that have the node name of status. Do you have that? Or did you mean $('.status')?
I think you are having more than one element with the same ID which will be an invalid HTML.
Put a class for your select boxes and then you can use something like this.
$("select.status").each(function() {
var sld = this.value;
alert(sld);
$.ajax({
type: "POST",
url: "response.php",
data: "sld="+sld,
success: function(msg){
alert(msg); // this is the response
}
});
});
Also I don't find any use of the for loop in the example.
Related
Let's imagine we have two select tags
<select id='combobox_1'>
<option value='1'>Description of fist record</option>
<option value='2'>Description of second record</option>
</select>
<select id='combobox_2'></select>
And two tables on database
table_1
combox_1_db_id PK
combox_1_db_description
table_2
combox_2_db_id PK
combox_1_db_id FK
combox_2_db_description
Now i want to send an AJAX request to PHP with the value of the option selected in combobox_1 to fill with records from the database the combobox_2 based on the combobox_1_id.
JS
$('#combobox_1').on('change', function() {
var option_value = $('#combobox_1').find('option:selected').val();
$.ajax({
url: '/get_records',
method: 'GET',
dataType: 'JSON',
success: function(data) {
$(data).each(function() {
var option = $('<option />');
option.attr('value',
this.combox_2_id).text(this.combox_2_description);
$('#combobox_2').append(option);
});
},
error: function() {
console.log('Error on loading records');
}
});
});
PHP
$this->router->get_request('/get_records', function() {
$records= $this->soap_server->getRecords(array(
'combox1Id' => $_GET['combox_1_id']
));
echo json_encode($records->return);
});
But i don't find a way to send the id to PHP so i can get the records based on that id and load them in combobox_2, any help would be appreciated.
You can send the option_value in the ajax, just include it as data like this...
$('#combobox_1').on('change', function() {
// get the id of the selected option
var id = $(this).children(":selected").attr("id");
$.ajax({
url: '/get_records',
method: 'GET',
dataType: 'JSON',
data: {combox_1_id: id}, // send the id in the request
success: function(data) {
$(data).each(function() {
var option = $('<option />');
option.attr('value',
this.combox_2_id).text(this.combox_2_description);
$('#combobox_2').append(option);
});
},
error: function() {
console.log('Error on loading records');
}
});
});
i have a problem in my ajax. Here is my serious problem. When i go to my view, sometimes it displays 1-0 and thats what i want, but sometimes it only displays -0. What i did is , i am getting an ID from the database and put it in a label, after i put it in a label, i get it again and concat with other ID that is came from my database again. Here is my code:
my ajax:
$(document).ready(function() {
get_clinicID();
});
function getcheckupID() {
var init = 0;
var value = $('#clinicID').html();
$.ajax ({
url: siteurl+"myclinic/getcheckID",
type: "GET",
dataType: "JSON",
success: function(data) {
if(data.length>0) {
$('#checkID').text(value+"-"+data[0]['clinic_id']+1);
$("#checkID").css('visibility','visible');
}
else {
$('#checkID').text(value+"-"+init);
$("#checkID").css('visibility','visible');
}
}
})
}
function get_clinicID() {
$("#clinicID").empty();
$.ajax({
url: siteurl+"myclinic/get_clinicID",
type: "GET",
dataType: "JSON",
success: function(data) {
$('#clinicID').text(data[0]['clinic_id']);
}
});
}
My view:
<div class="col-title">
<h4> Your Clinic ID: <label id="clinicID"></label></h4>
<br>
<h5 id="checkupID">Check-up ID: <label id="checkID"></label> </h5>
</div><!-- col-title -->
The Problem: If i go refresh/reload the page the output of my concat from the code below becomes -0, the actual output that i want is 1-0, sometimes it outputs 1-0, but sometimes its not. Is it delayed from ajax? or something wrong in my code below :
success: function(data) {
if(data.length>0) {
$('#checkID').text(value+"-"+data[0]['clinic_id']+1);
$("#checkID").css('visibility','visible');
}
else {
$('#checkID').text(value+"-"+init);
$("#checkID").css('visibility','visible');
}
}
try like this near :
text(value.toString()+"-"+init);
I am having real trouble with my AJAX request and I am not sure why. The following code seems to send to the entire web page script (as seen in both my alert box and in the console) rather than my checkbox values. Can anyone explain to me what I am doing wrong?
Here is my PHP checkbox, which has values generated by SQL, and has no submit button so the code is set up to run on change from the user:
<form id="numberOrderForm" action="testdatabase.php" method="post">
<div class="wrappers" id="multi-select1Wrapper">
<h2>Area Code</h2>
<select class="dropDownMenus" id="multi-select1" name="multi_select1[]" multiple="multiple">
<?php
//The query asking from our database
$areaCodeSQL = "SELECT ac.Number AS `AreaCode`, ac.Name AS `AreaName`
FROM `AreaCodes` ac"; //SQL query: From the table 'AreaCodes' select 'Number' and put into 'AreaCode', select Name and put into 'AreaName'
$areaCodeResults = $conn->query($areaCodeSQL); // put results of SQL query into this variable
if ($areaCodeResults->num_rows > 0) { // if num_rows(from $results) is greater than 0, then do this:
// output data of each row
foreach($areaCodeResults as $areaCodeResult) //for each item in $areCodeResults do this:
{
$areaNameAndCode = $areaCodeResult['AreaCode'] ." ". $areaCodeResult['AreaName']; //get AreaCode and AreaName from query result and concat them
$areaName = $areaCodeResult['AreaName']; // get AreaName
$areaCode = $areaCodeResult['AreaCode']; //get AreaCode
?><option class="menuoption1" name="menuAreaCode" value="<?php echo $areaCode ?>" ><?php echo $areaNameAndCode; ?></option><?php //Create this option element populated with query result variables
}
}
?>
</select>
</div>
</form>
And here is my jQuery AJAX code:
<script>
$('#multi-select1').on("change", function(){
var areaCode = $(this).val();
$.ajax({
type:"POST",
url: "testdatabase.php", //my PHP database
data: "areacode=" + areaCode,
success: function(response){
//do stuff after the AJAX calls successfully completes
alert (response);
console.log(response);
},
error : function(xhr, status, error) {
alert(xhr.responseText);
}
});
});
</script>
your data is incorrect for one.
replace:
data: "areacode=" + areaCode,
with:
data: {"areacode": areaCode},
you should also add: enctype='multipart/form-data' to your form element
Please add following line on jquery ajax call
dataType: 'json'
contentType: "application/json",
After add above code your code is like below
<script>
$('#multi-select1').on("change", function(){
var areaCode = $(this).val();
$.ajax({
type:"POST",
url: "testdatabase.php", //my PHP database
data: "areacode=" + areaCode,
dataType: 'json',
contentType: "application/json",
success: function(response){
//do stuff after the AJAX calls successfully completes
alert (response);
console.log(response);
},
error : function(xhr, status, error) {
alert(xhr.responseText);
}
});
});
</script>
I have a table that looks like:
id | page_name | category
--------------------------
1 | Tornado | Air
2 | Car | Vehicles
Dropdown for example (HTML):
<select id="dropdown_categories">
<option value="Air">Air</option>
<option value="Vehicles">Vehicles</option>
</select>
I want that when i select Air i will see only result 1 (Tornado).
Tried something like that:
controller:
public function Get_Page_By_Category ( $category ) {
$data['pages_cat'] = $this->page_model->get_page_by_category($category);
}
model:
function get_page_by_category ( $category ) {
$this->db->select('*')->from('page')->where('page.category =', $category);
$result = $this->db->get();
return $result;
}
ajax:
<script type="application/javascript">
$(document).ready(function() {
$("#dropdown_categories").change(function(){
alert($('#dropdown_categories option:selected').val());
})
});
</script>
Not sure how to continue, what is the best approach to this?
You should use ajax for this. try like this.
$(document).ready(function() {
$("#dropdown_categories").change(function(){
var val = $('#dropdown_categories option:selected').val();
$.ajax({
url: "path to controller function/value of select box present in var val",
type: "POST",
dataType: "HTML",
async: false,
success: function(data) {
alert(data)
}
});
});
});
in controller you can echo the value, that will come in success of ajax in data variable, i have alerted there, you can use how even you want
You are using jQuery, so you can use the jQuery ajax. It's easy. You can use:
var val = $('#dropdown_categories option:selected').val();
$.ajax({
url: "url",
type: "POST",
dataType: "application/json,"
data: {value: val, callback: php_function_to_call, args: [array_of_arguments_of_php_function]}
success: function(data){
document.title = data.title;
}
})
Now the php:
function myFunction($arguments_if_you_have){
//get the databse result here;
//notice: ajax only returns data, when there is something sent to the output stream, so we must use echo
echo json_encode($result);
}
if(isset($_POST['callback'])){
if(isset($_POST['args'])){
call_user_func_array($_POST['callback'], $_POST['args']);
}
call_user_func_array($_POST['callback'], array());
}
i have a problem when it comes to retrieving value from jQuery to php.i was able to get the value of my select and pass it to my php but i can't pass it back to php. here is the code...
<script>
$(document).ready(function()
{
$("select#months").change(function(event)
{
var m=$(this).val();
$.ajax({
type: 'POST',
url: "monthly_CRD.php",
data: {m: m},
success: function(){alert("updated")}
});
});
});
</script>
<div>
<select id="months">
<option value='00'>Month...</option>
<option value='01'>Jan</option>
<option value='02'>Feb</option>
<option value='03'>Mar</option>
<option value='04'>Apr</option>
</select>
<select id="years">
<?php
for($yr=10; $yr<=$year; $yr++)
{
echo "<option value='".$yr."'>".$years[$yr]."</option>";
}
?>
</select>
</div>
<?php
if (isset($_POST['m']))
{
$m = $_POST['m'];
echo $m;
} else {echo "fail";}
?>
it keeps on returning fail which means that isset is not working.
Change data: {m: m} to data: {"m":m}
Since you are looking at $_POST['m'] you need to define that key in your JSON. Currently you'd need to look inside $_POST['03'] if you selected Mar
If you mean that on page load, it returns fail, that is because on page load your $_POST array is probably empty.
If you want to know what was returned from your AJAX post, you need your success function to accept a parameter (like data) that jQuery will fill with the response to your post.
Then in the function body, you can write it to the DOM or your error console.
If you have an id to an element then just id is enough to select. Try this
$(document).ready(function()
{
$("#months").change(function(event)
{
$.ajax({
type: 'post',
url: "monthly_CRD.php",
data: { m: $(this).val()},
success: function(){
alert("updated")
}
});
});
});
$(document).ready(function()
{
$("#months").change(function(event)
{
$.ajax({
type: 'post',
url: "monthly_CRD.php",
data: '{ "m": "' + $(this).val() + '"}',
success: function(msg){
alert(msg)
},
error: function(msg) {
alert("An error happened: " +msg);
}
});
});
});
User fiddler of chrome tools to break on either success or error and check the value of the meesage property.