I am using a lot of jQuery in a project am working on.
I have a javascript function that makes an ajax request to a controller which returns data in JSON.
I would like to display a user friendly message informing the user that he/she has no information stored yet. But I'm confused as to how to send a response in JSON so my javascript function can determine whether the user has information to be displayed.
Here is my javascript function:
function latest_pheeds() {
var action = url+"pheeds/latest_pheeds";
$('#pheed-stream').html('<div class="loading"></div>');
$('.loading').append('<img src="'+pheed_loader_src+'" />');
$.ajax({
url:action,
type:'GET',
dataType:'json',
error: function () {
},
success:function(data) {
$('.loading').fadeOut('slow');
$.each(data,function(index,item) {
$('#pheed-stream').append
(
'<div class="pheed" id="'+item.pheed_id+'">'+
'<p><a class="user_trigger" href="users/info/'+item.user_id+'">'
+item.user_id+'</a></p>'+
'<p>'+item.pheed+'</p>'+
'<div class="pheed_meta">'+
'<span>'+item.datetime+' Ago</span>'+
'<span class="cm">'+item.comments+
'<img class="comment_trigger" src="/pheedbak/assets/img/comment.png" title="Click to comment on pheed" onclick="retrieve_comments('+item.pheed_id+')">'+
'</span>'+
'<span>'+item.repheeds+
' Repheeds'+
'<img class="repheed_trigger" src="/pheedbak/assets/img/communication.png" title="Click to repheed" onclick="repheed('+item.pheed_id+')">'+
'</span>'+
'<span>'+
'Favourite'+
'<img class="favourite_trigger" src="/pheedbak/assets/img/star.png" title="Click to make this a favourite" onclick="favourite_pheed('+item.pheed_id+')" />'+
'</span>'+
'</div>'+
'</div>'
);
});
}
});
}
And heres the controller function the ajax request is made to
function latest_pheeds() {
//Confirm if a user is logged before allowing access
if($this->isLogged() == true) {
//load the pheed model for database interaction
$this->load->model('pheed_model');
//load user model
$this->load->model('user_model');
//load comment model
$this->load->model('comment_model');
//store the pheeds to a the $data variable
$data = $this->pheed_model->get_latest_pheeds();
//Load the date helper to calculate time difference between post time and current time
$this->load->helper('date');
//Current time(unix timetamp)
$time = time();
//pheeds
$pheeds = array();
if(count($data) > 0 ) {
foreach($data as $pheed) {
$row['pheed_id'] = $pheed->pheed_id;
$row['user_id'] = $this->user_model->return_username($pheed->user_id);
$row['pheed'] = $pheed->pheed;
$row['datetime'] = timespan($pheed->datetime,$time);
$row['comments'] = $this->comment_model->count_comments($pheed->pheed_id);
$row['repheeds'] = $pheed->repheeds;
$pheeds[] = $row;
}
echo json_encode($pheeds);
$response['response'] = "Ok";
$res[] = $response;
echo json_encode($res)."\n";
}
} else {
}
It generates the JSON output,but the syntax is broken so i cant read it with javascript,
but once i get rid of the following code from the above method it works normally
$response['response'] = "Ok";
$res[] = $response;
echo json_encode($res)."\n";
You MUST only use json_encode($data) once in a response, if you want to output more stuff, you need to merge your data into one array and send that.
EDIT: To be clear, one way you could do it is like this:
echo json_encode(array('pheeds' => $pheeds, 'res' => $res));
Then in JS you will get an array with the keys "pheeds" and "res".
Although it may be of little practical significance, I would also recommend doing this before you echo the json encoded string:
header('Content-Type: application/json');
Related
I am developing a eCommerce website in php without any cms. I have done approx all things, but I am facing a problem in add to cart page. I want to display a successfully message after add to cart with session variable. Please suggest me.
Here is my code:
<?php
session_start();
include('dbfunctions.php');
$id = $mysqli->real_escape_string($_GET['id']);
$category_id=$mysqli->real_escape_string($_GET['category_id']);
?>
<?php
$current_url = base64_encode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$products=$mysqli->query("select * from product_details where id=$id and category_id='$category_id'");
if(count($products)>0)
{
$obj=$products->fetch_object(); {
echo '<form method="post" action="cart_update.php">';
echo '<img src="../image/product/'.$obj->pic.'"class="img-responsive" style="width:100%;height:300px;">';
echo ucwords($obj->product_name);
echo $obj->material;
echo $obj->product_code;
echo $obj->area;
echo $obj->width;
echo $obj->rolls;
echo $obj->features;
echo '<button id="button-cart">Add to Cart</button>';
echo '<input type="hidden" name="id" value="'.$obj->uid.'" />';
echo '<input type="hidden" name="type" value="add" />';
echo '<input type="hidden" name="return_url" value="'.$current_url.'" />';
}
}
?>
mysqli_query Returns FALSE on failure and for successful queries if will return TRUE. You can't use it for count
So instead of this
$products=$mysqli->query("select * from product_details where id=$id and category_id='$category_id'");
if(count($products)>0)
you need to count number of rows
$row_cnt = $products->num_rows;
if(count($row_cnt)>0)
if ($success){
$message = "Sent! Thank you";
} else {
$message = "Ops! Try again!";
}
?><script>
prompt(<?php echo json_encode($message); ?>);
</script>
<noscript>
<p><?php echo htmlspecialchars($message); ?></p>
</noscript>
Note: Given a string for input, json_encode will output a JavaScript string literal that is safe for inclusion in an HTML script element. It will not output JSON.
While the strings themselves don't contain any special characters, it is a good habit to run this sort of XSS protection against anything you output that isn't explicitly HTML/JS/etc.
Or try this
<?php
if ($success) {
$message = "Added! Thank you.";
} else {
$message = "Oops...";
}
echo '<div id="message">'.$message.'<div id="close-button"></div></div>';
?>
This way you can style your message like you want to (like positioning it absolutely). But you would have to implement the close button in javascript if the div is positioned absolute. I hope this helps
For display this type message toast is fit to your requirement.
http://codeseven.github.io/toastr/demo.html
You could use jQuery for this and ajax to your page as such:
jQuery
var itemName = $( "#itemName" ).val(); //Get the value using the ID of the input
var itemPrice = $( "#itemPrice" ).val(); //Get the value using the id of the input
$.ajax( {
url: "myphpscript.php?itemName=" + ietmName + "&itemPrice=" + itemPrice, //Specify your url to go to (an abosulte path to the php script to run)
type: "GET", //Specify the type, can be GET or POST
success: function ( response ) //Set the success function
{
if (response == "true") //Check the response it "true"
{
alert( "Item addded to cart!" ); //Show success message
return;
}
//response == "false" handler
alert( "Failed to add item to the cart" ); //Show fail message
return;
}
} );
PHP CODE
function addToCart()
{
if (!isset($_REQUEST['itemName']) || !isset($_REQUEST['itemPrice']))
{
return "false";
}
//Add to cart code with `return "true";` or `return "false"` checks
return "true";
}
I hope this goes some way to helping you :)
I'm performing an Ajax request to a php file called save_tags.php this is the content of the file:
$id = $_POST['id'];
$name = $_POST['name'];
$type = $_POST['type'];
$tags = json_decode(stripslashes($_POST['tags'])); //Should be an Array but is a String...
$removeTags = json_decode(stripslashes($_POST['removeTags']));
//Type can be company, contact, column, supplement, programme.
if($type == 'company'){
$tagObject = new DirectoryCompany($id);
}elseif($type == 'contact'){
$tagObject = new DirectoryContact($id);
}elseif($type == 'column'){
$tagObject = new Column($id);
}elseif($type == 'supplement'){
$tagObject = new Supplement($id);
}elseif($type == 'programme'){
$tagObject = new Programme($id);
}elseif($type == 'list'){
$tagObject = new DirectoryContactList($id);
}
//Add and Remove Tags by looping through the Arrays.
foreach($tags as $tag){
$tagObject->addTag($tag, $id);
}
foreach($removeTags as $tag){
$tagObject->deleteTag($tag, $id);
}
//Get the tags associated with the object
$tagarray = $tagObject->getTags($id);
// Add Tags to All contacts on the list
$tagObject->getAllcontactsAndAddTags($id);
//Build HTML output
$output = "<ul>";
foreach($tagarray as $tag){
$output .= "<li>". $tag .'[X]'."</li>";
}
$output .= "</ul>";
echo $output;
?>
The purpose of the file is to apply the tags a user has checked and apply them to the object being worked on. Currently the above code is working, as in the tags are being applied and saved. however what is not working is that the $output variable is not being echoed and I can't figure out why.
Also when I check my console via the browser window I can see that there was a 500 error when requesting the file.
I'd appreciate any help.
<ul> this is tag html, check source page
and check alert(data)
$.ajax({
type: 'POST',
url: 'url',
data: { },
success: function(data) {alert(data)}
});
$output = "<ul>";
foreach($tagarray as $tag){
$output .= "<li>". $tag .'[X]'."</li>";
}
$output .= "</ul>";
echo $output;
if $tagarray is null echo = <ul></ul> invisible on the page
500 errors usually means that there's something wrong with your php code. Make sure that the code doesn't error out. Try to go to it in your browser and confirm that there are no errors.
First, try to put a few var_dumps here and there to see if you data is correct. An statuscode 500 means that there was most likely a fatal error in your script. This can be either in this php file or in one of your classes.
Most likely you will find the answer in a few minutes. To check if your script even works, try to echo some simple like "test" and comment everything else.
Working on a like/dislike function for my blogpost site, and the variables won't flow through. I've stared at this for days, and cannot find the break as all of the code looks fine and I've included all the necessary pages containing varibales. Any insights?
This is the "button" I'm using for a "like" button:
Like <span id="likes" class="likereadout">' . $likes . '</span>
The id variable shows up correctly when I "inspect element", but won't pass through to the following Javafunction:
function like_add(postid) {
$.post('like_add.php', {postid:postid}, function(data) {
if (data == 'success') {
alert('Woohoo');
} else {
alert('I need sleep.');
}
});
}
The Javascript is supposed to pass the variable to like_add.php, which reads:
<?php
include 'init.php';
if (isset($_POST['postid']) && article_exists($_POST['postid'])) {
$postid = $_POST['postid'];
if (previously_liked($postid) === true) {
echo 'You\'ve already liked this!';
} else {
add_like($postid);
echo 'success';
}
}
?>
Which refs the following php functions included in the init.php file:
function article_exists($postid) {
$postid = (int)$postid;
return (mysql_result(mysql_query("SELECT COUNT('id') FROM 'blabbing' WHERE 'id' = $postid"), 0) == 0) ? false : true;
}
and:
function add_like($postid) {
$postid = (int)$postid;
mysql_query("UPDATE 'blabbing' SET 'likes' = 'likes' + 1 WHERE 'id'= $postid");
mysql_query("INSERT INTO 'likes' ('user_id', 'id') VALUES ($ip, $postid)");
}
Realllll new to all of this, so please go easy on me. Thank you so much for your help!
function article_exists($postid) {
$postid = (int)$postid;
return (mysql_result(mysql_query(
When you send AJAX data throught $.post, it have to be stringified:
$.post('like_add.php', JSON.stringify({postid:postid}), function(data) {
I have a problem when using jQuery Post, the PHP returns all the HTML of the page up to the newly created HTML, rather then just the HTML that is output by the PHP.
As an example say the php outputs: '<div>Some Content</div>'
Then the jQuery Post returns: '<html><head>...all the head content...</head><body>...other content...<div>Some Content</div>'
Here's the jQuery (link to full code: http://pastebin.com/U7R8PqX1):
jQuery("form[ID^=product_form]").submit(function() {
var current_url = js_data.current_url;
form_values = jQuery(this).serialize();
jQuery.post(current_url+"?ajax=true", form_values, function(returned_data) {
jQuery('div.shopping-cart').html(returned_data);
}
});
return false;
});
And here's the PHP (version 5.3.6 - link to full code: http://pastebin.com/zjSUUbmL):
function output_cart()
{
ob_start();
echo $this->output_cart_html();
$output = ob_get_contents();
ob_end_clean();
echo $output;
exit();
}
function output_cart_html() {
if (!isset($_SESSION['cart_items']))
{
$output = '<div class="cart_content faded">BASKET - Empty</div>';
return $output;
} else {
$total_items = 0;
$total_items = 0;
$items_in_cart = $_SESSION['cart_items'];
// work out total price and total items
foreach ($items_in_cart as $item_in_cart) {
$total_items += $item_in_cart['quantity'];
$total_price += floatval($item_in_cart['updated_price']*$item_in_cart['quantity']);
}
$template_url = get_bloginfo('template_directory');
$output = '';
$output_price = $dp_shopping_cart_settings['dp_currency_symbol'].number_format($total_price,2);
if($total_items == 1){ $item_text = ' Item'; } else { $item_text = ' Items'; }
$output .= $total_items . $item_text;
$output .= ' <span class="bullet"></span> Total '.$output_price;
// empty cart btn
$output .= '<form action="" method="post" class="empty_cart">
<input type="hidden" name="ajax_action" value="empty_cart" />
<span class="emptycart"> <img src="'.$template_url.'/images/empty.png" width="9" height="9" title="Empty Your Items" alt="Empty Your Items" />Empty Your Cart</span>
</form>';
// check out btn
$output .= ' <span class="bullet"></span> <span class="gocheckout">'.$this->output_checkout_link().' </span>';
return $output;
}
}
You need to check if the form has been posted yet with the PHP. To do this, just check if the 'ajax' parameter is there, or send another $_GET variable if you wish (by adding &anotherparementer=1 to the end of the jQuery post URL). Example:
<?php
if(isset($_GET['ajax'])) {
//your PHP code here that submits the form, i.e. the functions that you have, etc.
}
else {
?>
<html>
<head>
head content here...
</head>
<body>
body content here...
</body>
</html>
<?php
}
?>
I hope this helps.
Ok it turns out my problem was with the way Wordpress processes AJAX requests. The plugin I was building on top of was using AJAX but didn't have these issues (I'm not sure why maybe because they were using eval), so I hadn't realised there was a correct way of using AJAX with Wordpress. Here's a bunch of information if anyone else has similar problems:
http://codex.wordpress.org/AJAX_in_Plugins
http://byronyasgur.wordpress.com/2011/06/27/frontend-forward-facing-ajax-in-wordpress/
(this one really helped me out, a very simple example that I was able to adapt)
-- sorry I couldn't post more links because I'm too new on this site, but check out the links at the bottom of the first link above, especially the '5 Tips'.
As I'm using classes I instantiated the class from the index file of my plugin with this:
if ($_POST['action'] === 'action_name') {
$class_obj = new \namespace_name\class();
add_action('wp_ajax_action_name', array($class_obj, 'method_name'));
add_action('wp_ajax_nopriv_action_name', array($class_obj, 'method_name'));
}
I am trying to allow the users of my website, to upload images and then select one to be a back image, the uploading works fine, but I have a problem in my controller or view I think, i would appreciate it some could help me out,
VIEW:
<div id="background-select">
<?php
$count = 0;
if(isset($special)) {
foreach ($special as $row) {
print '<div class="select">';
print "<a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'>$count</a>";
print '</div>';
$background = $row['background_name'];
echo $background;
}
}
if(isset($generic)) {
foreach ($generic as $row) {
print '<div class="select">';
print "<a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'>$count</a>";
print '</div>';
$background = $row['background_name'];
echo $background;
}
}
if(isset($user_background)) {
foreach ($user_background as $row) {
print '<div class="select">';
print "<a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'>$count</a>";
print '</div>';
$background = $row['background_name'];
echo $background;
}
}
?>
</div>
<script type="text/javascript">
$("a.background_btn").click(function(ev){
ev.preventDefault();
alert("hello");
var url = $(this).attr("href");
alert(url);
$.ajax ({
url : url,
type: "POST",
success : function (html) {
alert("<?php echo $background; ?>")
$('#wrapper').css('background', 'url(/media/uploads/backgrounds/<?php echo $background; ?>)');
}
})
});
</script>
<div id="wrapper">
CONTROLLER:
public function set_background() {
$this->load->model('image_model');
if($query = $this->image_model->get_background_by_id($this->uri->segments[3])) {
//die(var_dump($query));
foreach ($query as $row) {
$data['background'] = $row['background_name'];
}
}
$this->load->view('template/background-select', $data);
}
The problem is that I can only set the background to the first returned value for example if the first loop return $background to = red.png then I cannot get anything but red.png to load in.
Can any one suggest a solution?
You appear to load a background using AJAX. However, you set the value of $background in the initial request, and the 'success' method of your AJAX call never uses the returned HTML. Only the background that was originally set when the page was first loaded. You should make sure your AJAX call returns the background, so you can use that in your javascript. Don't try to set the background in your 'success' method using PHP.
Also, not sure about this though, but your controller seems to set a single property $data['background'], overwriting it every iteration of the foreach instead of creating an array or hashmap.
I think you should keep separate PHP and JS. After completed upload process you can redirect (or show dynamically by using AJAX) uploaded images page. After user clicked an uploaded image just change background attribute maybe like this:
<div id="back">
<img src="foo.jpg" alt="..." />
<img src="bar.jpg" alt="..." />
...
</div>
$(function(){
$("#back img").bind("click", function(e){
var src = $(this).attr("src");
$("#back").css({"background-image": "url(/images/" + src + ")"});
});
});