Get div content value during print post data? - php

I am new to wordpress and php and I want to get div content data when I print_r($_POST)
I used add_action( 'save_post', 'wpse_save_meta_fields' ); wordpress hook to save data or update data.
When I do print_r($_POST) I get all things except selected_element_all div content.
How could I get data or resolve this ?
jquery code ( for get data from another file)
jQuery(document).ready(function() {
var postid = "<?php echo $post_id;?>";
jQuery("#sel_all_mmy").click(function() {
jQuery.ajax({
data: {
'post_id': postid
},
type: 'POST',
datatype: 'json',
url: "<?php echo get_template_directory_uri();?>/get_all_make_model.php?",
success: function(data) {
jQuery(".selected_element_all").append(data);
}
});
});
});
HTML Div where i append data
<div class="selected_element_all" style="font-size:15px"> </div>
And finally PHP code i used
<?php
function wpse_save_meta_fields( $post_id ) {
global $wpdb;
echo "<pre>";
print_r($_POST);
exit();
}
add_action( 'save_post', 'wpse_save_meta_fields' );
?>

Try like this way
take a input hidden field in your div just like
<input type=hidden name="my_val" class="my_val" value=""> </div>
then use it in your jquery script like
jQuery(document).ready(function(){
var postid ="<?php echo $post_id;?>";
jQuery("#sel_all_mmy").click(function(){
jQuery.ajax({
data:{'post_id':postid},
type:'POST',
datatype: 'json',
url: "<?php echo get_template_directory_uri();?>/get_all_make_model.php?",
success: function(data){
jQuery(".selected_element_all").data(data);
jQuery(".my_val").val(data);
}
});
});
});
And print_r that value in your PHP function like
print_r($_POST['my_val']);
I hope it's working.

Related

jQuery ajax call in php while loop only returns first id

I am working on wordpress plugin that updates stock prices every few seconds. I display the stock prices in html table, that is executed in php loop, which grabs stocks as wordpress posts. In my code I need the title of the post, to call the function that grabs the specific stock price.
<?php $query = new WP_Query( $args );
if ($query->have_posts()) :
$i = 1;
while ($query->have_posts()) : $query->the_post();
?>
<td class="name"><?php the_title(); ?></td>
<td class="price" id="<?php echo $i; ?>" value="<?php echo get_the_title(); ?>"></td>
I would like to pass the id of the specific stock post to jQuery ajax function.
jQuery(document).ready( function($){
setInterval(callMe, 5000);
});
function callMe(){
var id = $('.price').attr("id");
var titleInput = jQuery('#' + id).attr("value");
$.ajax({
type: 'POST',
url: ajax_object.ajaxurl,
dataType: 'json',
data: {
action: 'myaction',
post_title: titleInput
},
success: function(response){
$('#' + id).html(response);
}
});
}
This is only returning first id, and is then also passing only first post title, but not the others.
Is the problem only in how I call the id? I was playing with how I call the var id, but couldn't make it work.
var id = $('.price').attr("id");
Please help if you have some suggestions on how to solve this problem.
$('.price') returns a collection and while there are some functions (like .css()) that operate directly on them, .attr() only operates on individual elements, so it's only returning the value of the first one:
console.log($('.price').length)
console.log($('.price').attr('id'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price" id="id1" value="value1"></div>
<div class="price" id="id2" value="value2"></div>
You have to call your function for each individual element:
function callMe() {
$('.price').each(function() {
var id = $(this).attr("id");
var titleInput = $(this).attr("value");
$.ajax({
type: 'POST',
url: ajax_object.ajaxurl,
dataType: 'json',
data: {
action: 'myaction',
post_title: titleInput
},
success: function(response) {
$('#' + id).html(response);
}
});
});
}

How can I use localStorage in php with AJAX to update my database?

I need to use a localStorage value in a PHP file to update values in my database. I know that I need ajax to achieve this, I can't get it to work.
My localStorage item is named option and it exists (checked in browser and stored the value in a div)
$(document).ready(function(){
$.ajax({
type: "POST",
url: "activity.php",
data: { storageValue: localStorage.getItem('option') },
success: function(data){
alert('success');
}
});
});
PHP Example:
$option = $_POST['storageValue'];
mysql_query("...SET x = '".$option."'...");
echo 'Update complete';
I dont see any post data nor do I get a response.
Thank you!
Your page:
<form>
<input type="hidden" value="thedatayouwanttopost" id="option"/>
</form>
<script src="Your_Js_File.js"></script>
Your JS file:
document.getElementById('option').submit(); // This submits the form
var storageValue = $('#option').val(); // This gets the value of the form once it has been posted to the .php file
$(document).ready(function(){
$.ajax({
type: "POST",
url: "activity.php",
data: { storageValue:storageValue },
success: function(data){
alert('success');
}
});
return false; // This stops the page from refreshing
});
Your PHP file to callback the data to AJAX and display the alert (activity.php):
...
$option = $_POST['storageValue']; // This is the post value of your hidden input on your page
mysql_query("...SET x = '".$option."'...");
?><input type="hidden" id="option" value="<?php echo $option; ?>"><?
// The input above posts the value of 'option' on your page back to your Ajax and spits out the request.
...

getting variable from javascript to php

I have a simple combo box whose value I can get in JavaScript.
I am doing that so I don't need to refresh the page.
Also I want to use the selected value to do some conditional branching after combo box so how do I get the value of combo box from JavaScript to my variable $change.
echo '<select id="combo_1">';
echo '<option value="2">Submative</option>';
echo '<option value="1">formative</option>';
echo '</select>';
Below is my JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('#combo_1').change(function(){
});
});
</script>
Here I want to do $change = $(this).val(), but obviously I cant do it like this.
Any suggestions?
i want to do it on the same page without refreshing or without submitting
my url kinda look like this
http://localhost/lms/grade/report/userdef/index.php
and i want it to be on click action
cuz depending on the choice of combobox 2 very different procedures will be called
You're gonna want to use AJAX and submit the form, then you can access the returned data without ever refreshing the page.
Basically:
HTML
<select name="combo" id="combo_1">
<option value="2">Submative</option>
<option value="1">formative</option>
</select>
JavaScript
$('#combo_1').change(function() {
$.post('calcScript.php', $(this).serialize(), function(data) {
alert(data);
});
});
in PHP, you can access your combo data via $_POST['combo'].
<script type="text/javascript">
$(document).ready(function() {
$('#combo_1').change(function(){
var combo_1 = $(this).val();
$.ajax({
type: 'GET',
url: 'ajax.php',
data: {'combo_1':combo_1},
success: function(data){
alert(data)
}
});
});
});
</script>
ajax.php
if( isset($_GET['combo_1]) ) {
echo $change = $_GET['combo_1'];
}
JS:
$.ajax({
type: "POST",
url: './filename.php',
beforeSend: function(){
//If you want to do something
},
data: 'data='$('#combo_1').val(), //Optional '&data2='+value+'&datan='+value,
success: function(msg){
alert(msg);
}
});
PHP:
$val = $_POST['data'];
return 'received successfully';
This will alert 'received successfully'

Submitting form with jQuery

Apologies if this has been answered before (I couldn't find the answer when I searched the archives)
I've got a page protected by a password:
<?php
if($_POST['pw'] == 'pw')
{
//Page content
} else
{
//Display password form
}
?>
Within the page content, I've got another form, which I want to submit using jQuery, and have the following code:
<script type='text/javascript'>
var dataString = $('input#input1').val();
$(function() {
$('#submit').click(function()
{
$.ajax({
type: 'POST',
url: 'p2.php',
data: dataString,
dataType: html,
success: function(data2) {
$('#testResult').html(data2);
}
});
return false;
});
});
</script>
<form name='form1' id='form1' action=''>
<fieldset>
<label for='input1' id='input1_label'>Input 1</label>
<input type='text' name='input1' id='input1' size='30' />
<input type='submit' value='Update / reset' id='submit' class='buttons' />
</fieldset>
</form>
<div id='#testResult'></div>;
However, clicking submit then sends the form to p1.php?input1=test (i.e., the data string is being sent to p1.php, not p2.php). If I edit the code and remove dataType:html and the 2 references of data2, then this doesn't happen (infact, nothing happens, so I assume that jQuery is submitting the data to the form). I've also changed the type to 'GET', incase the 2 POST requests on the same page were causing problems, but this didn't change the result.
What am I missing to get the information from p2.php (i.e. data2) and displaying it?!
EDIT
Thanks to a comment pointing out a typo, I've changed dataType: html to dataType: 'html' - this now doesn't cause the page to redirect to p1.php?input1=test, but once again, it doesn't do anything (when it should still be returning the value of data2)
EDIT 2
I've updated the code so dataString is now:
var dataString = $('input#input1').val();
dataString = 'var1='+dataString;
but this hasn't made any difference
For clarification, my p2.php just contains the following:
<?php
echo "<p>HELLO!</p>";
?>
EDIT 3
I made the changes to my code has suggested by Damien below; I get the alert of "works!" but still nothing seems to be returned from p2.php, and nothing is inserted into the #testResult div.
var dataString = $('input#input1').val();
$(function() {
$('#submit').click(function(evt)
{
evt.preventDefault();
$.ajax({
type: 'POST',
url: 'p2.php',
data: "someval="+dataString,
dataType: 'html',
success: function(data2) {
$('#testResult').html(data2);
}
});
return false;
});
});
$(function() {
$('#submit').click(function()
{
var dataString = $('#form1').serialize();
$.ajax({
type: 'POST',
url: 'p2.php',
data: dataString,
success: function(data2) {
alert('works!'); // ADDED AFTER UPDATE
$('#testResult').html(data2);
},
/* ADDED AFTER UPDATE */
error:function(obj,status,error)
{
alert(error);
}
});
return false;
});
});
Edit:
In p2.php:
<?php
var_dump($_POST['pw']);
?>
In p2.php you then need to output ( using echo, for example) what you want to be returned as 'data2' in your ajax success call.
UPDATE:
Since you're Ajax request fires succesfully, that means either your post is not passed correctly, or you're not outputting anything. I've re-looked at your code and I saw this:
<input type='text' name='input1' id='input1' size='30' />
that means you're fetching the wrong $_POST variable!
Do this:
Since you're sending a name="input1", in your p2.php try with:
<?php
if(isset($_POST['input1'])
{
echo $_POST['input1'];
}
else
{
echo 'No post variable!';
}
And in your jquery success:
success: function(data2) {
alert(data2);
$('#testResult').html(data2);
},
That oughta work, if you follow it literally. In the remote possibility it won't work, forget AJAX, remove the javascript and do a normal post submitting with p2.php as an action of your form :)
I think you have to prevent the default action of the form.
Try this:
$('#submit').click(function(e)
{
e.preventDefault();
$.ajax({
type: 'POST',
url: 'p2.php',
data: dataString,
dataType: html,
success: function(data2) {
$('#testResult').html(data2);
}
});
return false;
});
});
The data should be formatted like this:
variable1=value1&variable2=varlue2
I also think you can remove the dataType property.

How to submit a form with AJAX/JSON?

Currently my AJAX is working like this:
index.php
<a href='one.php' class='ajax'>One</a>
<div id="workspace">workspace</div>
one.php
$arr = array ( "workspace" => "One" );
echo json_encode( $arr );
ajax.js
jQuery(document).ready(function(){
jQuery('.ajax').live('click', function(event) {
event.preventDefault();
jQuery.getJSON(this.href, function(snippets) {
for(var id in snippets) {
jQuery('#' + id).html(snippets[id]);
}
});
});
});
Above code is working perfectly. When I click link 'One' then one.php is executed and String "One" is loaded into workspace DIV.
Question:
Now I want to submit a form with AJAX. For example I have a form in index.php like this.
<form id='myForm' action='one.php' method='post'>
<input type='text' name='myText'>
<input type='submit' name='myButton' value='Submit'>
</form>
When I submit the form then one.php should print the textbox value in workspace DIV.
$arr = array ( "workspace" => $_POST['myText'] );
echo json_encode( $arr );
How to code js to submit the form with AJAX/JSON.
Thanks
Here is my complete solution:
jQuery('#myForm').live('submit',function(event) {
$.ajax({
url: 'one.php',
type: 'POST',
dataType: 'json',
data: $('#myForm').serialize(),
success: function( data ) {
for(var id in data) {
jQuery('#' + id).html(data[id]);
}
}
});
return false;
});
Submitting the form is easy:
$j('#myForm').submit();
However that will post back the entire page.
A post via an Ajax call is easy too:
$j.ajax({
type: 'POST',
url: 'one.php',
data: {
myText: $j('#myText').val(),
myButton: $j('#myButton').val()
},
success: function(response, textStatus, XMLHttpRequest) {
$j('div.ajax').html(response);
}
});
If you then want to do something with the result you have two options - you can either explicitly set the success function (which I've done above) or you can use the load helper method:
$j('div.ajax').load('one.php', data);
Unfortunately there's one messy bit that you're stuck with: populating that data object with the form variables to post.
However it should be a fairly simple loop.
Have a look at the $.ajaxSubmit function in the jQuery Form Plugin. Should be as simple as
$('#myForm').ajaxSubmit();
You may also want to bind to the form submit event so that all submissions go via AJAX, as the example on the linked page shows.
You can submit the form with jQuery's $.ajax method like this:
$.ajax({
url: 'one.php',
type: 'POST',
data: $('#myForm').serialize(),
success:function(data){
alert(data);
}
});

Categories