So I am working on a registration system for the place I worked at this summer. I have a system where they can "add" things to a basket, but I figured that I also will need to give them the option to delete those items if they so wish. My question comes in here, is there a way to delete a record from the database and update the page in real time? I am using PHP, MySQL, and jQuery.
Adarsh is correct, use an Ajax post:
basic example of your cart page off the top of my head using jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
$(".deleteItem").click(function());
var dataString = "deleteID="+$(this);
$.ajax({
type: "POST",
dataType: "HTML",
url: "deleteScript.php",
data: dataString,
success: function(data) {
$("#LI"+$(this)).remove();
}
});
});
</script>
<ul>
<li id="LI1">
<input type="button" class="deleteItem" id="1"> 1st Item in your cart
</li>
<li id="LI2">
<input type="button" class="deleteItem" id="2"> 2nd Item in your cart
</li>
<li id="LI3">
<input type="button" class="deleteItem" id="3"> 3rd Item in your cart
</li>
</ul>
Then create the deleteScript.php page to handle the database interaction based on the deleteID you just posted to it.
Yes, use AJAX to fire a query to delete the item and once your method returns, update and clear the item from your basket.
Create a file which deletes items (e.g. delete-item.php?id=X&user_id=X,) and then reload their list of items. It should be as easy as that.
What you're looking for here is an AJAX solution that will POST an HTTP request to your server that results in a DELETE operation on your database.
The simplest way to do this is with one of the many AJAX frameworks out there, such as jQuery, Prototype, or Dojo.
It is vital that you do this with an HTTP POST and not a GET (which is what a simple link would do), because GET requests should never have a side-effect to their main function of retrieving data from a server.
You might want to Google the term CRUD (Create, Read, Update, Delete) along with HTTP to get some insight into this. Or just click here to save finger-work
Related
I am making a website that displays a list of hotels. I want to add a "favorite" button so that it stores that hotel with the user. From my understanding I need to use php/jquery based on some answers I saw on stackoverflow.
I have no experience with php/jquery. Absolutely none writing it or even adding some to my web page (this is the first website/web application I am trying to build.
After looking at a couple of stackoverflow answers on this topic I have checked out this website: http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59
and attempted to click on the recommended link for newbies: 15 Resources to get you Started with jQuery From Scratch.
but to no avail as the page is not found.
This is the html where I want to add the favorite button stored in "Bookmark for later". However, I know hypothetically even if my click worked I am not capturing the data of the specific hotel for which they clicked bookmark for later.
{% for hotel in close_hotels %}
<div id = "display_hotel">
<p><font color="blue" size="2"><b> {{ hotel.name }} </font></b></p>
<div id = "hotel_format">
<div id = "favorite_form">
<input id="bookmark" type="button" value="Bookmark for later!"
onclick= "function()"/>
</div>
This is my .js file. I tried following http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59 as best as I could, but recognized some differences. For example I am trying to capture information from a button(should I change this) instead of a form.
I didn't bother with the form validation since it is just a button.
$(function() }
//using a button to add hotel to favorites
$(".button").click(function() {
var hotel = $("input#bookmark").val();
//skipping form validation since no need -- using a button
});
});
//next part of the tutorial
$.ajax({
type: "POST",
url: "bin/process.php",
data: hotel,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Hotel Favorited!</h2>")
.hide()
});
}
});
return false;
Ultimately there are two things I am wondering. Is a button most appropriate for what I am seeking? If not, what else should I use, but if so how can I capture the hotel information with the PHP. Second of all as I am not familiar with php/jquery will the code work?
From my understanding this line should be able to capture the hotel name I want, but again I don't even think my button would even send the information.
var hotel = $("input#bookmark").val();
Thanks for the help!
There are two main ways to submit information to the server (your PHP code):
Using an HTML <form>
AJAX
I'm guessing you want to do it via AJAX since you're not sending typical form data. For that you would do something like this in jQuery:
var req = $.ajax({
type: "POST",
url: "http://whatever.com/stuff",
data: { "some_key": "some_value" }
});
req.done(function (response) {
// code to run after the server handles your data and responds
});
req.fail(function(jq_xhr, text_status, error_thrown) {
// if you want to handle errors ...
});
I am working with a mobile application in which
first page has
Html
<ul>
<li>121212</li>
<li>123233</li>
<li>232323</li>
<li>4323423</li>
<ul>
when user click on "li" then he/she entered on next page which will retrieve data related to selected "li" via Ajax.
this is almost going good..
But when Ajax response come page is fluctuating 2 times.
Means one time page loading, next time page totally white and then again showing page with Ajax response.
Why ???
J query
$("clickOnLi").click(function(){
var id= $(this).val(); //get the selected li value
$('.loadingGif').css({ 'display':'block' });
$("#ulShowContent").html(''); // to remove old inner HTML to show new result html
var dataString = 'selectedid='+id;
$.ajax({
type: "POST",
url: remoteUrl+"handler.php",
data : dataString,
cache: true,
success: function(response) {
if(response){
$('.loadingGif').css({ 'display':'none' });
$("#ulShowContent").html(response);
}
}
});
})
**and the result will show in this html**
<ul id="ulShowContent" data-role="listview">
<li class="comment chatsend">
<div class="comment-meta">
data 1
</div>
</li>
<li class="comment chatsend">
<div class="comment-meta">
data 2
</div>
</li>
</ul>
You will need to change how you deal a page change and AJAX call.
What I have understand from your question, after click on LI element, page change is initialized and AJAX call is sent to a PHP server.
You will need to change this logic. Page fluctuations are cause by AJAX call which is executed during the transition from one page to an another.
This can be fixed like this:
On a first page remove HREF attribute from a list element
Add a click event to every list element
AJAX call should be executed on click event, at a same time show your custom loader (or use a default one)
When server side data is retrieved you need to store it so it can be accessed from an another page. Here you will find my other ANSWER where you can find various methods of storing data during page transitions, or find it HERE, just search for a chapter called: Data/Parameters manipulation between page transitions (your best bet is a localstorage).
Initialize a page change with changePage function
During a pagebeforeshow event (page is not yet displayed) append new data to the new container
When second page is finally shown everything will be there and
I'm making a blog type webpage, with a div that has a 'like' and 'dislike' button, and a rating above which is a mysql query of likes/(likes+dislikes). When a user clicks like or dislike, I want to add their vote to the db, and dynamically change the rating value without reloading the page. Here's a little snippet of the html, I have barely worked with javascript, so any help would be great.
<div class="narrow_right_container">
<?php
$popularity = get_popularity($row);
?>
<div class="yellow_bg">Rating: <?php echo $popularity . "%"; ?></div>
<div style="margin-left:2px;">
<div class="dislike">
<img src="ui_images/dislike.png"/>
<span>Dislike</span>
</div>
<div class="like">
<img src="ui_images/like.png" />
<span>Like</span>
</div>
</div>
</div>
You would not actually be changing a PHP value--once the page is output to the browser, consider PHP gone--you can't interact with it because it's on the server. Instead, think of interacting with the document that's in the browser.
The best way to do this is to make an ajax call to a server-side script. That server-side script can commit the like or dislike to the database, and then return the new rating, which you can insert in place of the old one using javascript.
You'll probably want to check out some tutorials on javascript and ajax, as it seems you have a more general need for a tutorial than for a specific problem. In other words, if you fill in your knowledge gaps on the general subject, you'll be able to solve your specific problem quite easily.
You will want to create some PHP code for handling the saving to the database on the Server side. You will POST the like / dislike value information to this server side script. If possible, I would use jQuery's AJAX helper to post data to the PHP page you just created.
Something like this:
$.ajax({
url: "whatever.php",
type: "POST",
data: {Like: true},
success: function(data){ /* update view */}
});
You will have to use ajax to accomplish this. Its not possible to alter PHP variables VIA javascript.
You will have to call an Ajax function that will handel the database work and after its done that, you will have to update the count using javascript. This will give the allusion that the count was updated while the count will also be updated in the database (from the Ajax)
Here is a great example of how you could accomplish this:
Example Code
Live Demo
$('.like').click(function(){
rate(1);
})
$('.dislike').click(function(){
rate(-1);
})
function rate(_val){
$.ajax({
url: 'ajax/rate.php?val='+_val,
success: function(data) {
alert('Rate was performed.');
$(".narrow_right_container").find(".yellow_bg").append("Rating: "+data+"%");
}
});
}
in rate.php:
if(isset($_GET['val'])){
$sql = "UPDATE.........."; //do an update to your rate table
echo get_popularity($row); //return rating to ajax
}
I have following code in my php page. These are two tabs Inbox and sInbox. When user clicks on them it refreshes whole page to go to other tab. Is there a way to make these tabs so that when user click on one of the tab there is no page refresh? When answering please provide full code example as i am a beginner.
<ul id="topTabs">
<li class="selected"> Inbox </li>
<li> sInbox </li>
</ul>
One of the simplest ways would be using jQuery UI tabs. You can find a nice detailed beginner-friendly tutorial here.
I wouldn't say that you need ajax to do this. Ajax is only needed when you want to load content of these tabs dynamically.
Do realize your tab-switching you can use jQuery or simply the style-property "display:block" resp. "display:none".
It's very hard to provide some code for your question (because you need to change your page structure) but as a hint, you need to use jQuery ajax or php ajax update panel (if there is something like this - I know there is one for ASP.NET) to refresh some parts of your page (instead of whole).
In the earlier case (jQuery) your links will not be redirection links and will have a click action associated to them which requests for page update using ajax.
see the link for examples of using ajax using jQuery.
You can do it easly using ajax:
$(document).ready(function() {
$("#topTabs li").click(function() {
var mode = $(this).find("a").attr("href");
$.ajax({
url: 'contentprovider.php',
data: {mode:mode},
success: function(data){
$('#tab1').html(data);
}
});
});
});
Where tab1 is the ID of the element wich may receive the content from contentprovider.php
More info on jQuery Ajax at jQuery Page.
gl
Paulo Bueno.
In order to show you what I want to do you just have to visit gmail. When you click on the inbox, the url refreshes to this ?tab=mm#inbox and the only part of the page that refreshes is the big part where your e-mails are which google calls div.l.m . How is that possible? Are they using cache a lot or they are using a javascript command I'm not aware of?
What I want to do is, I have a page with two different tabs.
<div id="navcontainer">
<ul id="navlist">
<li id="active">Products</li>
<li><a id="prreq" onclick="show()" >Requests</a></li>
</ul>
</div>
<div class="container"></div>
When users go on eg. cart.php they are going to the first tab. When users click on the second tab a js function is triggered which calls the file cart.php?rq=r and the results are shown in the container div. (I know that at the moment I have post)
function show(){
var prstr= ".container";
var data= {
rq: "r"
};
$.ajax({
type: 'POST',
url: "cart.php",
data: data,
success: function(data1)
{
$(prstr).html(data1);
}
});
}
What I want is when the user refreshes the page to still be in the cart.php?rq=r and not having to click on the tab again.
I'd appreciate any help. if you need any more information please let me know
Thank you in advance.
They are simply accessing the hash component of the url via location.hash. When the hash changes, they must have some logic that determines which part of the page to refresh.