I am trying to load data using ajax, but the checkboxes are not working
This is the html am trying to load using ajax
<div class="mt-checkbox-list" >
<?php foreach($product_offerings as $row){
$check ='';?>
<label class="mt-checkbox mt-checkbox-outline">
<?php
if(isset($_GET['categories'])){
foreach(#$_GET['categories'] as $cat) {
if ($row['id']==$cat) {
$check = 'checked';
break;
}
}
}?>
<input type="checkbox" value="<?php echo $row['id']?>" name="categories[]" <?php echo $check;?>>
<?php echo $row['name']?>
</label>
</div>
<?php }?>
AJAX call:
$('#product_offering_id').change(function(e){
e.preventDefault();
var product_offering_id = $('#product_offering_id').val();
if(product_offering_id != '')
{
$.ajax({
url:"/organization/vendors/productOfferingsVendors",
type:"POST",
dataType: 'json',
cache: false,
data:{product_offering_id:product_offering_id},
success:function(json)
{
if (json['success']) {
$('#categories').html(json['html']);
}
}
});
}
am attaching a screenshot of the result am getting
Any help would appreciate, Thanks in advance
Checkboxes are working now, it was the issue with the classes i used for checkbox, after removing it, it worked
Related
I am trying to change name of people on a table list. I will change it by a dynamic dropdown on a table cell. On this code, I can not get names from the suggestion box to the searchbox. I pick up the name from dropdown but the name choosen doesn't appear on the search box,
Anyone who knows why?
<td title="Name of workers">
<script>
$(document).ready(function(){
$("#search-box").keyup(function(){
$.ajax({
type: "POST",
url: "getpersonallist.php",
data:'keyword='+$(this).val(),
success: function(data){
$("#dropdown-box").show();
$("#dropdown-box").html(data);
$("#search-box").css("background","#FFF");
}
});
});
});
//I know something is wrong on this JQ part below.
function selectname(val) {
$("#search-box").val(val);
$("#dropdown-box").hide();
}
</script>
<input style="cursor: pointer; hover{background: yellow}" onclick="makeElementEditable(this)"
onblur="updatePersonal(this,'<?php echo $rs['id'] ?>')" type="text"
id="search-box"
value="<?php echo $rs['personal'] ?>"/>
<div id="dropdown-box"></div>
</td>
More code (getpersonallist.php):
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
if(!empty($_POST["keyword"])) {
$query ="SELECT * FROM personal WHERE personal like '%" . $_POST["keyword"] . "%' ORDER BY personal LIMIT 0,6";
$result = $db_handle->runQuery($query);
if(!empty($result)) {
?>
<ul id="selectname">
<?php
foreach($result as $name) {
?>
<li onClick="selectname('<?php echo $name["personal"]; ?>');"><?php echo $name["personal"]; ?></li>
<?php } ?>
</ul>
<?php } } ?>
I'm not sure if you made any errors, but your function selectName() is never called, which could be a problem. I'm not sure where you want to call it either, but make sure it is called in an appropriate place.
i am a beginner in jquery... sorry
I need to create dynamically a table depending of the number of rows i choose by a
index.php
<div class="input-append" >
<span class="add-on">Nombre de TGBT</span>
<?
$selected = '';
echo '<select name="nb_tgbt" id="nb_tgbt" size="1">',"\n";
for($i=0; $i<=10; $i++)
{
$selected = 'selected="selected"';
echo "\t",'<option value="'.$i.'"'.$selected.'>'.$i.'</option>',"\n";
$selected='';
}
echo '</select>',"\n";
?>
</div>
i send the value by POST method to a page "getvalue.php"
code of the getvalue.php is:
<?php
$tabletgbt='';
$tabletgbt=$tabletgbt.'<form>
<fieldset>
<div class="input-append">';
for($i=1; $i<=$_POST['id']; $i++)
{
$tabletgbt=$tabletgbt.'<div><span class="add-on">Nom TGBT'.$i.'</span>
<input id="tgbtname'.$i.'" type="text" placeholder="Nom du TGBT '.$i.'"/>
</div>';
}
$tabletgbt=$tabletgbt.'
</div>
</fieldset>
</form>';
return $tabletgbt;
$i='';
?>
How can i show the return data (html code) on my index.php dynamically on change please
Regards
this is the ajax code i used:
Hello, this is the ajax code i used:
<script>
$(document).ready(function(){
$('#nb_tgbt').change(function(){
var nbretgbt_id = $('#nb_tgbt').val();
if(nbretgbt_id != 0) {
$.ajax({ type:'post', url:'getvalue.php', data:{id:nbretgbt_id}, cache:false, success: function(returndata){
$('#tablename_tgbt').html(returndata);
}
});
}
})
})
</script>
I'm using codeigniter.I have controller call feature.php and view call feature.php in view php i have drop-down list.
I need to save my packages id in session when the user selected the drop-down.how can i do this without refreshing and submit data in my from ?
this is my HTML code in view php page
<div class="form-group">
<label for="lastname" class="control-label">Your Packages</label>
<?php if(isset($tourbuddy_packages)){?>
<select id="itemType_id" class="form-control input-sm" name="tripbuddy_PackageTitle" onChange="disp_text()">
<?php foreach ($tourbuddy_packages as $packages) {?>
<option value="<?php echo $packages['PackageID'] ?>">
<?php echo $packages[ 'PackageTitle']?>
</option>
<?php } ?>
</select>
<input type="hidden" name="PackageID" id="country_hidden">
<?php } else { ?>
<select class="form-control input-sm" name="tripbuddy_PackageTitle">
<option>Add Packages</option>
</select>
<?php } ?>
</div>
need quick help thanx
You can create a php file called save_package_to_session.php;
<?php
if (!isset($_SESSION)) {
session_start();
}
$package_id = $_POST["id"];
$_SESSION["pkg_id"] = $package_id;
echo $_SESSION["pkg_id"];
?>
and js,
$("#itemType_id").change(function() {
$.ajax({
url : "save_package_to_session.php",
method: "POST",
data: "id=" + $(this).val(),
success: function(response) {
// handle
}
})
});
I don't have more idea about php code but you make ajax request
$("#itemType_id").change(function() {
$.ajax({
url : controller_action_url,
method: "POST" /* use get or post*/,
data: "package_id=" + $(this).val(),
success: function(response) {
}
})
});
simply, now you can get package_id params on controller and you can store in session.
So I am doing a shopping cart site, using CodeIgniter on backend
Here is the catch, I loop the product list, with 'add to cart' button, inside a form tag.
So let's say, I have 5 products to display, there will be 5 form tag as:
<?php foreach ($products as $vid):?>
<form id='cart' method='post' action='<?php echo base_url();?>cart/add'>
<input type='hidden' id='vid' name='vid' value='<?php echo $vid['id'];?>'/>
<div class="video_box">
<div class="video">
<a href="#<?php echo $vid['id'];?>" name='modal'>
<img src="<?php echo base_url(); ?>assets/images/<?php echo $vid['video_thumbnail'];?>" alt="<?php echo $vid['title'];?>" border="0" height='150' width='100' />
</a>
</div>
<div class="video_checkbox">
<?php if($this->session->userdata('nric')===FALSE ) {
echo "Please Login to Rent/Purchase"; } else { ?>
<input type='image' id='btn-add' src="<?php echo base_url(); ?>assets/images/rent_btn.png" alt="Rent" border="0" />
<?php } ?>
</div>
</form>
<?php endforeach;?>
And my javascript/jquery script:
<script type="text/javascript">
$(document).ready(function() {
$("#btn-add").click(function() {
var action = $("#cart").attr('action');
var form_data = {
vid : $("#vid").val(),
is_ajax : 1
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'exists')
{ alert("This item is in your cart already! You can only add 1 same item once");
}
if(response == 'newses')
{ alert("This item has been added succesfully!");
document.location.reload(true);
}
if(response == 'new_added')
{
alert("This item has been added succesfully1!");
document.location.reload(true);
}
}
});
return false;
});
});
</script>
As my controller (in form action) localhost/site/cart/add:
public function add() {
$vid=$_POST['vid'];
if($this->session->userdata('shoppingCart')===FALSE)
{
$shoppingCart = array (
$vid => 1
);
$this->session->set_userdata('shoppingCart',$shoppingCart);
echo 'newses';
} else {
$tmp = $this->session->userdata('shoppingCart');
if(array_key_exists($vid, $tmp)) {
//only allow user to add qty:1 to the same product
echo 'exists';
} else {
$tmp[$vid]= 1;
$this->session->set_userdata('shoppingCart',$tmp);
echo 'new_added';
}
}
}
So the problem now, I can add the product to my shopping cart with no problem, all the stuff inside cart/add controller runs fine, the output is as expected.
But I need to alert the customer whether the product has been added or failed (as shown in my jquery code).
Problem is, the script will run fine only for the 1st created.
Means, if there is 5 products, it will loop and create 5 form-tag right, only the 1st form-tag will run the script successfully (after the button is clicked). The 2nd-5th form will redirect to other blank page, echoing the result (e.g "newses", "new_added", "exists"), not alerting the user as stated in the script (but the shopping cart function works properly).
What did I do wrong?
Try this
<?php foreach ($products as $vid):?>
<form id='cart' method='post' action='<?php echo base_url();?>cart/add'>
<input type='hidden' class='vid' name='vid' value='<?php echo $vid['id'];?>'/>
<div class="video_box">
<div class="video">
<a href="#<?php echo $vid['id'];?>" name='modal'>
<img src="<?php echo base_url(); ?>assets/images/<?php echo $vid['video_thumbnail'];?>" alt="<?php echo $vid['title'];?>" border="0" height='150' width='100' />
</a>
</div>
<div class="video_checkbox">
<?php if($this->session->userdata('nric')===FALSE ) {
echo "Please Login to Rent/Purchase"; } else { ?>
<input type='image' class='btn-add' src="<?php echo base_url(); ?>assets/images/rent_btn.png" alt="Rent" border="0" />
<?php } ?>
</div>
</form>
<?php endforeach;?>
Jquery
$(document).ready(function() {
$(".btn-add").click(function() {
var $this = $(this);
var $form = $this.parents('form');
var action = $form.attr('action');
var vid = $form.find('input.vid').val();
var form_data = {
vid : vid,
is_ajax : 1
};
$.ajax({
type : "POST",
url : action,
data : form_data,
success : function(response) {
if (response == 'exists') {
alert("This item is in your cart already! You can only add 1 same item once");
}
if (response == 'newses') {
alert("This item has been added succesfully!");
document.location.reload(true);
}
if (response == 'new_added') {
alert("This item has been added succesfully1!");
document.location.reload(true);
}
}
});
return false;
});
});
When i select Course in Course listbox automatically load Related Course levels in Course Level Listbox.
<script type="text/javascript" src="js/jquery.js"></script>
<div>Course:<select name="course_id" id="course_id" class="list_box">
<option name="" value="">Select</option>
<?php
$course_sql=mysql_query("select * from tbl_course_master");
while($course=mysql_fetch_array($course_sql))
{
?>
<option value="<?php echo $course['id'];?>" <?php if($item_fetch['course_id']==$course['id']) { echo "selected='selected'"; } ?> ><?php echo $course['course'];?></option>
<?php } ?>
</select>
</div>
<div> Course Level:
<select name="course_level_id" id="course_level_id" class="list_box">
<option name="" value="">Select</option>
<?php
$course_level_sql=mysql_query("select * from tbl_course_level where course_id='$_GET[course_id]'") or die(mysql_error());
while($course_level=mysql_fetch_array($course_level_sql))
{
?>
<option value="<?php echo $course_level['id'];?>" <?php if($item_fetch['course_level_id']==$course_level['id']) { echo "selected='selected'"; } ?> ><?php echo $course_level['level'];?></option>
<?php } ?>
</select>
</div>
Here the ajax code what iam using is
<script>
$("#course_id").live("change",function(){
var course_id=$(this).val();
//alert(course_id);
$.ajax({
url:"add-itemmaster.php",
type: 'GET',
data:{course_id: course_id},
success:function(data){
window.location.href=link;
}
}); // end ajax
});
</script>
Check this ajax code and let me know this is correct or not or add new ajax code
Please help me how to load selected Course in Course listbox automatically load Related Course levels in Course Level Listbox. Please help
Your ajax is correct. But instead of reloading page(window.location.href) in success add tag with respective values dynamically in success function itself.
I am assuming that you are fetching data in your function/file "add-itemmaster.php" and returning respective data
$.ajax({
url:"add-itemmaster.php",
type: 'GET',
data:{course_id: course_id},
success:function(data){
var item_fetch_id = $('#item_fetch_id').attr('rel');
for(var i in data) {
if(item_fetch_id == data[i].course_level_id) {
$('#course_level_id').append('<option value=' + data[i].course_level_id + ' selected>' + data[i].course_level + '</option>');
} else {
$('#course_level_id').append('<option value=' + data[i].course_level_id + '>' + data[i].course_level + '</option>');
}
}
}
});
Also you have to add one hidden element in your DOM with id as "item_fetch_id" to store item fetched course id
like this:
<input type="hidden" id="item_fetch_id" rel="<?php echo $item_fetch['course_id'];?>">