Develop Reference

How to do an action in DB without reloading page with JavaScript?

I've wrote a code which retrieve some data in table and each row has a two button which is responsible for updating database with a fixed value for that row and deleting the row. I want to do these actions without reloading page.
here is my table code:
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>نام کاربر</th>
<th>ایمیل</th>
<th>تایید</th>
</tr>
</thead>
<tbody>
<?php
while ($users = mysqli_fetch_assoc($result_user)) {
?>
<tr>
<td><?php echo $users['name']?></td>
<td><?php echo $users['email']?></td>
<td>
<div class="btn-group">
<button name="btn_confirm" type="button" class="btn btn-success btn-flat">تایید</button>
<button type="button" class="btn btn-success btn-flat dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a name="btn_delete" href="#">حذف</a></li>
</ul>
</div>
</td>
</tr>
<?php }?>
</tbody>
</table>

You need to use AJAX as #Sagar Sainkar said.
You can find a good explanation on this post:
jQuery Ajax POST example with PHP
So I will not rewrite the whole mechanism again. It explains very well how you can plat with ajax, js and php (which I noticed you use).
Another TIP: avoid mixing up back-end and front-end code. Don't integrate php scripts in HTML files. Try writing separate JS files (containing the requests), import them into your HTML code and use them there (and if they do not load graphical content that the user needs to see when the page loads, then defer it, or put the import of the JS at the bottom of html). There may be better options but one easy to delete or update rows using AJAX is to pass a parameter to the server like "command: delete_entry" or something similar and then switch between options on the back end. But there are smarter options out there if you research well, you can use this tip plus the tutorial passed to start playing with AJAX requests until you master get a good grip upon them.

In order to update DOM elements without refreshing the page you will need to be able to send data or action request to a server (API) and then wait for their response to update your page accordingly.
You can refer to https://github.com/axios/axios which is one of the more popular library to learn how to call a POST or GET request.

Cross browser solution for submit buttons outside form

I am basically trying to implement this
http://www.impressivewebs.com/html5-form-attribute/
I have a cart which is outputting and sandwiched by a html table. Below the table, I currently have my submit button.
<thead>
<tr>
<th>ITEM</th>
<th>PRICE</th>
<th>WEIGHT (Kg)</th>
<th>QTY</th>
<th>SUBTOTAL</th>
<th></th>
</tr>
</thead>
<tbody>
<form action='shop.php' id='cart' method='post'>
<?php echo $cartOutput; ?>
</form>
<tr>
<td class="totals"><strong>Total</strong></td>
<td class="totals"> </td>
<td class="totals"><?php if (isset($weightTotal)) { echo $weightTotal . 'kg';} ?> </td>
<td class="totals"><?php if (isset($quantityTotal)) { echo $quantityTotal; } ?></td>
<td class="totals"><strong><?php if (isset($cartTotal)) { echo '$' . $cartTotal; } ?></strong></td>
<td class="totals"></td>
</tr>
</tbody>
/* code finishing table here */
<div class="col-lg-12 col-md-12 col-xs-12 remove-padding">
<button type="submit" class="btn btn-default" form="cart" name="adjustButton" id="adjust-button">UPDATE CART</button>
<button type="button" class="btn btn-default" form="contact" name="order" id="order-button" onclick="confirmOrder()" >ORDER NOW</button>
</div>
So because of the way I want the layout to look.. I can't put the buttons inside the form. I want to have the ability to put the update button below the cart.
Right now the order button is not a submit button but just a button. I can put it beneath its own form section but right now I force it through javascript for a confirmation and then submit the request through JS if they say OK.
I want to keep that function while supporting browsers including IE 9 +10. From what I found form="" doesn't work in IE
Can I achieve this?

Put the form tag outside all 'relevant' content (including submit button(s)):
<body>
<form>
<table>
</table>
<div>
<button>
</button>
</div>
</form>
</body>
If the button cannot be inside the form, make the form outside the
button.

This should work in all browsers:
document.getElementById('cart').submit();
You can put that in the onClick, and wrap it in a function if needed.
Edit: Since the issue (per the comments below) is that you have inputs outside the form: Really the simplest solution, and one that involves no Javascript, is to put the </form> at the end of the page (so that all your inputs and buttons will be in the form). But of course this doesn't work if you need to have more than one form on the page, and it might not even be possible depending on how the page is layed out.

If your submit button is outside the form and you have some input elements outside the form then the simplest way to send this form (without using ajax) would be to make a form and put your submit button in it.
And since your input fields are outside the form you will make a copy of those input fields inside your form and hide them with display:none; and when user changes the value of your visible input fields you will use javascript to change the value of the hidden input field.
This way you get to send the form the usual way, without the input fields having to be inside the form itself.....

You could copy the outside form elements to inside the form and sync them using JS.
http://jsfiddle.net/rudiedirkx/y0cmda4o/
if ( !('fform' in document.createElement('input')) ) {
$('input[fform], textarea[fform], select[fform]').on('change', function(e) {
this.$hidden.val(this.value);
}).each(function(i, el) {
var formId = $(el).attr('fform'),
$form = $('#' + formId),
$hidden = $('<input name="' + el.name + '" type="hidden">');
$form.append($hidden);
el.$hidden = $hidden;
});
}
As you can see, I used the fform attribute, to trigger the if statement. Change it to form and try it in IE.
Disclaimer:
This won't work with multiple value elements (like select[multiple]), or you have to add some serious JS to fake those multiple values.
This won't send the triggered button value. Normal submit buttons send only their value, and not the other submit buttons'. You could maybe add an onclick to handle that... If you use it.

Common popup form, generated table

My Web page generates a table that shows the results of a search. I want the user to be able to click on one of the results, have a pop up window which allows them to enter a message and have it stored on a database. Then the user clicks the send message button, the popup will then close and let the user continue the search results.
Here is the current code I have.
<h1>
<center>
<u>Casting Call Results</u>
</center>
</h1>
<table border="1"; width="600px"; align="center">
<?php if(empty($results)) {echo "No Data returned";} ?>
<?php foreach($results as $member):?>
<?php $imgloc = "members/".$member['username']."/".$member['photolink'];?>
<tr align="center">
<td width="100px"> <img style="width:100px; height:125px" src="<?php echo $imgloc;?>"></td>
<td><?php echo $member['bio'];?></td>
</tr>
<tr align="center">
<td><?php echo $member['username']?></td>
<td><?php echo $member['email']?></td>
</tr>
<?php endforeach; ?>
</table></div>
<form action="castingcall.php">
<center><input type="submit" value="Search Again"></center>
</form>
Here's the search return. I tried to insert the image but I don't have ten reputation points so here's a link to the search return so you can see what I'm talking about.
http://www.chicagofilmclub.org/screenshot.jpg
As you can see the table is generated by a for each so I am really confused as to how I can have each user an active link that calls the same page in a popup but can still $PASS the proper user name.

Each person would have a link that would look something like this:
Contact Member
I am assuming you will give each memebr an ID in your database.
Then on the contactform.php page you would use something like this:
<?php
$memberId = $_GET['member'];
//lookup memeber in database and do whatever it is you want to do with that info
?>

How to add a delete button in custom table in yii

I have a form where I use ajaxSubmitButton to add product items in a HTML table. ajaxSubmitButton helps to use ajax to add item, ajax url take the values and update the table's body <tr>, <td>. In table, I want to keep a delete button in last column in every rows. When I click the delete button, a row should be deleted. But here delete button does not work. I have checked the hardcoded HTML table and jquery in views that works.
In this circumstance, how could I solve this issue. Please help me. I have given below the form and controller's code:
Form:
Yii::app()->clientScript->registerScript('removecartitem', "
$('#remove').click(function(){
$('#cartDetails tr:first').remove();
})
");
?>
<div class="form-group">
<div class="col-lg-2">
<?php
// this is the ajax submit button
echo CHtml::ajaxSubmitButton('Add Item',Yii::app()->createUrl('admin/order/cart'),
array(
'type'=>'POST',
'update'=>'#cartTable',
),
array('class'=>'btn btn-primary btn-sm',));
?>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<table id="cartDetails" class="table table-bordered sortableTable responsive-table">
<tbody id="cartTable"> // ajax updates this id
</tbody>
</table>
</div>
</div>
In controller:
public function actionCart()
{
if(isset($_POST["Order"])){
.....
.....
$cartDetails = Yii::app()->session['cart'];
if(!empty($cartDetails)){
foreach($cartDetails as $cart){
echo '<tr>';
echo '<td>'.$cart["product_id"].'</td>';
echo '<td>'.$cart["product_name"].'</td>';
echo '<td>'.$cart["product_code"].'</td>';
echo '<td>'.$cart["quantity"].'</td>';
echo '<td>'.$cart["price"].'</td>';
echo '<td>'.$cart["totalPrice"].'</td>';
echo '<td><input type="button" name="add" id="remove" value="Remove" class="btn btn-danger btn-xs"/></td>';
echo '</tr>';
}
}
}
At this stage, none of jquery works. Please help how to enable jquery then how to activated the delete button. Please let me know if my explanation is not clear. I have added an images to explain more clear.

alter so you have a class for removal, for example
public function actionCart()
{
if(isset($_POST["Order"])){
.....
.....
$cartDetails = Yii::app()->session['cart'];
if(!empty($cartDetails)){
foreach($cartDetails as $cart){
.
.
.
echo '<td>'.$cart["totalPrice"].'</td>'; // see below line , class : REMOVETHIS
echo '<td><input type="button" name="doesntMatter" class="REMOVETHIS btn btn-danger btn-xs"/></td>';
.
}
}
}
then on page ready, remove it on click
$(document).ready(function(){
$('.REMOVETHIS').click(function(){
$(this).parent().parent().remove();
});
});
UPDATE:
the code below will only remove first row of table,
$('#cartDetails tr:first').remove();
and I'm guessing even this wont work, because jquery needs to be used after document ready. like :
$(document).raady(function(){
//put jquery related code in here
});
and like our friend said, you can NOT assign multiple elements with the same id, for that you better use classes,
and in this case because the row inserted to table is fresh, you need to state again
$('.REMOVETHIS').click(function(){
$(this).parent().parent().remove();
});
after you have inserted the row, or you can do this:
echo '<td><input type="button" name="doesntMatter" class="btn btn-danger btn-xs" onclick="removeRow(this)"/></td>';
and when that element is clicked, removeRow function will be called
function removeRow(element)
{
$(element).parent().parent().remove();
}

As how I solve my problem:
I have an order from where I place order for registrants. In the order form, there are 3 fields i select registration, select product, then quantity. There is a ajaxSubmitButton what sends this value to the controller (actionCart). Controller saves the value i.e. product id, name, price, quantity, total price in session and update the ajax request in tabular format to the order form. During echoing <tr>, <td> I added a button to delete item from session. So, I want to delete value of session as well as the row of table once click button. But button did not work because jquery did not work although I saw that jquery was loaded.
I found that ajax updated HTML did not work with earlier loaded jquery. So I changed the strategy that separated Updated HTML table (what I echoed in controller) in another view file and used renderPartial into the controller. I injected my required Jquery snippets into the view file. Then I found that jquery is responding with ajax requested HTML tags.
Now I am working forward to unset the session array and row of table using jquery and ajax.

How to print a html table in a separate window

I want to print a HTML table using some PHP data, in a separate window when I press a button. What is the best way to do it?
<table border="1">
<tr>
<td>MODEL</td>
<td><?php echo $modelNo ?></td>
<td>MODEL</td>
<td><?php echo $modelNo ?></td>
</tr>
<tr>
<td>QTY</td>
<td><?php echo $box ?></td>
<td>QTY</td>
<td><?php echo $box ?></td>
</tr>
</table>

Have the button open the new window, and set its location to the PHP file that prints the table.
Something as simple as this could work:
Click
(You can optionally style this link to look like a button)

You will need to have this table returnable from a PHP script, or available somewhere (I assume you already do).
Here is a purely html method:
Open Table!
Here is a javascript method:
<script type="text/javascript">
<!--
function myPopup() {
window.open( "http://path.to.my.page.com/mypage.php" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="Open table!">
</form>
<p onClick="myPopup()">CLICK ME TOO!</p>

You can also have the html in a hidden input and use a form submit to the other page and retrieve it from there with $_POST like assuming $table_data is your html:
<form action="new_window.php">
<input type="hidden" value="$table_data" name="data">
<input type="submit" value="Open Table">
</form>
Then in new_window.php:
if(isset($_POST['data'])){
echo $_POST['data'];
}

You can also create the entire solution in javascript by creating a new window and by writing the content in the window.
see the basic approach writing in a new window here:
http://www.w3schools.com/jsref/met_win_open.asp
and
Print the contents of a DIV
You would have to add an id attribute to your table
Then playing with DOM functions such as :
https://developer.mozilla.org/en-US/docs/DOM/document.getElementById
and
https://developer.mozilla.org/en/docs/DOM/element.innerHTML
You will have to wrap your table into a html. The main advantage of this method is that it can be called later on any table without the need to add a line of php.