Develop Reference

Reload Div when using multiple Rows but keeping element id

I have a set of records in a database and list them out in rows.
Each row has to be a unique element id so i achieved this as follows and this is inside the main loop.
#right<?php echo $row['Id']; ?> {
display: inline-block;
width:250px;
float:left;
text-align: left;
height:auto;
font-family:Arial;
font-size: 12px;
text-decoration: none;
}
Each record therefore has its own css as above.
I have a submit form button on each row whihc also uses unique <?php echo $row['Id']; ?> so each form has its own name as well.
I submit form and use ajax to make the current div reload so it changes color as row status changes.
The problem I have is once i have submitted this form once, it will then no longer submit a second time without loading the entire page , I assume this is something to do with the element id ?
here is the ajax
<script>
$(document).ready(function() {
$("#submit<?php echo $row['Id']; ?>").submit(function() {
var frm = $('#submit<?php echo $row['Id']; ?>');
$.ajax({
type: frm.attr('method'),
url: 'Update.php',
data: frm.serialize(),
success: function (data) {
$('#right<?php echo $row['Id']?>').load(' #right<?php echo $row['Id']?> ',function(){
$("#image<?php echo $row['Id']; ?>").show(); }
) ;
}, error: function(jqXHR, textStatus, errorThrown){
console.log(" The following error occured: "+ textStatus, errorThrown );
} });
return false;
});
});
</script>
This seems to work completely fine the first time i submite the div reloads and does as intended , its when you click it a second time.
Am i doing this completely the wrong way ?
I know i can do the submit button outside of the reloaded divs and then it keeps working but wanted to reload the entire div so i can change the buttons to other options etc.
Any help would be appreciated.
Here is the html/php
<div id="right<?php echo $row['Id']; ?>">
<form id="submit<?php echo $row['Id']; ?>" method="post" autocomplete="off">
<input type="hidden" value="<?php echo $row['Id']?>" name="id">
<input class="input-2" type="text" name="returnid" value="<?php echo $row['returnID']; ?>">
<input type="submit" name="submit-form" class="buttonSubmitHide" />
</form>
</div>

the code that you wrote is not gonna hide the #loading element after process.
i need to see your html code at first if its possible and if its impossible so you need to hide your #loading element when your process done and after that you will able to show it again.
How your code is work well at first time when loading is not hiding and its just showing?
if its'll be delete after load so you'll need to load #loading element too as well.

Put a class on every row and remove the id. Take advantage of the ability to get all elements which match a class, and hook the event to every element matching the class. Then use $(this).parent() in the function to get the row, and from there navigate to the children.
This is just a strategy to improve your code rather than a concrete answer, but if you follow this, it might be easier to reason about where your error is.
$(document).ready(function() {
$(".js-action").submit(function() {
var row = $(this).parent('.row');
$.ajax({
type: $(this).attr('method'),
url: 'Update.php',
data: $(this).serialize(),
success: function (data) {
row.find('.response-image').show();
},
error: function(jqXHR, textStatus, errorThrown){
console.log("The following error occured: "+textStatus,errorThrown);
}
});
});
<!-- this gets repeated a bunch of times. No need for ids -->
<div class="row">
<form class="response" method="post" autocomplete="off">
<input type="hidden" value="<?php echo $row['Id']?>" name="id">
<input class="input-2" type="text" name="returnid" value="<?php echo $row['returnID']; ?>">
<input type="submit" name="submit-form" class="buttonSubmitHide" />
</form>
</div>

display comment in post comment section without reloading the page

im trying to make a facebook style post and comment section but i dont know how to display the data inserted to my database without refreshing the page...
this code is for saving the data to my db. i use window.location.reload(); to reload my page so that the data will be displayed on my page..
<script>
$(document).ready(function() {
$('input[name="mycomment"]').on('keyup', function(e){
e.preventDefault();
var comments = $(this).val();
var sid = $(this).closest("div#userspost").find("input[type='hidden']").val();
if(e.keyCode == 13){
if(comments.length)
$.ajax({
url: "../controller/post_controller.php",
type: "POST",
data:{
"id":sid,
"comments":comments,
},
success: function(data)
{
window.location.reload();
}
});
else
alert("Please write something in comment.");
}
});
});
</script>
using this script i can display my comment on a post i need to refresh the page first for me to be able to show the comment.
<?php
foreach ($post_model->getcomment() as $value) {
if($postid == $value['post_uid']){
?>
<div id="mycomments">
<div class="col-lg-12" style="background:#eff9c7;">
<img src="./<?php echo $value['image']?>" class="pull-left" style="border-radius:50%;margin-top:10px;" width="7%" height="7%" />
<p style="margin-top:18px;line-height:15px;"><strong class="font-1" style="margin-left:10px;"><?php echo $value['firstname'].' '.$value['lastname']?></strong> <?php echo $value['pc_comment']?><br>
<span class="" style="margin-left:10px;font-size:.9em;color:gray;"><abbr class="timeago" title="<?php echo $value['pc_datesend']?>"></abbr></span>
</p>
</div>
</div>
<?php
}
}
?>
what im trying to do is that this is where i want to display my comments from my db. i tried researching about append/load but i dont exactly know how this works. is there any idea that i can display my comment in this script?
<div id="mycomments">
<div class="col-lg-12" style="background:#eff9c7;">
<img src="./<?php echo $value['image']?>" class="pull-left" style="border-radius:50%;margin-top:10px;" width="7%" height="7%" />
<p style="margin-top:18px;line-height:15px;"><strong class="font-1" style="margin-left:10px;"><?php echo $value['firstname'].' '.$value['lastname']?></strong> <?php echo $value['pc_comment']?><br>
<span class="" style="margin-left:10px;font-size:.9em;color:gray;"><abbr class="timeago" title="<?php echo $value['pc_datesend']?>"></abbr></span>
</p>
</div>
</div>

I decided to write some pseudo code for you here. If you don't know how to store and fetch comments I would recommend looking into MYSQL. It's relatively simple (for simple things), so that shouldn't be too big of a problem. YouTube tutorials will be your blessing there.
You should have at least three files to properly implement this:
uploadComment.php
<?php
//process the comment upload
echo $_POST['comment'];
?>
getComment.php
<?php
//however you serve commnets, MYSQL, maybe?
//make sure it's properly formatted with HTML
?>
index.html
<form>
<input type="text" name="comment" id="comment" value="Comment here" />
<button id="submit">Submit</button>
</form>
<div id="comments">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$("#submit").click(function () {
$.post("uploadComment.php", {
comment : $("#comment").val()
}, function (data) {
//comment posted.
refreshComments();
});
});
function refreshComments() {
$.get("getComments.php", function(data) {
$("#comments").html(data);
});
}
setInterval(refreshComments,5000);
</script>
Note: Although it may be annoying, if you want immediate satisfaction, append the new comment to the end and then invoke refreshComments. (But I wouldn't recommend doing this because it would force you to update multiple locations in your code whenever you change your comment HTML format).

set html button state based on query

I have a page with 'favourite' button that when clicked runs an Ajax post and updates my db table 'favourite' accordingly user and book details.
The current process is as follows,
click button once > add book to favourite table > refresh page > display success div
click button again > delete book from favourite table > refresh page > display success div
What I would like to do now is on page load, check if the user has already added the book as a favourite, if so, set the class of this button to btn-success (green).
How do I achieve this? Do I need to give the button an attribute on page load and check this on page load?
I am quite new to php and js so any advice is appreciated. I have included my code for reference.
ajax
$(document).ready(function(){
$( "#fav" ).click(function(){
book_id = $(fav).val(); // set the value of the button as the book_id
$.ajax({
type: 'POST',
url: '<?php echo URL; ?>books/checkFav',
data: {book_id:book_id},
success: function () {
window.location.reload(true);
}//end success
});//end ajax
});
});
checkFav php
$bookid=$_REQUEST['book_id']; //get this from ajax
$userid=$_SESSION['user_id']; //get this from session
$sql = "SELECT * FROM favourite WHERE book_id = :book_id AND user_id = :user_id";
... //execute
if(empty($rows_found)) {
$sql = "INSERT INTO favourite (book_id, user_id) VALUES (:book_id, :user_id)";
... //execute
} else {
$sql = "DELETE FROM favourite WHERE book_id = :book_id AND user_id = :user_id";
... //execute
}
html
echo '<td>
<button id="fav" value="'.$book->id.'" type="button" class="btn btn-default"></button></td>';
echo '</tr>';

This is incorrect:
<button id="fav" value="'.$book->id.'" type="button" class="btn btn-default"></button>
You must specify that you want PHP code and you want to echo $book->id, like this:
<button id="fav" value="<?php echo $book->id; ?>" type="button" class="btn btn-default"></button>
Also, let's suppose you have a PHP function isFavorite, then
<button id="fav" value="<?php echo $book->id; ?>" type="button" class="btn btn-default<?php echo ((isFavorite()) ? (" btn-success") : ("")); ?>"></button>

There are two things you can do:
make a php function that checks if it is already a favorite or not and returns true or false and based on that add a class to the button like this:
$("#buttonId").addClass("btn-success");
if you already have this data when the page loads you can add a php code inline in the html like this:
if($favorite){
$class = "btn-success";
}
and then in the html
<button id="fav" value="<?php echo $book->id; ?>" type="button" class="btn <?php echo ($book->isFavorite()) ? 'favorite' : '';?>"></button>

CodeIgniter PHP: change value in database when checkbox is mark/unmark

Ok, I manage somehow to get value of checkbox, but now i have another issue.
This is my view, rssFeeds.php
<?php foreach( $feeds as $row ) : ?>
<div class="row">
<div class="col-md-2 col-sm-3 text-center">
<a class="story-title"><img alt="" src="http://www.solostream.com/wp-content/uploads/2014/06/20140110080918_0555.jpg" style="width:100px;height:100px"></a>
<label class="checkbox-inline">
<input type="checkbox" class="chkbox" value="chkbox_<?php echo $row->category; ?>_<?php echo $row->id; ?>"> Mark Read
</label>
</div>
<div clas="col-md-10 col-sm-9">
// here are my feeds....
</div>
</div>
<?php endforeach; ?>
I have this script, which take checkbox value, and send it to my controller:
<script>
$(document).ready(function(){
$(document).on('click','.chkbox',function(){
var id=this.value;
$.ajax( {
type: "POST",
context: "application/json",
data: {id:id},
url: "<?php echo site_url('rssFeedReader/markReadUnread'); ?>",
success: function(msg)
{
// what should i do here ?....
}
})
});
});
</script>
In my controller, i just load a model which change a value on my database, 0 or 1( meaning read or unread).
The problem is that nothing change on my table...
I need to put something in that .succes function in ajax ? What.. ? I just need to change one value in my database....

#James-Lalor has the answer you are looking for, but I'll expand upon it.
You can give inputs the same name (radio buttons, checkboxes) to have them interact with each other. In the case of radio buttons it's actually required to have the same name to mark and unmark others. However in this case we will use <input name=example[]> note the [], this means when you do an ajax post (or any post) it will send all the values checked as an array.
So following James' suggestion, you would do a <input name="checkbox[<?php echo $row->id?>]" to which you can post using $.post(url, data, callback), the easiest way to do this would be to put it into a form, assign the form an id, do a serialized post. You could do something like:
<form id="rss_form" method="post" action="javascript:rssUpdate();">
<input name="checkbox[<?php echo $row->id?>]" type="checkbox"/>
<input type="submit" value="submit"/>
</form>
<script>
function rssUpdate()
{
$.post(url/to/post/to, $("#rss_form").serialize());
}
</script>

jQuery two forms in same page - value change

I've a list of all my users in a table. The last td element will contain a form,
either a form for opening the account or a form for closing the account based on if the user
is already been closed or not. I'm using jQuery AJAX form plugin from http://malsup.com/jquery/form/ which is working.
What I'd like to do is the change the value of button before the form is been submitted.
Here's my JS for now:
$(document).ready(function() {
$('form').ajaxForm({
beforeSubmit: function() {
$('form').find('input').val('Wait...');
},
success: function(data) {
$('body').html(data);
}
});
return false;
});
and here's my HTML markup:
<td>
<?php if($user['closed'] == 0):?>
<?php $attributes = ['class' => 'account']; ?>
<?php echo form_open('admin/closeAccount', $attributes);?>
<input type="hidden" name="user_id" value="<?=$user['user_id']?>"/>
<input type="hidden" name="user_email" value="<?=$user['email']?>"/>
<input type="submit" name="close_account" class="btn btn-danger btn-sm" id="trigger" value="Close" >
<?php echo form_close();?>
<?php else:?>
<?php $attributes = ['class' => 'account'];?>
<?php echo form_open('admin/openAccount');?>
<input type="hidden" name="user_id" value="<?=$user['user_id']?>"/>
<input type="submit" data-loading-text="Odota..." name="open_account" class="btn btn-success btn-sm" id="trigger" value="Open" >
<?php echo form_close();?>
<?php endif ?>
</td>
The problem is that every time I try to submit the form, it will now change the value of all buttons to "Wait..." instead of just the one I clicked. I tried
to replace $('form') with $(this) in $('form').find('input').val('Wait...'); but that didn't help me at all.

According to the plugin documentation (http://malsup.com/jquery/form/#options-object)
$form passed to beforeSubmit callback should give you access to the current form being submitted.
try:
$('form').ajaxForm({
beforeSubmit: function(arr, $form, options) {
$form.find('.btn').val('Wait...');
},
success: function(data) {
$('body').html(data);
}
});

Just try this code
$('.btn').val('Wait...');
or
$('.btn-danger').val('Wait...');
or
$('.btn-sm').val('Wait...');

Try adding more specificity to your CSS selector. Inside your ajaxForm() call try this to change submit button value:
$(this).find('input[type="submit"]').val('Wait...');

If i understood you right you need just change your selector to - $('input[type="submit"]').
So it will be -
$('form').find('input[type="submit"]').val('Wait...');
Or
use :submit selector

Your button has an id, why aren't you using that selector?
$("#trigger").val("Wait...");
Is the form itself loaded via ajax? If so then delegate.
$(document).on("customevent", "#trigger", function() {
$(this).val("Wait...");
});
and then in the beforesubmit just $(document).trigger("customevent");