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.
Related
I am working on a grading system and I want it so that you can add the grade of a student on a text box with a button then after submitting it, the text box and the button will then immediately change to the resulted answer, WITHOUT refreshing the page
Kind of similar to how one adds a value in Excel
I want to be like this:
Before entering grade:
before
After entering grade:
after
My current code is this, but this only works because I have to refresh the page
<?php
if($row['grade'] == '0')
{
?>
<td>
<label for="">Grade</label>
<input type="text" name="grade" id ="grade" class="form-control">
<button type="submit" name="add_grades" id = "add_grades" class="btn btn-primary"> Add Grade </button>
</td>
<?php
}
elseif(!$row['grade'] == "0")
{
?>
<td>
<?=$row['grade'];?>
</td>
With your approach it is impossible. You need to separate your Serverside code from the clientand use Ajax requests for this. The easiest way (but the ugliest) is to move the backend code to insert the grade in a db into a separate php file and call it via ajax. Ajax is a whole topic and I could write the code here, but it will be too large and meaningless. You need to change a lot.
Here are some links you could try to explore about ajax :
MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX
Video Tutorial: https://youtu.be/tNKD0kfel6o
I have a button that appears when you hover over a certain row of a table. How would I edit that specific row with a button when I click on the button? Currently I'm making the buttons appear and disappear with css:
button.editBtn{ visibility: hidden;}
tr:hover button.editBtn { visibility: visible;}
My html code for the table is:
<div class="well">
<h2>Grocery List</h2>
<table class="table table-striped table-bordered table-condensed table-hover">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<?php
$item_array;
$index = 0;
$index_2 = 1;
$r = "r";
$b="b";
foreach ($item_array as $id_array){ ?>
<tr id="r<?php echo $r.$index_2; ?>">
<td><?php echo $item_array[$index] ?></td>
<td> <?php echo $quantity_array[$index] ?></td>
<td>
<form method='POST' action='edit.php'>
<?php echo $price_array[$index];?>
<div id="editButtons">
<button type="button" id="e<?php echo $r.$index_2; ?>" style="align-content:right;" class="editBtn btn btn-sm btn-warning"><span class="glyphicon glyphicon-edit"></span></button>
<button type="button" id="d<?php echo $r.$index_2; ?>" style="align-content:right;" class="editBtn btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></button>
<button type="button" id="s<?php echo $r.$index_2; ?>" style="align-content:right;" class="editBtn btn btn-sm btn-success"><span class="glyphicon glyphicon-circle-arrow-right"></span></button>
</div>
</form>
</td><?php
$index++;
$index_2++;
echo "</tr>";
} ?>
</table>
</div>
</div>
Well, you will have work a little... As jQuery is on your question's tags, I will assume that you're using it.
Put a different event for each button, as the buttons will do different actions.
In the Javascript event of the delete button, I would hide the line fading it out, then calling a PHP script through AJAX to remove the database register and removing the HTML (calling jQuery remove method) after the AJAX successful return (of course, ask to user for confirmation before doing all of this).
To get the edit button working, I see two good options:
Put a form with the fields in the table and fill them with the correct values and let them with display: none, all by PHP.
or
Create the form and the fields and populate them, all by Javascript, on the click of the edit button.
Personally, I prefer the first option, but if you will have a REALLY BIG table, maybe is a good idea to create the form and the fields dynamically to reduce the HTML size.
Anyway, in the click of the edit button, you will need to show the columns of the edit fields (that currently don't exists in your code), hide the buttons and show another: the confirmation button.
I think you could also use disabled edit fields to display the data, manipulating it to appear a normal text, and then removing the design manipulation and the disabled attribute at the edit button click, but I never used this approach, so I'm not sure if that will work or if there are glitches in any browser.
Got it?
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.
I'm new to Wordpress and new to JQuery, so let me start off explaining what I am trying to do.
I have an admin page, inside this page I'm giving the user the ability to upload an image. I want this done using Ajax (independent from the general form update).
Here is the code I have so far:
At top of page - script includes:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js">
I can confirm these scripts are "pingable" and work.
Now the HTML code :
<table width="100%">
<tr>
<td width="100" style="padding:10px" valign="top">Email Image (180x180):</td>
<td style="padding:10px"><img id="previewEmailImage" width=180 height=180>
</td>
</tr>
<tr>
<td></td>
<td>
<div id='emailpreviewloader'>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<form id="imageform" method="post" enctype="multipart/form-data" action="/ajaximage.php">
<input type="file" name="photoimg" id="photoimg" />
</form>
</td>
</tr>
</table>
The key things in the HTML is a) a form and b) The div emailpreviewloader.
Now just after the html table, inline I have the following js:
<script type="text/javascript">
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
$("#emailpreviewloader").html('');
$("#emailpreviewloader").html('<img width="180" src="/loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(function(result)
{
alert("Thank you for your comment!");
});
});
});
</script>
for testing purposes ajaximage.php just contains 1 line: Echo "It worked";
So assuming I've done my job right, and the html + js above is correct, it would seem Wordpress might be hijacking the Ajax somehow and preventing it from working as expected. Is this possible?
All I want to do is have a regular Ajax post, how is this possible?
EDIT:
What is working:
The change event for the file upload control is firing. I've confirmed this with an alert, and the loader.gif is visible. But it would seem the form isn't firing, or not firing correctly. The inner alert, never fires.
If you don't want to use wordpress's functions for ajax calls, try sending the form to action="<?php bloginfo('template_url');?>/ajaximage.php" and make sure the file is in the root of your wordpress instalation.
I was wondering if there is a way to use a traditional javascript confirmation box with the scala html templates in the play framework.
#for(item <- listItems) {
<li>
<b>Item: </b>#item.name<br>
#form(routes.Application.deleteItem(item.id)) {
<input type="submit" value="Delete" class="btn btn-danger">
}
</li><br>
}
That is the view I am working with at the minute. As you can see from the code it brings up list of "item" objects and a delete button appears beside each of them. I just wanted to prompt some sort of confirmation dialog before the deleteItem method actually gets called.
I know how to do this with some standard HTML and javascript but thats only for modifying html elements, is there away to do this using the play form helpers?
Thanks
Why not? :)
Actually I think you don't need to use single field form for this task, you can just use common link (of course it should point to GET route, also consider adding some hash to params, to prevent accidental deleting):
<a href="#routes.Application.deleteItem(item.id)"
class="btn btn-danger" onclick="return confirm('Are you sure?');">Delete</a>