I'm working on a chat box and it's working fine but when we enter the text message and sent it after the message is sent it won't clear automatically. It will remain there even after posting the text, we need to clear it manually.
I have tried to change some code but couldn't solve the issue.
Code which I'm using in this.
<div class="row">
<div class="pull-left">
<h3><?php echo sprintf($this->lang->line("conv_with"), $user["username"]); ?></h3>
</div>
</div>
<div class="row">
<div class="main_container clearfix">
<div class="ibox-content-no-bg">
<div class="chat-discussion">
<?php
$last_conv = $last_conv->result_array();
$last_conv = array_reverse($last_conv);
foreach($last_conv as $message):
$activity_thumb = $message["thumb_url"];
if($message["thumb_url"] == "" || $message["photostatus"] == 0) {
$activity_thumb = base_url() . "images/avatar.png";
}
?>
<?php
if($message["user_id"] == $this->session->userdata("user_id"))
$align_message = "left";
else
$align_message = "right";
?>
<div class="chat-message clearfix <?php echo $align_message; ?>" data-id="<?php echo $message["id"]; ?>">
<?php
if($message["gender"] == 0) {
$gender_user_color = "male_color";
} else {
$gender_user_color = "female_color";
}
?>
<a class="nailthumb-msg-container" href="<?php echo base_url("user/profile/".$message["user_id"]) ?>"><img width="62" alt="" src="<?php echo $activity_thumb; ?>" class="message-avatar"></a>
<div class="message">
<a class="message-author <?php echo $gender_user_color; ?>" href="<?php echo base_url("user/profile/".$message["user_id"]) ?>"><?php echo $message["username"] ?></a>
<span class="message-date text-muted pm-date" title="<?php echo $message["date"]; ?>Z"></span>
<span class="message-content">
<?php echo $message["content"]; ?>
</span>
<span class="message-date-mob text-muted pm-date" title="<?php echo $message["date"]; ?>Z"></span>
</div>
</div>
<?php
endforeach;
?>
</div>
<div class="chat-message-form">
<div class="form-group">
<p class="lead emoji-picker-container">
<textarea id="pm-write" class="form-control message-input pm-write-answer-textarea" placeholder="<?php echo $this->lang->line("enter_message_here_placeholder"); ?>" name="message" data-emojiable="true"></textarea>
</p>
</div>
<div class="btn-reply-placeholder">
<a class="btn btn-primary btn-send-reply" href="#" data-user-id="<?php echo $user["uid"]; ?>" data-conv-id="<?php echo $current_conv->id; ?>"><?php echo $this->lang->line("send_reply_btn"); ?></a>
</div>
</div>
</div>
</div>
</div>
AJAX
$(document).ready(function() {
$('.nailthumb-msg-container').nailthumb();
$(".pm-date").timeago();
$(".message").emoticonize();
$(".chat-discussion").scrollTop(100000);
window.setInterval(function(){
var last_message_id = $(".chat-message:last").attr("data-id");
// Live refresh
$.ajax({
url: base_url + "pm/refresh_conv",
type: 'POST',
data: {conv_id : conv_id, last_message_id: last_message_id},
success: function(data) {
$.each(data.last_messages, function(i, item) {
var message = item;
var avatar = "";
if(message.thumb_url == null || message.photostatus == 0) {
avatar = base_url + "images/avatar.png";
} else {
avatar = base_url + message.thumb_url;
}
if(message.gender == 0) {
var gender_user_color = "male_color";
} else {
var gender_user_color = "female_color";
}
if(message.user_id == user_id) {
var msg_dir = "left";
} else {
var msg_dir = "right";
}
var block_msg = '<div class="chat-message ' + msg_dir + '" data-id="' + message.mid + '">';
block_msg += '<a class="nailthumb-msg-container" href="' + base_url + 'user/profile/' + message.user_id + '"><img width="62" alt="" src="' + avatar + '" class="message-avatar" /></a>';
block_msg += '<div class="message">';
block_msg += '<a class="message-author ' + gender_user_color + '" href="' + base_url + 'user/profile/' + message.user_id + '">' + message.username + '</a>';
block_msg += '<span class="message-date text-muted pm-date" title="' + message.date + 'Z"></span>';
block_msg += '<span class="message-content">';
block_msg += message.content;
block_msg += '</span>';
block_msg += '</div>';
block_msg += '</div>';
$(".chat-message").last().after(block_msg);
$('.nailthumb-msg-container').nailthumb();
$(".pm-date").timeago();
$(".message").emoticonize();
$(".chat-discussion").scrollTop(100000);
});
}
});
}, 2000);
$(".btn-send-reply").click(function(e) {
e.preventDefault();
$(':input[name="pmwrite"]').val(null);
var conv_id = $(this).attr("data-conv-id");
var user_id = $(this).attr("data-user-id");
var content = $(".emoji-wysiwyg-editor").html();
$(this).html('<i class="fa fa-circle-o-notch fa-spin"></i>');
$(this).addClass("disabled");
var that = $(this);
$.ajax({
url: base_url + "pm/send_reply",
type: 'POST',
data: {conv_id : conv_id, content: content, user_id : user_id},
success: function(data) {
var res = data.result;
if(res == 999) {
alert(not_logged_in_str);
that.html(send_reply_str);
that.removeClass("disabled");
} else if(res == 998) {
alert(write_something_str);
that.html(send_reply_str);
that.removeClass("disabled");
} else if(res == 500) {
alert(cant_demo_mode_str);
that.html(send_reply_str);
that.removeClass("disabled");
} else if(res == 997) {
alert(conv_not_exist_str);
that.html(send_reply_str);
that.removeClass("disabled");
} else if(res == 996) {
alert(user_blocked_you_str);
that.html(send_reply_str);
that.removeClass("disabled");
} else {
var avatar = "";
if(data.user.thumb_url == null || data.user.photostatus == 0) {
avatar = base_url + "images/avatar.png";
} else {
avatar = base_url + data.user.thumb_url;
}
$(".pm-write-answer-textarea").val("");
if(data.user["gender"] == 0) {
var gender_user_color = "male_color";
} else {
var gender_user_color = "female_color";
}
$('.nailthumb-msg-container').nailthumb();
$(".pm-date").timeago();
that.html(send_reply_str);
that.removeClass("disabled");
$(".chat-discussion").scrollTop(100000);
}
}
});
});
String.prototype.replaceArray = function(find, replace) {
var replaceString = this;
for (var i = 0; i < find.length; i++) {
replaceString = replaceString.replace(find[i], replace[i]);
}
return replaceString;
};
});
I expect the textarea to be cleared after someone send t the message but actual is the text will remain in textarea even after the message is sent.
I assume that this $(".emoji-wysiwyg-editor") is your element for your content. since this is the one you called in
var content = $(".emoji-wysiwyg-editor").html();
Try clearing this element after success by using this code since you're using a jquery here.
$(".emoji-wysiwyg-editor").html('');
Just add this line at the start of your AJAX success() function
$('#pm-write').empty();
Using pure Javascript
document.getElementById('pm-write').innerHTML = "";
It would look like this
$.ajax({
url: base_url + "pm/send_reply",
type: 'POST',
data: {conv_id : conv_id, content: content, user_id : user_id},
success: function(data) {
var res = data.result;
$('#pm-write').empty(); //Clean the textarea
//Other code
}
});
Using javascript, you can easily achieve this by setting an event listener on the text-area like this
document.addEventListener("DOMContentLoaded", function() {
var submitBtn = document.getElementsByClassName("btn-send-reply")[0];
submitBtn.addEventListener("click", function(){
document.getElementsByName("message")[0].value = "";
});
});
or in jQuery
$(document).ready(function(){
$('.btn-send-reply').click(function(){
$( "input[name*='message']" ).val("");
})
})
Related
I have a loop in php and I'm using a js function onclick to get the id from the php loop. I do loop in js to recognize a php dynamic id, but it recognizes the wrong order of the loop item.
Sample php code:
$list = 1;
for ($i = 0; $i < 7; $i++ ){
$listNo = $list;
$list++;
$html .= "<div class='row l'>";
$html .= " <div class='col-xl-3 col-lg-8 col-6'>
<input name=']' id='dm_slider_img_url_$listNo' type='text' value='" . $dm_slides[++$counter] . "'/>
<button class='set_custom_images' id='meta-image-button-$listNo'>
<span class='dashicons dashicons-plus-alt'></span>
</button>
</div>
<div class='col-xl-1 col-lg-4 col-6 mr-auto'>
<img id='dm_slider_img_preview_$listNo' src='" . $dm_slides[$counter++] . "' name=''>
</div>";
$html .= "</div>";
}
Sample js code:
var send_attachment_bkp = wp.media.editor.send.attachment;
for (let ids=1; ids<8; ids++) {
if ($('#meta-image-button-'+ids).length > 0) {
if ( typeof wp !== 'undefined' && wp.media && wp.media.editor) {
$(document).on('click', '.set_custom_images', function(e) {
e.preventDefault();
var button = $(this);
var id = button.prev();
wp.media.editor.send.attachment = function(props, attachment) {
$('#dm_slider_img_url_'+ids).val(attachment.url);
$('#dm_slider_img_preview_'+ids).attr('src',attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
};
wp.media.editor.open(button);
return false;
});
}
}
}
What am I doing wrong?
After looking other questions related to getting id, I figured it out. After calling click function using button class, I stored it as variable and added this variable.
$(document).ready(function() {
var $ = jQuery;
// var ids = 1;
// $(«.set_custom_images»).onclick = function(t) {t.attr(«id»)}
var send_attachment_bkp = wp.media.editor.send.attachment;
if ($("[id^='meta-image-button-']" ).length > 0) {
if ( typeof wp !== 'undefined' && wp.media && wp.media.editor) {
$(document).on('click', '.set_custom_images', function(e) {
var clickedID = this.id;
e.preventDefault();
var button = $(this);
var id = button.prev();
wp.media.editor.send.attachment = function(props, attachment) {
$('#dm_slider_img_url_'+clickedID).val(attachment.url);
$('#dm_slider_img_preview_'+clickedID).attr('src',attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
};
wp.media.editor.open(button);
return false;
});
}
}
});
And in php make some changes
$list = 1;
for ($i = 0; $i < 7; $i++ ){
$listNo = $list;
$list++;
$html .= "<div class='row l'>";
$html .= " <div class='col-xl-3 col-lg-8 col-6'>
<input name='' id='dm_slider_img_url_m_$listNo' type='text' value='" . $dm_slides[++$counter] . "'/>
<button class='set_custom_images' id='m_$listNo'>
<span class='dashicons dashicons-plus-alt'></span>
</button>
</div>
<div class='col-xl-1 col-lg-4 col-6 mr-auto'>
<img id='dm_slider_img_preview_m_$listNo' src='" . $dm_slides[$counter++] . "' name=''>
</div>";
$html .= "</div>";
}
I hope this will help for someone who searches solution like this
Hello guys and first of all sorry for my bad english. I just need some help for one script how i can make this script to load more data after scroll when they coming they can see only 5-10 result and when they scroll down will get more.
I will share the code that is being asked and where I need to do it
user_list.php
<?php
$rank_ico = 0;
$sex_ico = 0;
function ico($r, $o){
if($o == 1){
if($r == 1 ){ return '<i class="u_ico fa fa-user" style="font-size:18px;"></i>'; }
else if($r == 2){ return '<i class="v_ico fa fa-heart" style="font-size:16px;"></i>'; }
else if($r == 3){ return '<img src="../images/police-badge.png" class="m_ico" title="Полицай" />'; }
else if($r == 4){ return '<i class="a_ico fa fa-star" style="font-size:17px;"></i>'; }
else if($r == 5){ return '<i class="sa_ico fa fa-star" style="font-size:17px;"></i>'; }
else { return ''; }
}
else {
return '';
}
}
function sex($s, $g){
if($g == 1){
if($s == 1){ return "<img src='/css/themes/Fancy_gold/icon/male-icon.png' width='20' height='20' class='boy' />"; }
else if ($s == 2){ return "<img src='/css/themes/Fancy_gold/icon/female-icon.png' width='20' height='20' class='girl' />"; }
else { return ''; }
}
else {
return '';
}
}
$load_data = 'setting.allow_avatar, setting.allow_private, setting.allow_theme, setting.default_theme, setting.language,
setting.timezone, setting.allow_ignore, setting.allow_friend, setting.ico, users.user_access, users.user_rank, users.user_roomid,
users.user_name, users.user_theme, users.guest';
require("config1.php");
if($data['ico'] == 1){
$rank_ico = 1;
$sex_ico = 1;
}
if($data["user_access"] >= 1 && $access == 'on'){
$data_list = $mysqli->query("SELECT user_name, user_color, user_rank, alt_name, user_tumb, user_status, user_access, user_sex FROM `users` WHERE `user_roomid` = {$data["user_roomid"]} AND `user_status` <= 2 AND `user_access` != 2 AND `user_access` != 0 ORDER BY `user_status` ASC, `user_rank` DESC, `user_name` ASC ");
if ($data_list->num_rows > 0)
{
echo "<div id=\"container_user\">";
echo "<ul>";
while ($list = $data_list->fetch_assoc())
{
if($list["alt_name"] == ""){
$alt = "$notsetyet";
}
else{
$alt = $list["alt_name"];
}
$uavatar = $list['user_tumb'];
if($uavatar == "default_avatar_tumb.png" || $list['user_rank'] < $data['allow_avatar']){
$avatar_path = "$icon_path";
$uavatar = "default_avatar_tumb.png";
}
else {
$avatar_path = "avatar";
}
$avatar = "<img class=\"avatar_userlist\" src=\"$avatar_path/$uavatar\"/>";
if($list['user_status'] == 1){
$away = $list['user_color'];
}
else {
$away = "away";
}
if($list['user_access'] == 1){
echo '<li class="users_option">
<div class="open_user hover_element sub_element">
' . $avatar . '<p title="' . $alt . '" class="' . $away . ' usertarget" id="' . $list[user_name] . '"><s>' .$list["user_name"] . '</s></p>
</div>
<div class="option_list">
<ul class="user_option_list" value="' . $list[user_name] . '">';
echo "<li class=\"user_option_separator get_info\" value=\"get_info\">$usinfo</li>";
if($list['user_name'] !== $data['user_name']){
if($data['user_rank'] >= 3){
echo "<li class=\"user_option_separator get_unmute\" value=\"get_unmute\">$usunmute</li>";
}
if($data['user_rank'] > 4){
echo "<li class=\"user_option_separator get_kill\" value=\"get_kill\">$usdelete</li>";
}
}
echo "</ul>
</div>
</li>";
}
else {
echo "<li class=\"users_option\">
<div class=\"open_user hover_element sub_element\">
$avatar<p title=\"$alt\" class=\"$away usertarget\" id=\"{$list["user_name"]}\">{$list["user_name"]} " . ico($list['user_rank'], $rank_ico) . sex($list['user_sex'], $sex_ico) . "</p>
</div>
<div class=\"option_list\">
<ul class=\"user_option_list\" value=\"{$list["user_name"]}\">";
echo "<li class=\"user_option_separator get_info\" value=\"get_info\">$usinfo</li>";
if($list['user_name'] !== $data['user_name']){
if($list['user_rank'] >= $data['allow_private'] && $data['user_rank'] >= $data['allow_private']){
echo "<li class=\"user_option_separator send_private\" value=\"{$list['user_name']}\">$usprivate</li>";
}
if( $list['user_rank'] < 3 && $data['guest'] != 1 && $data['user_rank'] >= $data['allow_ignore']){
echo "<li class=\"user_option_separator get_ignore\" value=\"get_ignore\">$usignore</li>";
}
if( $data['guest'] != 1 && $data['user_rank'] >= $data['allow_friend']){
echo "<li class=\"user_option_separator get_friends\" value=\"get_friends\">$usfriends</li>";
}
if($data['user_rank'] >= 3){
echo "<li class=\"user_option_separator get_mute\" value=\"get_mute\">$usmute</li>";
echo "<li class=\"user_option_separator get_kick\" value=\"get_kick\">$uskick</li>";
}
if($data['user_rank'] > 3){
echo "<li class=\"user_option_separator get_ban\" value=\"get_ban\">$usban</li>";
}
if($data['user_rank'] > 4){
echo "<li class=\"user_option_separator get_kill\" value=\"get_kill\">$usdelete</li>";
}
}
echo "</ul>
</div>
</li>";
}
}
echo "</ul><div class=\"clear\"></div></div>";
}
}
else {
echo "<ul>
<li>Room empty</li>
</ul>";
}
function.js
user_reload = function()
{
if(firstLoad == 1 && width > 1024){
$('#chat_panel').animate({right:"+="+optionSize},400);
dataControl = "1";
$.ajax({
url: "system/user_list.php",
cache: false,
success: function(html){
$("#chat_panel .panel_element").html(html);
},
});
firstLoad = "0";
}
else if (dataControl != 1){
return false;
}
else if ($('.option_list:visible').length){
return false;
}
$.ajax({
url: "system/user_list.php",
cache: false,
success: function(html){
$("#chat_panel .panel_element").html(html);
},
});
}
I am trying to call ajax function in another function but as i have created a loop the same value gets passed again and again evertime the loop calls
let me show you my code
$(window).load(function(e) {
// grab the scroll amount and the window height
loadmore();
select_likes();
select_share();
// get_recieve_friend_requests();
// get_sent_friend_requests();
});
function loadmore() {
var lastID = $('.load-more').attr('lastID');
// alert(lastID);
jQuery.ajax({
type: 'POST',
url: '<?php echo base_url("user/get_all_post"); ?>',
data: {
id: lastID
},
dataType: 'json',
beforeSend: function(data) {
$('.load-more').show();
},
success: function(data) {
var ParsedObject = JSON.stringify(data);
var json = $.parseJSON(ParsedObject);
if (json == "") {
$("#bottom").append('<div class="btn btn-default col-md-6" >' + 'No More Results' + '</div>');
$("#Load_more_data").hide();
} else {
$postID = json[json.length - 1].id;
$('.load-more').attr('lastID', $postID);
$.each(json, function(key, data) {
var post_id = data.id;
var data_id = [data.length - 1].id;
// alert(data_id);
var post_status = data.status;
var status_image = data.status_image;
var multimage = data.multimage;
var commentID = $('.comment-more').attr('commentID');
// alert(comment_post_id);
if (!post_status == "" && !status_image == "") {
$("#status_data").append('<div class="col-md-6 postdata' + post_id + '"><a ><?php echo img($user_image); ?></a><a class="weshare_user_name text-font"><?php echo $uname; echo " "; echo $lname;?></a><div class="weshare_user_status">' + post_status + '</div><div class="weshare_user_singleimage"><img style="height:300px; width:400px;" src="<?php echo base_url('
uploads '); ?>/' + status_image + '"></div><div class="row"><div class="col-md-12"><ul class="list-inline"><li><a onclick="like(' + post_id + ');"><span class="glyphicon glyphicon-thumbs-up"></span> Like</a></li><li><a onclick="select_comment(' + post_id + ');" ><span class="glyphicon glyphicon-comment"></span> Comment</a></li><li><a onclick="share(' + post_id + ');"><span class="glyphicon glyphicon-share-alt"></span> Share</a></li><button type="button" id="comment_show" onclick="select_comment(' + post_id + ');"><i class="fa fa-caret-down "></i></button></ul></div></div><div class="panel-footer " id="comment_div" onload="select_comment(' + post_id + ');"><div class="row"><div class="col-md-12">13 people like this</div></div><ul class="media-list"><li class="media_comment"></li><li class="media"><div class="media-left media-top"><?php echo img($user_file_image); ?></div><div class="media-body"><div class="input-group"><form action="" id="form_content_image"><textarea name="textdata" id="content_comment_image" cols="25" rows="1" class="form-control message" placeholder="Whats on your mind ?"></textarea><button type="submit" id="comment_button_image" onclick="comment_here_image(' + post_id + ');">Comment</button></form></div></div></li></ul></div></div>');
} else if (!post_status == "" && status_image == "") {
$("#status_data").append('<div class="col-md-6 postdata' + post_id + '" ><a ><?php echo img($user_image); ?></a><a class="weshare_user_name text-font"><?php echo $uname; echo " "; echo $lname;?></a><div class="weshare_user_status">' + post_status + '</div><div class="row"><div class="col-md-12"><ul class="list-inline"><li><a onclick="like(' + post_id + ');"><span class="glyphicon glyphicon-thumbs-up"></span> Like</a></li><li><a onclick="select_comment(' + post_id + ');"><span class="glyphicon glyphicon-comment"></span> Comment</a></li><li><a onclick="share(' + post_id + ');"><span class="glyphicon glyphicon-share-alt"></span> Share</a></li><button type="button" id="comment_show" onclick="select_comment(' + post_id + ');" ><i class="fa fa-caret-down "></i></button></ul></div></div><div class="panel-footer " id="comment_div" onload="select_comment(' + post_id + ');"><div class="row"><div class="col-md-12">13 people like this</div></div><ul class="media-list"><li class="media_comment"></li><li class="media"><div class="media-left media-top"><?php echo img($user_file_image); ?></div><div class="media-body"><div class="input-group"><form action="" id="form_content"><textarea name="textdata" id="content_comment" cols="25" rows="1" class="form-control message" placeholder="Whats on your mind ?"></textarea><button type="button" id="comment_button" onclick="comment_here(' + post_id + ');" >Comment</button><?php echo form_close();?></div></div></li></ul></div></div>');
} else if (!multimage == "") {
$("#status_data").append('<div class="col-md-6 postdata' + post_id + '" ><a ><?php echo img($user_image); ?></a><a class="weshare_user_name text-font"><?php echo $uname; echo " "; echo $lname; ?></a><div class="weshare_user_multimage"><img style="height:300px; width:400px;" src="<?php echo base_url('
uploads '); ?>/' + multimage + '"></div><div class="row"><div class="col-md-12"><ul class="list-inline"><li><a onclick="like(' + post_id + ');"><span class="glyphicon glyphicon-thumbs-up"></span> Like</a></li><li><a onclick="select_comment(' + post_id + ');"><span class="glyphicon glyphicon-comment"></span> Comment</a></li><li><a onclick="share(' + post_id + ');"><span class="glyphicon glyphicon-share-alt"></span> Share</a></li><button type="button" id="comment_show" onclick="select_comment(' + post_id + ');"><i class="fa fa-caret-down "></i></button></ul></div></div><div class="panel-footer " id="comment_div" onload="select_comment(' + post_id + ');"><div class="row"><div class="col-md-12">13 people like this</div></div><ul class="media-list"><li class="media_comment' + post_id + '"></li><li class="media"><div class="media-left media-top"><?php echo img($user_file_image); ?></div><div class="media-body"><div class="input-group"><form action="" id="form_content_multimage"><textarea name="textdata" id="content_comment_multimage" cols="25" rows="1" class="form-control message" placeholder="Whats on your mind ?"></textarea><button type="submit" id="comment_button_multimage" onclick="comment_here_multimage(' + post_id + ');" >Comment</button><?php echo form_close();?></div></div></li></ul></div></div>');
} else {
}
});
});
}
});
}
function select_comment(post_id) {
// alert(post_id);
var Post_id = post_id;
var User_id = $('.id_data').attr('value');
jQuery.ajax({
type: 'POST',
url: '<?php echo base_url("user/select_comment"); ?>',
data: {
Post_id: Post_id,
User_id: User_id
},
dataType: 'json',
success: function(data) {
var ParsedObject = JSON.stringify(data);
var json = $.parseJSON(ParsedObject);
$.each(json, function(key, data) {
var comment = data.comment;
var post_id = data.post_id;
$post_id = post_id;
// alert(comment);
// alert(post_id);
$("#comment_post_id").attr('value', $post_id);
$(".media_comment").append('<li class=" media-top"><?php echo img($user_file_image); ?> <p>' + comment + '</p> <br>Like · Reply </li>');
});
}
});
}
}
function comment_here($post_id) {
$(document).on('click', '#comment_button', function(e) {
// this will prevent form and reload page on submit.
e.preventDefault();
// here you will get Post ID
var Post_id = $post_id;
var User_id = $('.id_data').attr('value');
var textdata = $('#content_comment').val();
// alert(textdata);
$.ajax({
type: 'POST',
url: '<?php echo base_url("user/post_comment"); ?>',
data: {
Post_id: Post_id,
User_id: User_id,
textdata: textdata
},
dataType: 'json',
success: function(data) {
console.log(data);
alert('you have like this');
var ParsedObject = JSON.stringify(data);
var json = $.parseJSON(ParsedObject);
$postID = json[json.length - 1].post_id;
alert($postID);
$('.comment-more').attr('commentID', $postID);
jQuery('#form_content')[0].reset();
}
});
});
}
function comment_here_image($post_id) {
$(document).on('click', '#comment_button_image', function(e) {
// this will prevent form and reload page on submit.
e.preventDefault();
// here you will get Post ID
var Post_id = $post_id;
var User_id = $('.id_data').attr('value');
var textdata = $('#content_comment_image').val();
alert(textdata);
$.ajax({
type: 'POST',
url: '<?php echo base_url("user/post_comment"); ?>',
data: {
Post_id: Post_id,
User_id: User_id,
textdata: textdata
},
dataType: 'json',
success: function(data) {
console.log(data);
alert('you have like this');
jQuery('#form_content_image')[0].reset();
Post_id = "";
}
});
});
}
function comment_here_multimage($post_id) {
$(document).on('click', '#comment_button_multimage', function(e) {
// this will prevent form and reload page on submit.
e.preventDefault();
// here you will get Post ID
var Post_id = $post_id;
var User_id = $('.id_data').attr('value');
var textdata = $('#content_comment_multimage').val();
// alert(textdata);
alert(Post_id);
$.ajax({
type: 'POST',
url: '<?php echo base_url("user/post_comment"); ?>',
data: {
Post_id: Post_id,
User_id: User_id,
textdata: textdata
},
dataType: 'json',
success: function(data) {
console.log(data);
alert('you have like this');
jQuery('#form_content_multimage')[0].reset();
Post_id = "";
}
});
});
}
now what i am doing in this code is first on page load a function calls loadmore(); this loadmore contains all the post from my databse that are shown on my page by decreasing the id using json[json.length-1].id now i want to comment on those posts so i appended a textarea also in my code but when i click on the comment button that is comment_here(post_id) the post_id that is passing pass correctly but everytime when i select a post and comment on it the id before that in the loop gets called first then the 'clicked' id calls so i neet to stop the loop and pass the id in decresing in the comment as well what i am doing wrong ? if there is something you dont understand do tell me.
Here is the select box/drop-down menu:
var type_select = '<select id="type_select" style="margin-bottom:0px;">';
var i;
var customer_group = <?php echo json_encode($customer_group);?>;
for (i = 0; i < customer_group.length; ++i) {
//console.log(customer_group[i].group_id);
if (customer_group[i].group_name == table_column_3){
type_select = type_select+'<option value='+customer_group[i].group_id+' selected="selected">'+customer_group[i].group_name+'</option>';
}else{
type_select = type_select+'<option value='+customer_group[i].group_id+'>'+customer_group[i].group_name+'</option>';
}
}
type_select = type_select+'</select>';
Modal Dialog Box:
bootbox.dialog({
onEscape:true,
backdrop:true,
message: '<div class="row"> ' +
'<div class="col-md-12"> ' +
'<form class="form-horizontal"> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="awesomeness">Phone: </label> ' +
'<div class="col-md-4">' +
'<input id="edit-phone_no" type="text" value="'+table_column_7+'"/>' +
'</div><br>' +
'<label class="col-md-4 control-label" for="awesomeness">Name: </label> ' +
'<div class="col-md-4">' +
'<input id="edit-name" type="text" value="'+table_column_2+'"/>' +
'</div><br>' +
'<label class="col-md-4 control-label" for="awesomeness">Type: </label> ' +
'<div class="col-md-4">' +type_select+
'</div>'+
'</form> </div> </div>'});
Javascript/AJAX function to show name and type of customer automatically when enter phone number
document.getElementById('edit-phone_no').onkeyup = function(){
text_length = $('#edit-phone_no').val().length;
if (text_length >= 8){
$.ajax({
url : "<?php echo base_url(); ?>index.php/home/get_name_by_phone_no",
type: "post",
data: {
"phone_no" : $('#edit-phone_no').val(),
},
success: function(response){
console.log(response);
var data = JSON.parse(response);
if (response != ""){
$('#edit-name').val(data.name);
$('#type_select').val(data.group_name);
}
}
});
}
}
PHP function to get name and type(group_name) of customer from database based on phone number:
public function get_name_by_phone_no($phone_no){
$result = "";
$this->db->select('name,group_id');
$this->db->where('phone_no',$phone_no);
$query = $this->db->get('customer');
if ($query->num_rows() > 0){
$row = $query->row();
$group_id = $row->group_id;
$row->group_name = $this->get_group_name_by_group_id($group_id);
$result = $row;
}
echo json_encode($result);
}
When I enter the phone no. of a customer, I would like the name to be automatically shown in the textbox and the type of customer to be automatically selected in the drop-down menu(All based on the records in the database).The name part works now but the type part does not work. There must be a problem. Please tell me how to fix it. Thank you very much all of you for your help in advance.
error in your logic.
when you are creating SELECT box(drop down menu) you are setting option value as group_id and another side you are returning group name:
$row->group_name = $this->get_group_name_by_group_id($group_id)
group name from server in ajax call.
So your mistake is ajax response has group name when options value is in id so
$('#type_select').val(data.group_name);
data.group_name does not match with any value in option so it is not working.
Change the Javascript/AJAX function to show name and type of customer automatically when enter phone number
Original :
document.getElementById('edit-phone_no').onkeyup = function(){
text_length = $('#edit-phone_no').val().length;
if (text_length >= 8){
$.ajax({
url : "<?php echo base_url(); ?>index.php/home/get_name_by_phone_no",
type: "post",
data: {
"phone_no" : $('#edit-phone_no').val(),
},
success: function(response){
console.log(response);
var data = JSON.parse(response);
if (response != ""){
$('#edit-name').val(data.name);
$('#type_select').val(data.group_name);//original
}
}
});
}
}
Now:
document.getElementById('edit-phone_no').onkeyup = function(){
text_length = $('#edit-phone_no').val().length;
if (text_length >= 8){
$.ajax({
url : "<?php echo base_url(); ?>index.php/home/get_name_by_phone_no",
type: "post",
data: {
"phone_no" : $('#edit-phone_no').val(),
},
success: function(response){
console.log(response);
var data = JSON.parse(response);
if (response != ""){
$('#edit-name').val(data.name);
/*replaced code*/
var store;
var types = ["N/A","VIP","Writer","High","Low","No Show","Black List","Cancel","Family","Friend"];
for(i=0;i<types.length;i++)
{
if(types[i]==data.group_name)
store=i;
}
$("#type_select option:contains(" + types[store] + ")").attr('selected', 'selected');
}
}
});
}
}
It works now.
I have one question about my post like and unlike. The problem is when i click .like_button the <span id='you"+New_ID+"'><a href='#'>You</a> like this.</span> not showing.
I still check with browser developers console. But when i click Like button Like button will changed but <span id='you"+New_ID+"'><a href='#'>You</a>, </span> not showing. But if i refresh the page <span id='you"+New_ID+"'><a href='#'>You</a>, </span> will coming.
anyone can help me here?
I am using this code for LIKE and UNLIKE :
AJAX JQUERY:
$('.like_button').die('click').live("click", function () {
var KEY = parseInt($(this).attr("data"));
var ID = $(this).attr("id");
if (KEY == '1') {
var sid = ID.split("likes");
} else {
var sid = ID.split("like");
}
var New_ID = sid[1];
var REL = $(this).attr("rel");
var URL = $.base_url + 'post_like_ajax.php';
var dataString = 'post_id=' + New_ID + '&rel=' + REL;
$.ajax({
type: "POST",
url: URL,
data: dataString,
cache: false,
success: function (html) {
if (html) {
if (REL == 'Like') {
$("#elikes" + New_ID).show('fast').prepend("<span id='you" + New_ID + "'><a href='#'>You</a> like this.</span>");
$("#likes" + New_ID).prepend("<span id='you" + New_ID + "'><a href='#'>You</a>, </span>");
$('#' + ID).html('Unlike').attr('rel', 'Unlike').attr('title', 'Unlike');
} else {
$("#elikes" + New_ID).hide('slow');
$("#you" + New_ID).remove();
$('#' + ID).attr('rel', 'Like').attr('title', 'Like').html('Like');
}
}
}
});
return false;
});
PHP CODE:
<?php
if($login)
{
?>
<a href='#' class='like like_button icontext' id='like<?php echo $post_id;?>' title='<?php echo $like_status;?>' rel='<?php echo $like_status;?>' data=''><?php echo $like_status;?></a>
<a href='#' class='commentopen commentopen_button icontext' id='<?php echo $post_id;?>' rel='<?php echo $post_id;?>' title='Comment'>Yorum yap </a>
<?php if($uid != $post_id) { ?>
<?php } } else { ?>
<a href='<?php echo $index_url; ?>' class='like icontext' >Like</a>
<a href='<?php echo $index_url; ?>' class='commentopen icontext' title='Comment'>Comment</a>
<a href='<?php echo $index_url; ?>' class='share icontext' title='Share'>Share</a>
<?php
}
?>
<?php if($post_like_count>0)
{
$likesuserdata=$POLL->post_Like_Users($post_id);
if($likesuserdata)
{
echo '<div class="likes" id="likes'.$post_id.'">';
$i=1;
$j=count($likesuserdata);
foreach($likesuserdata as $likesdata)
{
$you="likeuser".$post_id;
$likeusername=$likesdata['username'];
if($likeusername == $session_username)
{
$likeusername='You';
$you="you".$post_id;
}
echo ''.$Wall->UserFullName($likeusername).'';
if($j!=$i)
{
echo ', ';
}
$i=$i+1;
}
if($post_like_count>3)
{
$post_like_count=$post_like_count-3;
echo ' and <span id="like_count'.$post_id.'" class="numcount">'.$post_like_count.'</span> others like this.';
}
else
{
echo ' like this.';
}
echo '</div>';
}
}
else
{
echo '<div class="likes" id="elikes'.$post_id.'" style="display:none"></div>';
}
?>
post_like_ajax.php
<?php
include_once 'includes.php';
if(isSet($_POST['post_id']) && isSet($_POST['rel']))
{
$haber_id=$_POST['post_id'];
$rel=$_POST['rel'];
if($rel=='Like')
{
$cdata=$POLL->POST_Like($post_id,$uid);
}
else
{
$cdata=$POLL->POST_Unlike($post_id,$uid);
}
echo $cdata;
}
?>
I think you forgot just to display the div in which you are prepending because for start you added display:none, echo '<div class="likes" id="elikes'.$post_id.'" style="display:none"></div>';
try to change this line:
$("#likes" + New_ID).prepend("<span id='you" + New_ID + "'><a href='#'>You</a>, </span>");
to this:
$("#likes" + New_ID).show().prepend("<span id='you" + New_ID + "'><a href='#'>You</a>, </span>");