How can I refresh a PHP file with itself using Ajax?

How can I refresh a PHP file with itself using Ajax? - javascript

Alright guys I'm trying to make a filter system for posts using ajax and a select box. I am able to get the value from the select box no problem. But my issue is that when I try to include the selected value in my PHP file it doesn't do anything. I have a file called public_wall.php. This file contains PHP, Javascript, and HTML. How can I refresh this div whenever a user selects a different filter option? Basically I need the selected value to be passed onto my public_wall.php file and then I want to plug it into the PHP function that fetches the posts thats's in the same file and then I want to refresh that same file to display the filtered results. Here is my Javascript code.
$("#postRatings").on("click", function(e) {
selectedRatingFilter = $("#postRatings option:selected").val();
var dataString = "timeFilter="+selectedRatingFilter;
jQuery.ajax({
type: "POST",
url: site_url+"public_wall.php",
data: dataString,
dataType: "json",
cache: false,
success: function(response){
hideSpinner();
jQuery('#postsPagingDiv').remove();
jQuery('#wsc_midbox').html(jQuery(response.htmls).fadeIn(400));
setpost_ids(response.all_post_id);
jQuery('#paging_in_process').val(0);
}
});
});
When the dataType is set to "json" nothing happens. But when it is set to html it prints some javascript code. Please help. The PHP file is too large to include here, but it basically contains PHP, HTML, and Javascript and some PHP functions that do sql queries. What is the best way to achieve a filter mechanism for my setup?
And on the public_wall.php file I want to get the value like so:
$ratingFilter = isset($_REQUEST['timeFilter']) ? intval($_REQUEST['timeFilter']) : 0;
And then plug it into the PHP function that fetches the posts which is in the public_wall.php file also so that I can filter the posts based on the selected value. And then finally I want to refresh the public_wall.php file with the new results. I hope that makes sense. Please help.
This is the output when I set my dataType to "html"
<script>
function refreshPosts() {/* only posts comments likes and count updated. */
var posts = jQuery("#all_post_id").val();
var arrays = posts.split(',');
var dataString = "postids="+posts;
jQuery.ajax({
type: "POST",
url: site_url+"includes/update_wall.php",
data: dataString,
dataType: "json",
cache: false,
success: function(response) {
var x = response;
//############ skip posts whose comments are being read by users
var ExemptedPostsIDs = jQuery("#exemptedPostsID").val();
var ExemptedArray = ExemptedPostsIDs.split(',');
ExemptedArray = ExemptedArray.sort();
//////////////
for (i=0; i<arrays.length; i++) {
var val = 'row'+arrays[i];
if(x[val]) {
if(!inArray(arrays[i], ExemptedArray))
jQuery("#ajax_wall_"+arrays[i]).html(x[val]);
} else {
jQuery('#PostBoxID'+arrays[i]).parent().fadeOut(500);
}
}
}
});
}
function inArray(needle, haystack) {
var length = haystack.length;
for (var i = 0; i < length; i++) {
if(haystack[i] == needle) return true;
}
return false;
}
function refreshWall() {/* loads new posts real time */
var posts = jQuery("#all_post_id").val();
var pageUsing = jQuery('#pageUsing').val();
var dataString = "update_posts=1&postids="+posts+'&pagex='+pageUsing;
jQuery.ajax({
type: "POST",
url: site_url+"public_wall.php",
data: dataString,
dataType: "json",
cache: false,
success: function(response) {
if(response.all_post_id) {
jQuery('#wsc_midbox').prepend(jQuery(response.htmls).fadeIn(400));
setpost_ids(response.all_post_id);
}
}
});
}
</script>

I suggest you keep the form with select element and any JavaScript on the outer frame.
Via ajax, only load the results to a seperate DIVision below that.
When you put an Ajax response to a div, any JavaScript inside it will not be executed.
For the best throughput with Ajax, you should consider loading a json response via Ajax and create HTML elements on the client side. That way it becomes much easier to pull additional variables to front-end JS from server side along with the same request/response.
But that becomes bit difficult when you have a template engine in the back-end. You can still send the HTML content in a json value, so you can easily pass the "all_post_id" as well..

Related

Security issues while sending variable from Javascript to PHP

I'm developing JavaScript game. I need to insert some records (such as score, time, level, etc.) to database.
To do It I can use JavaScript in following:
function jsFunction() {
var jsScore = 1000;
window.location.href = "file.php?score=" + jsScore;
}
And in PHP file I could use $_GET['score'];
But looks like this way is not secure, user could change score at address bar directly in browser. Am I wrong?
How could I do It in more secure way?

Maybe sending the data via AJAX post would be more appropriate. Technically the user could still edit it using the dev console but it much less visible.
<script>
function jsFunction() {
var jsScore = 1000;
$.post( "file.php", { score: jsScore})
.done(function( data ) {
alert( "Data Loaded: " + data );
});
}
</script>

You can make use of the jquery library and send the ajax request to the php page. like below.
function jsFunction() {
var jsScore = 1000;
$.ajax({
method: "POST",
url: "file.php",
data: { score: jsScore }
}).done(function(response){
//you can perform some activity after score saved etc..
}).fail(function(response){
//you can perform some activity if score do not saved etc..
})
}
then you can access the score using $_POST['score']; in php.

Try sending data in post using ajax. This will not show data in url and is also secure as the data passes in post.Here is the code
var score = '1000';
var time = '10';
$.ajax({
url: 'file.php',
type: "POST",
data: {score: score, time: time,},
success: function(posData) {
// success code here
},
});
In file.php you can get all parameters in
print_R($_POST);

Javascript get current page html (after editing)

I have a page that I have edited after load and what I want to do is get the pages current HTML and pass that off to a PHP script.
I first passed document.documentElement.innerHTML but that ended up including a bunch of computed style garbage at the top which I did not want. After googling around I found I could use ajax to get a copy of the current file on the server and then replace the edited part afterwards.
I can get the copy of the file using this:
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
$.ajax({
url: filename,
async: false, // asynchronous request? (synchronous requests are discouraged...)
cache: false, // with this, you can force the browser to not make cache of the retrieved data
dataType: "text", // jQuery will infer this, but you can set explicitly
success: function( data, textStatus, jqXHR ) {
origPage = data; // can be a global variable too...
// process the content...
}
});
Which works fine and gets me the html I expected and see when viewing the page in notepad.
The next step is what I cannot figure out. All I want to do is swap out the innerHTML of a div with an id of 'editor' with what the current value is, so I have tried this:
origPage.getElementById('editor').innerHTML = e.html;
But I get the error "TypeError: undefined is not a function". I must be doing something simple wrong I feel but I don't know the proper formatting to do this. I have tried the following variations:
alert($(origPage).getElementById('editor').innerHTML);
//Different attempt
var newHtml = $.parseHTML( origPage );
alert($(newHtml).getElementById('editor').innerHTML);
//Different attempt
alert($(origPage).html().getElementById('editor').innerHTML);
But I always get "TypeError: undefined is not a function" or "TypeError: Cannot read property 'getElementById' of undefined". How can I do this properly?
EDIT:
Complete page html below:
<!DOCTYPE html>
<html>
<body>
<div id="editor">
<h1>This is editable.</h1>
<p>Click me to start editing.</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="snapeditor.js"></script>
<script type="text/javascript">
var editor = new SnapEditor.InPlace("editor", {onSave: function (e) {
var isSuccess = true;
//var origPage = e.html;
var origPage;
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
// Actually perform the save and update isSuccess.
// Javascript:
$.ajax({
url: filename,
async: false, // asynchronous request? (synchronous requests are discouraged...)
cache: false, // with this, you can force the browser to not make cache of the retrieved data
dataType: "text", // jQuery will infer this, but you can set explicitly
success: function( data, textStatus, jqXHR ) {
origPage = data; // can be a global variable too...
// process the content...
}
});
//origPage shows expected html as this point
//alert($(origPage).getElementById('editor').innerHTML);
//alert($(origPage).html().getElementById('editor').innerHTML);
$(origPage).getElementById('editor').innerHTML = e.html;//fails here
alert(origPage);
//alert(newHtml.getElementById('editor').innerHTML);
$.ajax({
data: {html: origPage, docName: 'example1.html'},
url: 'savePage.php',
method: 'POST', // or GET
success: function(msg) {
alert(msg);
isSuccess = true;
}
});
return isSuccess || "Error";
},
onUnsavedChanges: function (e) {
if(confirm("Save changes?")) {
if(e.api.execAction("save")){
//location.reload();
}
} else {
e.api.execAction("discard");
}
}});
</script>
</body>
</html>

It seems that you get the user's changes in a variable - you called the var e.html. That is not a good variable name, BTW. If you can, change it to something like htmlEdited
Question: If you add the command alert(e.html); what do you get? Do you see the HTML after user edits?
If yes, then what you need to do is send that variable to a PHP file, which will receive the data and stick it into the database.
Code to send the data:
javascript/jQuery:
alert(e.html); //you should see the user-edited HTML
$.ajax({
type: 'post',
url: 'another_php_file.php',
data: 'userStuff=' + e.html, //var_name = var_contents
success: function(d){
window.location.href = ''; //redisplay this page
}
});
another_php_file.php:
<?php
$user_edits = $_POST['userStuff']; //note exact same name as data statement above
mysql_query("UPDATE `your_table_name` SET `your_col_name` = '$user_edits' ") or die(mysql_error());
echo 'All donarino';
The AJAX javascript code will send the var contents to a PHP file called another_php_file.php.
The data is received as $user_edits, and then inserted into your MySQL db
Finally, I presume that if you redisplay that page it will once again grab the contents of the #editor div from the database?
This is where you haven't provided enough information, and why I wanted to see all your code.
ARE you populating that div from the database? If not, then how do you expect the page to be updated after refreshing the page?
You would benefit from doing some tutorials at phpacademy.org or a thenewboston.com. Do these two (free) courses and you'll be an expert:
https://phpacademy.org/videos/php-and-mysql-with-mysqli
https://phpacademy.org/videos/oop-loginregister-system
If all you need to do is insert the contents of e.html to replace the #editor div, then try this:
$('#editor').html(e.html);
HOWEVER, you need an event to trigger that code. Are you able to do this?
alert(e.html);
If so, then put the first bit of code at that same spot. If not, we need more information about when your code receives that variable -- that is where you put the $('#editor').html(e.html); statement.

Ajax Error Potentially Due to Incorrect Data Object Being Passed

Hi I am new to ajax and I am attempting to pass a Json to a Database, but I am not that far yet. Currently I am attempting to be verified that the data I am passing is being done successfully. However, I always drop into the ajax error method. I will upload my code and the way the data looks and then the error.
Thank you for your help!
<script>
function updateTable()
{
alert("Do i try to update table?");
document.getElementById("testLand").innerHTML = "Post Json";
//echo new table values for ID = x
}
function popupClick (){
var popupObj = {};
popupObj["Verified_By"] = $('#popupVBy').val();
popupObj["Date_Verified"] = $('#popupDV').val();
popupObj["Comments"] = $('#popupC').val();
popupObj["Notes"] = $('#popupN').val();
var popupString = JSON.stringify(popupObj);
alert(popupString);
$.ajax({
type: "POST",
dataType: "json",
url: "popupAjax.php",
data: popupObj,
cache: false,
success: function(data)
{
alert("Success");
updateTable();
},
error: function(data)
{
alert("there was an error in the ajax");
alert(JSON.stringify(data));
}
});
}
</script>
JSON Being Passed shown in var popupString:
Error:
popupAjax.php file (warning it's testy)
<?php
echo "Testing tests are testy";
?>

You are specifying the dataType as json. But this is the returned data type, not the type of the data you are sending.
You are returning html / text so you can just remove the dataType line:
type: "POST",
url: "popupAjax.php",
If you do want to return json, you need to build your datastructure on the server-side and send it at the end. In your test-case it would just be:
echo json_encode("Testing tests are testy");
But you could send a nested object or array as well.
As an additional note, you can use .serialize() on your form (if you use a form...) so that jQuery automatically builds an object that you can send in the ajax method. Then you don't have to do that manually.

How to fetch JSON object though JavaScript or jQuery and generate dynamically content for multiple record through JavaScript or jQuery?

Understand already done process for single object and single data, which is working pretty cool.
1) output from the PHP Server encoded into JSON format.
JSON OUTPUT:
{"product_id":"1","sku":"FGDGE43","set":"4","type":"simple","categories":["2"],"websites":["1"],"type_id":"simple","name":"Honey","description":"Where sweetness belong.","short_description":"Sweetness.","weight":"100.0000","old_id":null,"news_from_date":null,"news_to_date":null,"status":"1","url_key":"hgjjhgjh","url_path":"hgjjhgjh.html","visibility":"4","category_ids":["2"],"required_options":"0","has_options":"0","image_label":"Honey","small_image_label":"Honey","thumbnail_label":"Honey","created_at":"2014-02-10 14:36:54","updated_at":"2014-02-19 11:37:07","country_of_manufacture":null,"price":"43.0000","group_price":[],"special_price":null,"special_from_date":null,"special_to_date":null,"tier_price":[],"minimal_price":null,"msrp_enabled":"2","msrp_display_actual_price_type":"4","msrp":null,"enable_googlecheckout":"1","tax_class_id":"0","meta_title":null,"meta_keyword":null,"meta_description":null,"is_recurring":"0","recurring_profile":null,"custom_design":null,"custom_design_from":null,"custom_design_to":null,"custom_layout_update":null,"page_layout":null,"options_container":"container2","gift_message_available":null,"0":{"file":"\/h\/o\/honey.jpg","label":"Honey","position":"1","exclude":"0","url":"http:\/\/127.0.0.1\/magento\/media\/catalog\/product\/h\/o\/honey.jpg","types":["image","small_image","thumbnail"]}}
2) Now
I can fetch above mentioned SINGLE JSON object through jQuery and dynamically change the content of the page.
$(document).ready( function() {
alert('bhoom : oh yea its coming');
$.ajax({
type: 'POST',
url: 'http://127.0.0.1/midserver.php',
data: 'id=testdata',
dataType: 'text',
cache: false,
success: function(data) {
var json = $.parseJSON(data);
$('#pname').html(json.name);
$('#pdesc').html(json.description);
$('#pprice').html(json.price);
$('#pweight').html(json.weight);
},
});
});
This is working fine.
Here come my Question
How can i fetch two or more object through JS or JQ and create dynamic elements though JS/JQ or any other mechanism and then put this data in dynamically generated elements.
i.e : for below mentioned JSON object ?
[{"product_id":"1","sku":"FGDGE43","set":"4","type":"simple","categories":["2"],"websites":["1"],"type_id":"simple","name":"Honey","description":"Where sweetness belong.","short_description":"Sweetness.","weight":"100.0000","old_id":null,"news_from_date":null,"news_to_date":null,"status":"1","url_key":"hgjjhgjh","url_path":"hgjjhgjh.html","visibility":"4","category_ids":["2"],"required_options":"0","has_options":"0","image_label":"Honey","small_image_label":"Honey","thumbnail_label":"Honey","created_at":"2014-02-10 14:36:54","updated_at":"2014-02-19 11:37:07","country_of_manufacture":null,"price":"43.0000","group_price":[],"special_price":null,"special_from_date":null,"special_to_date":null,"tier_price":[],"minimal_price":null,"msrp_enabled":"2","msrp_display_actual_price_type":"4","msrp":null,"enable_googlecheckout":"1","tax_class_id":"0","meta_title":null,"meta_keyword":null,"meta_description":null,"is_recurring":"0","recurring_profile":null,"custom_design":null,"custom_design_from":null,"custom_design_to":null,"custom_layout_update":null,"page_layout":null,"options_container":"container2","gift_message_available":null},[{"file":"\/h\/o\/honey.jpg","label":"Honey","position":"1","exclude":"0","url":"http:\/\/127.0.0.1\/magento\/media\/catalog\/product\/h\/o\/honey.jpg","types":["image","small_image","thumbnail"]}],{"product_id":"2","sku":"asdf654a6sd5f4","set":"4","type":"simple","categories":[],"websites":["1"],"type_id":"simple","name":"Butter","description":"Buttery Buttery Buttery","short_description":"Buttery Buttery ","weight":"100.0000","old_id":null,"news_from_date":null,"news_to_date":null,"status":"1","url_key":"butter","url_path":"butter.html","visibility":"4","category_ids":[],"required_options":"0","has_options":"0","image_label":"butter","small_image_label":"butter","thumbnail_label":"butter","created_at":"2014-02-25 11:35:49","updated_at":"2014-02-25 11:53:10","country_of_manufacture":null,"price":"100.0000","group_price":[],"special_price":null,"special_from_date":null,"special_to_date":null,"tier_price":[],"minimal_price":null,"msrp_enabled":"2","msrp_display_actual_price_type":"4","msrp":null,"enable_googlecheckout":"1","tax_class_id":"0","meta_title":null,"meta_keyword":null,"meta_description":null,"is_recurring":"0","recurring_profile":null,"custom_design":null,"custom_design_from":null,"custom_design_to":null,"custom_layout_update":null,"page_layout":null,"options_container":"container2","gift_message_available":null},[{"file":"\/b\/u\/butter.jpg","label":"butter","position":"1","exclude":"0","url":"http:\/\/127.0.0.1\/magento\/media\/catalog\/product\/b\/u\/butter.jpg","types":["image","small_image","thumbnail"]}]]
So,
what i've tried to create 'dynamic content and putting data in that' is here.
$(document).ready( function() {
alert('bhoom : oh yea its coming');
$.ajax({
type: 'POST',
url: 'http://127.0.0.1/test2.php',
data: 'id=testdata',
dataType: 'text',
cache: false,
success: function(data) {
// asumming that server returns more than one products
// in JSON Object.
// So iterate over this JSON Object through .each JQuery
// function.
var divHtml;
var productDiv = $("#productDetailsDiv");
//its reference
$(data).each(function(index, value) {
// Take Html of productTemplate Div in divHtml variable.
divHtml = $('#productsTemplate').html();
// Fill divHtml with values
divHtml.find('#pname').html(value['name']);
divHtml.find('#pdesc').html(value['description']);
divHtml.find('#pimage').html(value['url']);
divHtml.find('#pprice').html(value['price']);
divHtml.find('#pweight').html(value['weight']);
// Add divHtml to productDiv
$("#productDetailsDiv").children().add(divHtml);
// Loop for next value in data
});
},
});
});
So, Am I making mistake to fetching complicated JSON object or there is a code went wrong with jQuery?
Any help or suggestion will be appreciated.
Regards.

try the block with query $.each
$.each(data, function(index, item) {
$('#pname').html(item.name);
$('#pdesc').html(item.description);
$('#pprice').html(item.price);
$('#pweight').html(item.weight);
});
here pname, pdesc... etc,. you need to update with dynamic elements

You can user jquery each function to achieve this:
$(document).ready( function() {
alert('bhoom : oh yea its coming');
$.ajax({
type: 'POST',
url: 'http://127.0.0.1/midserver.php',
data: 'id=testdata',
dataType: 'text',
cache: false,
success: function(data) {
var json = $.parseJSON(data);
$.each(json, function(index, element){
$('#pname').html(element.name);
$('#pdesc').html(element.description);
$('#pprice').html(element.price);
$('#pweight').html(element.weight);
});
},
});
});

Thanks for your suggestion.
I find out that the JSON object i'm getting through PHP server as an output, is in multi-dimensional array. So for the shake of the simplicity, at server side, we have to generate one-dimensional array of JSON object as an output to be fetched and manipulated at client-side.
Now We can do stuff like generating dynamic content on through JS/JQ on HTML page and render(fill-in) the data with the same.
Regards.

get form data with javascript and then submit it to a php file using ajax

I am having some trouble working out how to get data from a form to post via ajax. I have the following code but it doesn't seem to be sending though the data from elements like checkboxes and radio buttons. Instead it is sending though all the fields. ie if there is a set of radiobuttons it is sending through all the possibilities not just the checked ones. The form can be made up of any type of element and have an undermined amount of elements in it, so I need to iterate through in the way I am. That part seems to be working, but I can't seem to get the javascript to grab the selected data. Do I need to manually check each element's type and then check to see if it checked etc?
myString = "";
my_form_id = "1";
my_url = "phpscript.php";
elem = document.getElementById("form_" + my_form_id).elements;
for(var i = 0; i < elem.length; i++)
{
if (i>0) { myString += "&"; }
myString += elem[i].name + "=" + elem[i].value;
}
$.ajax({
type: "POST",
url: my_url,
data: myString,
success: function(data) {
// process the post data
}
});
`

Since you're using jQuery, you can drastically simplify it all:
var my_form_id = "1";
var my_url = "phpscript.php";
var form = $("#form_" + my_form_id);
$.ajax({
type: "POST",
url: my_url,
data: form.serialize(),
success: function(data) {
// process the post data
}
});
jQuery's serialize method does all the work for you. But if you wanted to do it by hand, then yes, you would have to check each field.

Develop Reference

JavaScript is the programming language of the Web.

How can I refresh a PHP file with itself using Ajax? - javascript

Related

Security issues while sending variable from Javascript to PHP

Javascript get current page html (after editing)

Ajax Error Potentially Due to Incorrect Data Object Being Passed

How to fetch JSON object though JavaScript or jQuery and generate dynamically content for multiple record through JavaScript or jQuery?

get form data with javascript and then submit it to a php file using ajax

Categories

Resources