I am fetching image with "id"(dynamic) and i want to delete image using ajax, Image is deleted successfully but unable to hide (div) dynamically (which i deleted)
Here is my html code
<?php
$banner=$store->banner;
if(!empty($banner))
{
$ban = explode(',', $banner);
$i="1";
foreach($ban as $key => $img)
{
$img;
$info=$img;
?>
<input type="hidden" id="id" name="id" value="<?php echo $store->id; ?>">
<input type="hidden" id="imgname" name="imgname" value="<?php echo $img; ?>">
<div class="form-group" id="<?php echo $key; ?>"> <!-- Creating div with id (dynamic) -->
<label for="status">image <?php ?></label>
<img src="<?php echo base_url(); ?>/<?php echo $img; ?>" width="80" height="80">
<a class="btn-sm btn-danger text-light" onclick="deleteFun(<?php echo $key; ?>)" href="#"> Delete</a>
</div>
<?php
$i++;
}
}
?>
Here is my ajax function,I just want to hide div(which i select/deleted),How can i do this ?
<script type="text/javascript">
function deleteFun(ImgId)
{
if (confirm("Are you sure you want to delete this banner ?")) {
var imgname = $('#imgname').val();
var id = $('#id').val();
$.ajax({
type: "POST",
url: "<?php echo base_url('upload_controller/deleteImage'); ?>",
data: {'id': id,'imgname':imgname,'ImgId':ImgId},
success: function(data){
$("#ImgId").remove();
console.log(data);
}
});
}
}
</script>
In your JS, you have to specify DIV id as a concatenated value to target the specific id as the id you are taking is coming in to the function as an argument.
<script type="text/javascript">
function deleteFun(ImgId)
{
if (confirm("Are you sure you want to delete this banner ?")) {
var imgname = $('#imgname').val();
var id = $('#id').val();
$.ajax({
type: "POST",
url: "<?php echo base_url('upload_controller/deleteImage'); ?>",
data: {'id': id,'imgname':imgname,'ImgId':ImgId},
success: function(data){
$("#" +ImgId).hide();
console.log(data);
}
});
}
}
</script>
Related
I dont know why i am facing this error."Edited_20170329100333" is the value which is the name of the image(getting from database and displaying). I am having gallery placed in which when user selects it should show preview. For this i am having ajax response and its datatype is json because i am fetching from database using codeignitor.when i do like this <img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" class="img-responsive"></img> shows fit small image but my picture goes larger when i place <a href=""> which i dont knw why?
I am getting everything correct from controller but i dont understand why javascript is giving error. Here is my code:
Controller Gallery.php
function inspection_gallery()
{
$this->data['navigation_link'] = 'Inspection Gallery';
$templateId=$this->input->post('gt');
// var_dump($templateId);
$this->data['frominspection'] = $this->template_model->getAllInspections();
$swt=$this->data['inspection_images']=$this->template_model->getAllInspectionsImages($templateId);
echo json_encode($swt,true);
// $this->load->view('Gallery/index', $this->data);
}
View:index.php
<select class="form-control input-md" onclick="galleryselectetemplate()" id="templategallery" name="template_opt" >
<?php
if($frominspection ==''){?>
<option value="">Select...</option>
<?}else{?>
<?php
foreach($frominspection as $temp){?>
<option value="<?=$temp->ca_id?>"><?=$temp->name?></option>
<?php }?>
<?}?>
</select>
<div class="col-xs-12 col-sm-12 col-md-12 img" id="img">
<?php if($inspection_images !='')
{ foreach($inspection_images as $img){?>
<a onclick="viewImage('<?php echo $img->attachment_saved_name; ?>')" title="<?php echo $img->attachment_original_name; ?>" href="javascript:;">
<img src="<?php echo base_url();?>uploads/inspection/<?php echo $img->attachment_saved_name; ?>" alt="<?php echo $img->attachment_original_name; ?>" width="300" height="200" class="img-responsive"></img>
</a>
<div class="desc"><?php echo $img->attachment_name.' ('.$img->column_name.')'; ?></div>
<?php }} ?>
</div>
And script:
<script>
function galleryselectetemplate()
{
var c = $('#gallery option:selected').val();
var gt = $('#templategallery option:selected').val();
// alert(gt);
$.ajax({
cache: false,
dataType:'json',
type: 'POST',
url: site_url+'Gallery/inspection_gallery',
data: {client:c,gt:gt},
success: function(resp)
{
var json_arr = JSON.parse(JSON.stringify(resp));
if(json_arr != null)
{
$('#img').empty();
for(var ind = 0;ind < json_arr.length;ind++)
{
/* $('#img').append('<img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" class="img-responsive"></img>');*///shows fit smaller image
$('#img').append('<a onclick="viewImage('+json_arr[ind]['attachment_saved_name']+')" title="'+json_arr[ind]['attachment_original_name']+'" href="javascript:;"><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" width="300" height="200" class="img-responsive"></img></a>');//showing very larger img and i dont know y it is not getting in viewImage?
}
}
}
});
// var ins= $("#inspectionid").val();
// alert(c);
// alert(gt);
// alert(ins);
}
function viewImage(img)
{
alert(img); // not showing Edited_20170329100333
var img='<?php echo base_url();?>uploads/inspection/'+img;
$('#imageShow').html('<img src="'+img+'" alt="Image Not Available" style="width:100%;">');
$('#btnmodalopen').trigger('click');
}
</script>
Error from console:
Uncaught ReferenceError: Edited_20170329100333 is not defined
at HTMLAnchorElement.onclick (Gallery:1)
kindly help.......
I just want to toggle html button content(activate or deactivate) on click of button...now if button content is activate it changes this to deactivate....but not vice-versa... please have look on ajax code:
<button type="button" class="btn btn-success btn-sm" id="<?php echo $row->id; ?>" onclick="savestatus<?php echo $row->id; ?>(<?php echo $row->id; ?>)">Activate</button>
and my script is
<script>
function savestatus<?php echo $row->id; ?>(row_id){
$.ajax({
type: "POST",
url: "<?php echo base_url().'home/activate_buyer/'. $row->id; ?>",
data:{},
success:function( data )
{
$("#"+row_id).html("Deactivate");
}
});
}
</script>
please help...
Use text method to change the text of the button
$("#"+row_id).text("Deactivate");
EDIT
i want if text is activate then onclick it becomes deactivate and
vice-versa
$('.button').click(function(event){
$(this).text().trim()==="Active"?$(this).text("Deactive"):$(this).text("Active")
})
JSFIDDLE
Try this bro
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<?php
$row= 5;
?>
<button type="button" class="btn btn-success btn-sm" id="<?php echo $row; ?>" onclick="savestatus(this)">Activate</button>
<script>
function savestatus(ele) {
var id = ele.id;
$.ajax({
type: "POST",
url: "<?php 'http://localhost/testGuzzle/jsOnChange2.php'; ?>",
data:{
test: id,
},
success:function( data )
{
$("#"+id).html("Deactivate");
}
});
}
</script>
</body>
</html>
Change your url at script.
My result
I have a like and dislike system in a page, like and dislike works only on the first page but not on others post. Here is what I have tried
This is how I fetch information
Here is the php part
Like.php
if(isset($_POST['id'])){
$send = mysqli_query($connecDB, "UPDATE portfolio SET `like`='$view' WHERE `id`='$id'"); }
Javascript part
<script type="text/javascript">
$(".btn-success").click(function() {
var id = $('#id').val();
$.ajax({
type : "POST",
url : "ajax/like.php",
data: "id=" + id,
success: function(data) {
$('#result').html(data);
}
});
});
</script>
Here is the HTML part
$sql = "SELECT * FROM post ORDER BY id DESC LIMIT 10";
$result = mysqli_query($connecDB, $sql);
while($rowsmall = mysqli_fetch_array($result)){
<button class="btn btn-success btn-stroke" id="result"><?php echo $rowsmall['like']; ?> <i class="fa fa-thumbs-o-up fa-lg"></i> </button>
<input type="hidden" name="id" id="id" value="<?php echo $rowsmall['id']; ?>"> <?php } ?>
The problem I'm facing is that the javascript is again and again sending same hidden id.
In HTML id attribute must has an unique value in whole page and this line (var id = $('#id').val();) always return id of first post, use dataattributes to simply access post id, just like this
PHP
<?php $sql = "SELECT * FROM post ORDER BY id DESC LIMIT 10";
$result = mysqli_query($connecDB, $sql);
while($rowsmall = mysqli_fetch_array($result)){
<button class="btn btn-success btn-stroke" data-id="<?php echo $rowsmall['id']; ?>" >
<?php echo $rowsmall['like']; ?> <i class="fa fa-thumbs-o-up fa-lg"></i>
</button>
<input type="hidden" name="id" value="<?php echo $rowsmall['id']; ?>">
<?php } ?>
JavaScript
<script type="text/javascript">
$(".btn-success").click(function() {
var id = $(this).data('id'); // get data-id atrribute
var element = this;
$.ajax({
type : "POST",
url : "ajax/like.php",
data: "id=" + id,
success: function(data) {
$(element).html(data);
}
});
});
</script>
I can not select the element and change the content within it
here is my html
<div class="like_user_wrapper" id="<?php echo $post_id.'like_user_wrapper' ;?> ">
hello, world
</div>
<span class="post_bottom_bar">
<img class="thumb_icon" onmouseover="
var post_id=<?php echo $post_id ?>;
$.ajax({
url:'ajax_like_user.php',
method:'post',
data:{post_id:post_id},
success:function(data){
$('<?php echo '#'.$post_id.'like_user_wrapper' ?>' ).html('hello');
}
})
" >
I can not change it into hello, when my have my mouse over the icon
You have an extra space in the id=" " part. Change it to:
id="<?php echo $post_id.'like_user_wrapper' ;?>">
Notice the space after ;?> is removed.
you can do so:
<img class="thumb_icon" />
<script>
$(".thumb_icon").mouseover(function(){
var post_id=<?php echo $post_id ?>;
$.ajax({
url:'ajax_like_user.php',
method:'post',
data:{post_id:post_id},
success:function(data){
$('<?php echo '#'.$post_id.'like_user_wrapper' ?>' ).html('hello');
}
})
})
</script>
or
<img class="thumb_icon" onmouseover="mouseoverImg();" />
<script>
function mouseoverImg(){
var post_id=<?php echo $post_id ?>;
$.ajax({
url:'ajax_like_user.php',
method:'post',
data:{post_id:post_id},
success:function(data){
$('<?php echo '#'.$post_id.'like_user_wrapper' ?>' ).html('hello');
}
})
}
</script>
I think that you need to do something like this:
HTML:
<div class="like_user_wrapper" id="<?php echo $post_id.'like_user_wrapper';?>">
hello, world
</div>
<span class="post_bottom_bar">
<img class="thumb_icon" id="<?php echo $post_id;?>" >
</span>
Javascript:
$(document).ready(function(){
$('.thumb_icon').mouseover(function(){
var post_id = $(this).attr("id");
$.ajax({
url:'ajax_like_user.php',
method:'post',
data:{post_id:post_id},
success:function(data){
$('#' + post_id + 'like_user_wrapper').html('hello');
}
});
});
});
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;
});
});