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>
I am making a live comment function. Here the problem is that when I am commenting the comment is successful but the data gets inserted as many times the form is present in the while loop. I think I should assign a separate status id (sts_id) to each form from table status and make changes in my ajax code so that it submits data only once rather than submitting as many times as the form is created in while loop. For example, since the form is in while loop and there are 6 status posts then when I comment on a status the comment gets inserted 6 times. Also one more problem is there i.e., commenting function is currently working only on the 1st form inside the while loop. On other forms, the form submission is not working i.e., its not submitting the comments. I think adding separate ids might solved this too. Please help.
HTML part
<script>
function ajaxFunction(){
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
}catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
$('.commentarea').keydown(function(event) {
var id = $(this).attr('id');
var status_id = id.replace("postcomment_", "");
if($.trim($("#postcomment_"+status_id).val())) {
if(event.keyCode == 13) {
event.preventDefault();
$("form#form_id_"+status_id).on('submit', function (e) {
e.preventDefault();
var comment = $('#postcomment_'+status_id).val();
var statsid = status_id;
var myData = {"comment": comment, "statsid": statsid};
$.ajax({
url: "post-comment.php",
type: "POST",
data: myData,
success: function (data, status, xhr) {
$(".showbox").html(data); // output result
$('#postcomment').val('');
}
});
});
}
}
});
}
</script>
<div class="stats-cont">
<?php
$get_sts = "SELECT * FROM status LEFT JOIN members ON status.sts_mem = members.mem_id ORDER BY sts_time DESC";
$get_stq = $pdo->prepare($get_sts);
$get_stq->execute();
while($get_stf = $get_stq->fetch()){ extract($get_stf);
$get_cmts = "SELECT * FROM comments WHERE cmt_status = :status ORDER BY cmt_id ASC";
$get_cmtq = $pdo->prepare($get_cmts);
$get_cmtq->bindValue(':status', $sts_id);
$get_cmtq->execute();
$total_cmts = $get_cmtq->rowCount();
?>
<div class="status-note-block status-container">
<div class="member-name-container">
<div class="mem-img-thumb">
<?php if($mem_image == null){ ?>
<img src="images/user.png" height="40" width="40">
<?php }else{ ?>
<img src="users/<?php echo $mem_image; ?>" height="40" width="40">
<?php } ?>
</div>
<div class="member-name"><?php echo $mem_name; ?><br>
<small>
<?php if((date("Y-m-d", strtotime($sts_time))) == $curr_date){ echo "Today"; }else if((date("Y-m-d", strtotime($sts_time))) == $yest){ echo "Yesterday"; }else{ echo date("jS F", strtotime($sts_time)); } ?>
<?php echo date("h:i a", strtotime($sts_time)); ?> </small> </div>
</div>
<div class="status-block"><?php echo $sts_status; ?></div>
</div>
<div class="comment-block">
<div class="comment-reaction-holder"></div>
<?php while($fetch_cmts = $get_cmtq->fetch()){ extract($fetch_cmts); ?>
<div class="comment-flex-holder">
<div class="comment-img-thumb">
<?php if($mem_image == null){ ?>
<img src="images/user.png" height="30" width="30">
<?php }else{ ?>
<img src="users/<?php echo $mem_image; ?>" height="30" width="30">
<?php } ?>
</div>
<div class="showbox"><font color="#5B5899" style="font-size: 12px"><b><?php echo $mem_name; ?></b></font> <?php echo $cmt_comment; ?><br />
<font style="font-size:12px">Like · Reply · Just now</font></div>
</div>
<br />
<?php } ?>
<div id="showbox"></div>
<div class="commet-field-holder">
<div class="comment-img-thumb">
<?php if($mem_image == null){ ?>
<img src="images/user.png" height="30" width="30">
<?php }else{ ?>
<img src="users/<?php echo $mem_image; ?>" height="30" width="30">
<?php } ?>
</div>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" id="form_id_<?php echo $sts_id?>">
<input type="hidden" name="status_id" value="<?php echo $sts_id; ?>" id="statsid_<?php echo $sts_id?>" />
<textarea name="comment" placeholder="Give a comment..." class="comment-field commentarea" id="postcomment_<?php echo $sts_id?>" onclick='ajaxFunction()'></textarea>
</form>
</div>
</div>
<?php } ?>
post-comment.php part:
<?php
//error_reporting(0);
include('config/db.php');
$time = date('Y-m-d H:i:s');
$content = (!empty($_POST['comment']))?$_POST['comment']:null;
$status_id = (!empty($_POST['statsid']))?$_POST['statsid']:null;
$insert = "INSERT INTO `comments`(`cmt_comment`,`cmt_status`, `cmt_time`)VALUES(:comment, :status, :time)";
$inserq = $pdo->prepare($insert);
$inserq->bindValue(':comment', $content);
$inserq->bindValue(':status', $status_id);
$inserq->bindValue(':time', $time);
$inserq->execute();
$lastid = $pdo->lastInsertId();
$sel = "SELECT * FROM comments
LEFT JOIN status ON comments.cmt_status = status.sts_id
LEFT JOIN members ON members.mem_id = status.sts_mem
WHERE comments.cmt_id = :lastid";
$seq = $pdo->prepare($sel);
$seq->bindValue(':lastid', $lastid);
$seq->execute();
$sef = $seq->fetch();
?>
<div class="comment-flex-holder">
<div class="comment-img-thumb">
<?php if($sef['mem_image'] == null){ ?>
<img src="images/user.png" height="30" width="30">
<?php }else{ ?>
<img src="users/<?php echo $sef['mem_image']; ?>" height="30" width="30">
<?php } ?>
</div>
<div class="showbox"><font color="#5B5899" style="font-size: 12px"><b><?php echo $sef['mem_name']; ?></b></font> <?php echo $sef['cmt_comment']; ?><br />
<font style="font-size:12px">Like · Reply · Just now</font></div>
</div>
<br />
Since, While Loop having n numbers of form. So, each form & input values will have different IDs. In your question, same ID is declared to each and every input. So, Multiple IDs with same name are not allowed. ID can't be same.
First, you need to change each and every input ID. More simple way, Append Status ID to each ID. It will automatically get changed.
If you want to use this answer, then you need to copy my answer as it is. Rather than, modifying in your code. Because, You may leave few lines and later on outcome will come as "Not Working". So, Try this Code. If any problem, Feel free to ask.
Updated Code
<script>
function ajaxFunction(){
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
}catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
$('.commentarea').keydown(function(event) {
var id = $(this).attr('id');
var status_id = id.replace("postcomment_", "");
if ($.trim($("#postcomment_"+status_id).val())) {
if (event.keyCode == 13) {
event.preventDefault();
$("form#form_id_"+status_id).on('submit', function (e) {
e.preventDefault();
var comment = $('#postcomment_'+status_id).val();
var statsid = status_id;
var myData = {"comment": comment, "statsid": statsid};
$.ajax({
url: "post-comment.php",
type: "POST",
data: myData,
success: function (data, status, xhr) {
$(".showbox").html(data); // output result
$('#postcomment').val();
}
});
});
}
}
});
}
</script>
<div class="stats-cont">
<?php
$get_sts = "SELECT * FROM status LEFT JOIN members ON status.sts_mem = members.mem_id ORDER BY sts_time DESC";
$get_stq = $pdo->prepare($get_sts);
$get_stq->execute();
while($get_stf = $get_stq->fetch()){ extract($get_stf);
$get_cmts = "SELECT * FROM comments WHERE cmt_status = :status ORDER BY cmt_id ASC";
$get_cmtq = $pdo->prepare($get_cmts);
$get_cmtq->bindValue(':status', $sts_id);
$get_cmtq->execute();
$total_cmts = $get_cmtq->rowCount();
$fetch_cmts = $get_cmtq->fetch();
?>
<div class="status-note-block status-container">
<div class="member-name-container">
<div class="mem-img-thumb">
<?php if($mem_image == null){ ?>
<img src="images/user.png" height="40" width="40">
<?php }else{ ?>
<img src="users/<?php echo $mem_image; ?>" height="40" width="40">
<?php } ?>
</div>
<div class="member-name"><?php echo $mem_name; ?><br>
<small>
<?php if((date("Y-m-d", strtotime($sts_time))) == $curr_date){ echo "Today"; }else if((date("Y-m-d", strtotime($sts_time))) == $yest){ echo "Yesterday"; }else{ echo date("jS F", strtotime($sts_time)); } ?>
<?php echo date("h:i a", strtotime($sts_time)); ?> </small> </div>
</div>
<div class="status-block"><?php echo $sts_status; ?></div>
</div>
<div class="comment-block">
<div class="comment-reaction-holder"></div>
<div class="commet-field-holder">
<div class="comment-img-thumb">
<?php if($mem_image == null){ ?>
<img src="images/user.png" height="30" width="30">
<?php }else{ ?>
<img src="users/<?php echo $mem_image; ?>" height="30" width="30">
<?php } ?>
</div>
<div class="showbox"></div>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" id="form_id_<?=$sts_id?>">
<input type="hidden" name="status_id" value="<?php echo $sts_id; ?>" id="statsid_<?=$sts_id?>" />
<textarea name="comment" placeholder="Give a comment..." class="comment-field commentarea" id="postcomment_<?=$sts_id?>" onclick='ajaxFunction()'></textarea>
</form>
</div>
</div>
<?php } ?>
Edit 1
<script>
function ajaxFunction(){
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
}catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
$('.commentarea').keydown(function(event) {
var id = $(this).attr('id');
var status_id = id.replace("postcomment_", "");
if ($.trim($("#postcomment_"+status_id).val())) {
if (event.keyCode == 13) {
event.preventDefault();
postcomment(status_id);
}
}
});
function postcomment(status_id){
var comment = $('#postcomment_'+status_id).val();
var statsid = status_id;
var myData = {"comment": comment, "statsid": statsid};
$.ajax({
url: "post-comment.php",
type: "POST",
data: myData,
success: function (data, status, xhr) {
$(".showbox").html(data); // output result
$('#postcomment').val();
}
});
}
}
</script>
to maintain uniqueness in comment box you should use counter. that will create dynamic name and id. same you need to fetch in ajax call $(this).attr('data-counter')
you can check below code and set according to your need.
<script>
function ajaxFunction(){
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
}catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
$('.postcomment').keydown(function(event) {
if($.trim($(".postcomment").val())) {
if(event.keyCode == 13) {
event.preventDefault();
$("form.cmtform").submit();
}
}
});
$("form.cmtform").on('submit', function(e) {
e.preventDefault();
var counter_val = $(this).attr('data-counter');
var comment = $('#postcomment_' + counter_val).val();
var statsid = $('#statsid_' + counter_val).val();
var myData={"comment":comment, "statsid":statsid};
$.ajax({
url : "post-comment.php",
type: "POST",
data : myData,
success: function(data,status,xhr){
$(".showbox").html(data); // output result
$('#postcomment_' + counter_val).val();
}
});
});
}
</script>
<div class="stats-cont">
<?php
$get_sts = "SELECT * FROM status LEFT JOIN members ON status.sts_mem = members.mem_id ORDER BY sts_time DESC";
$get_stq = $pdo->prepare($get_sts);
$get_stq->execute();
$counter = 1;
while($get_stf = $get_stq->fetch()){ extract($get_stf);
$get_cmts = "SELECT * FROM comments WHERE cmt_status = :status ORDER BY cmt_id ASC";
$get_cmtq = $pdo->prepare($get_cmts);
$get_cmtq->bindValue(':status', $sts_id);
$get_cmtq->execute();
$total_cmts = $get_cmtq->rowCount();
$fetch_cmts = $get_cmtq->fetch();
?>
<div class="status-note-block status-container">
<div class="member-name-container">
<div class="mem-img-thumb">
<?php if($mem_image == null){ ?>
<img src="images/user.png" height="40" width="40">
<?php }else{ ?>
<img src="users/<?php echo $mem_image; ?>" height="40" width="40">
<?php } ?>
</div>
<div class="member-name"><?php echo $mem_name; ?><br>
<small>
<?php if((date("Y-m-d", strtotime($sts_time))) == $curr_date){ echo "Today"; }else if((date("Y-m-d", strtotime($sts_time))) == $yest){ echo "Yesterday"; }else{ echo date("jS F", strtotime($sts_time)); } ?>
<?php echo date("h:i a", strtotime($sts_time)); ?> </small> </div>
</div>
<div class="status-block"><?php echo $sts_status; ?></div>
</div>
<div class="comment-block">
<div class="comment-reaction-holder"></div>
<div class="commet-field-holder">
<div class="comment-img-thumb">
<?php if($mem_image == null){ ?>
<img src="images/user.png" height="30" width="30">
<?php }else{ ?>
<img src="users/<?php echo $mem_image; ?>" height="30" width="30">
<?php } ?>
</div>
<div class="showbox"></div>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" data-counter="<?php echo $counter;?>">
<input type="hidden" name="status_id_<?php echo $counter;?>" value="<?php echo $sts_id; ?>" id="statsid_<?php echo $counter;?>" />
<textarea name="comment_<?php echo $counter;?>" placeholder="Give a comment..." class="postcomment comment-field commentarea" id="postcomment_<?php echo $counter;?>" onclick='ajaxFunction()'></textarea>
</form>
</div>
</div>
<?php
$counter++;
}
?>
Cheers !!
I can't seem to figure out why my status doesn't change. I am trying to get my chat activation button to work on click, and send a post request to a specified url via jQuery. Can I even do that without using an actual form or sth??
jQuery:
$(".model_chat_button").css('cursor', 'pointer').click(function() {
var model_id = $(this).parent().attr('id').split('model_')[1];
var active = 1;
if ($(this).attr('rel') == '1')
{
active = 0;
$(this).attr('rel', '0');
$(this).find("img").attr('src', $(this).find("img").attr('src').replace('chat_active', 'chat_inactive'));
}
else
{
$(this).attr('rel', '1');
$(this).find("img").attr('src', $(this).find("img").attr('src').replace('chat_inactive', 'chat_active'));
}
$.post(base_url + lang + '/chats/activateModel',{model_id: model_id, active: active});
});
In my controller chats.php:
public function activateModel()
{
if ($this->session->userdata('is_admin') && $this->input->post('model_id'))
{
$model = new Model($this->input->post('model_id'));
$model->chat_active = $this->input->post('active')? 1 : 0;
$model->save();
}
}
And my view:
<div id="<?php echo $model->id; ?>">
<div class="model_chat_button" rel="<?php echo $model->chat_active? 1 : 0;?>">
<?php if ($model->chat_active): ?>
<?php if (! $this->session->userdata('is_admin')): ?>
<a href="<?php echo site_url(); ?>/chat/<?php echo $model->id; ?>" title="<?php echo $this->lang->line('chat_with'); ?> <?php echo $model->name; ?>">
<?php endif; ?>
<img src="<?php echo base_url(); ?>assets/images/design/button_chat_active.png" alt="Chat" />
<?php if (! $this->session->userdata('is_admin')): ?>
</a>
<?php endif; ?>
<?php else: ?>
<img src="<?php echo base_url(); ?>assets/images/design/button_chat_inactive.png" alt="Chat" />
<?php endif; ?>
</div>
</div>
So from what I can tell from the network tab, it does send a post request to the chats/activateModel URL, but the model ID is not added. What am I missing here?
Below is the javascript part and load more button which I am using to load more posts from database it works fine I want to show a 'no more posts' message when all posts have been loaded but do not know how to do that exactly. Hope you guys can help.
<script>
$(document).ready(function(){
$(document).on('click','.show_more',function(){
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'mload_more.php',
data:'id='+ID,
success:function(html){
$('#show_more_main'+ID).remove();
$('.posts').append(html);
}
});
});
});
</script>
<div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
<span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">
Show more
</span>
<span class="loding" style="display: none;">
<span class="loding_txt">Loading...</span>
</span>
</div>
Within mload_more.php file check the number of returned rows greater than zero. It would be as following code.
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
//display data
}
} else {
echo "No more posts to load";
}
Gayan just gave me a start and rest was not much difficult.
<?php
if ($query->rowCount() > 0) {
while($row = $result->fetch_assoc()) {
}
}
else {
echo $er = "No more posts to load";
}
?>
<script type="text/javascript">
var er = "<?php echo $er; ?>";
if(er!=''){
$("er").show();
$('.show_more').hide();
}
</script>
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>