Well basically what im trying to do is create a method that can take any datatype and essentially convert it into php recognized data or JSON for that matter. So say i wanted to pass an array, a 2d array, or just some basic string. I would call this function pass in the parameters and sent it off to php. Now i would reverse engineer this function to be able to translate what was sent and get it as a php array, or just a string. I'm good at php arrays but iam bad at javascript ones, here lies my dilemma. If anyone could give me some insight into the javascript side, i can take if from there. The most important however is how to send an array with javascript with php that is DYNAMIC, that is, its dimension can change and its length. Say for example this function handles different forms of different number of input fields, it needs to post this form's input fields into an array, convert to JSON and send.
Appreciate any help i can get or a guide in the right direction, thank you.
Here is an example using jQuery, AJAX, JSON and PHP JSON encode. I hope it will help you to understand the flow.
test.php:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jsFile.js"></script>
<form action='_test.php' method='post' class='ajaxform'>
<input type='text' name='txt1' value='Test Text 1'>
<input type='text' name='txt2' value='Test Text 2'>
<input type='submit' value='submit'>
</form>
<br /><br />
<div id='testDiv1'>txt1's text comes here....</div>
<div id='testDiv2'>txt2's text comes here....</div>
_test.php:
<?php
$arr = array( 'testDiv1' => $_POST['txt1'], 'testDiv2' => $_POST['txt2'] );
echo json_encode( $arr );
?>
jsFile.js
jQuery(document).ready(function(){
jQuery('.ajaxform').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function( data ) {
for(var id in data) {
jQuery('#' + id).html( data[id] );
}
}
});
return false;
});
});
Related
I'm trying to call a file from my server and return an HTML form. I asked a question here to get started but now I have another problem.
The textbox and submit button display, but since the data is JSON encoded and returned via AJAX to a DIV I'm not quite sure how to approach it.
Right now here's the result. Where I have "textbox and submit button" those elements are actually there. The other text appears around it.
testing
{"formHTML":"
"textbox here" " submit button here"<\/form>"}
Here's the code that would be on another server which calls to mine. This is the page that does the displaying
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<?php
echo "testing";
?>
<script>
$.ajax({
type: 'GET',
url: 'form_deliverer.php',
data: "true",
success: function(response) { // on success..
$('#yourdiv').html(response); // update the DIV
}
})
</script>
<div id = "yourdiv">
//form is displayed here
</div>
Here is the page that gets called, form_deliverer.php
<?
$o = new stdClass();
$o->formHTML = "<form method='post'><input type='textbox' name='text'/><input type='submit' name='submit_text'/></form>";
echo json_encode($o);
?>
Because AJAX automatically updates the div, how can I decode the data? Should I even do that?
For reference, this displays the form properly without the extra text. However, since I'll be calling from another server and have to deal with same domain issues, I'll have to use JSONP
<?
if(isset($_GET['true'])){
echo "
<form method='post'>
<input type='textbox' name='text'/>
<input type='submit' name='submit_text'/>
</form>
";
}
?>
You won't need to decode the data, though you will have to treat the response as an object. Because you json_encode()ed an stdClass, your ajax call will basically get something like this in return:
{"formHTML": "<form method='post'><input type='textbox' name='text'/><input type='submit' name='submit_text'/></form>"}
To access the string, you could simply write
$("#yourdiv").html(response.formHTML);
However, if you are only passing in the string, you could simply json_encode() the string instead of creating an object and then encoding that. That way, you can use response directly in your javascript.
form_deliverer.php
<?
echo json_encode("<form method='post'><input type='textbox' name='text'/><input type='submit' name='submit_text'/></form>");
?>
javascript
$.ajax({
type: 'GET',
url: 'form_deliverer.php',
data: "true",
success: function(response) { // on success..
$('#yourdiv').html(response); // update the DIV
}
})
Ok, so I've gotten most of this thing done.. Now comes, for me, the hard part. This is untreaded territory for me.
How do I update my mysql database, with form data, without having the page refresh? I presume you use AJAX and\or Jquery to do this- but I don't quite grasp the examples being given.
Can anybody please tell me how to perform this task within this context?
So this is my form:
<form name="checklist" id="checklist" class="checklist">
<?php // Loop through query results
while($row = mysql_fetch_array($result))
{
$entry = $row['Entry'];
$CID = $row['CID'];
$checked =$row['Checked'];
// echo $CID;
echo "<input type=\"text\" value=\"$entry\" name=\"textfield$CID;\" id=\"textfield$CID;\" onchange=\"showUser(this.value)\" />";
echo "<input type=\"checkbox\" value=\"\" name=\"checkbox$CID;\" id=\"checkbox$CID;\" value=\"$checked\"".(($checked == '1')? ' checked="checked"' : '')." />";
echo "<br>";
}
?>
<div id="dynamicInput"></div>
<input type="submit" id="checklistSubmit" name="checklistSubmit" class="checklist-submit"> <input type="button" id="CompleteAll" name="CompleteAll" value="Check All" onclick="javascript:checkAll('checklist', true);"><input type="button" id="UncheckAll" name="UncheckAll" value="Uncheck All" onclick="javascript:checkAll('checklist', false);">
<input type="button" value="Add another text input" onClick="addInput('dynamicInput');"></form>
It is populated from the database based on the users session_id, however if the user wants to create a new list item (or is a new visitor period) he can click the button "Add another text input" and a new form element will generate.
All updates to the database need to be done through AJAX\JQUERY and not through a post which will refresh the page.
I really need help on this one. Getting my head around this kind of... Updating method kind of hurts!
Thanks.
You will need to catch the click of the button. And make sure you stop propagation.
$('checklistSubmit').click(function(e) {
$(e).stopPropagation();
$.post({
url: 'checklist.php'
data: $('#checklist').serialize(),
dataType: 'html'
success: function(data, status, jqXHR) {
$('div.successmessage').html(data);
//your success callback function
}
error: function() {
//your error callback function
}
});
});
That's just something I worked up off the top of my head. Should give you the basic idea. I'd be happy to elaborate more if need be.
Check out jQuery's documentation of $.post for all the nitty gritty details.
http://api.jquery.com/jQuery.post/
Edit:
I changed it to use jquery's serialize method. Forgot about it originally.
More Elaboration:
Basically when the submit button is clicked it will call the function specified. You want to do a stop propagation so that the form will not submit by bubbling up the DOM and doing a normal submit.
The $.post is a shorthand version of $.ajax({ type: 'post'});
So all you do is specify the url you want to post to, pass the form data and in php it will come in just like any other request. So then you process the POST data, save your changes in the database or whatever else and send back JSON data as I have it specified. You could also send back HTML or XML. jQuery's documentation shows the possible datatypes.
In your success function will get back data as the first parameter. So whatever you specified as the data type coming back you simply use it how you need to. So let's say you wanted to return some html as a success message. All you would need to do is take the data in the success function and place it where you wanted to in the DOM with .append() or something like that.
Clear as mud?
You need two scripts here: one that runs the AJAX (better to use a framework, jQuery is one of the easiest for me) and a PHP script that gets the Post data and does the database update.
I'm not going to give you a full source (because this is not the place for that), but a guide. In jQuery you can do something like this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { // DOM is ready
$("form#checklist").submit(function(evt) {
evt.preventDefault(); // Avoid the "submit" to work, we'll do this manually
var data = new Array();
var dynamicInputs = $("input,select", $(this)); // All inputs and selects in the scope of "$(this)" (the form)
dynamicInputs.each(function() {
// Here "$(this)" is every input and select
var object_name = $(this).attr('name');
var object_value = $(this).attr('value');
data[object_name] = object_value; // Add to an associative array
});
// Now data is fully populated, now we can send it to the PHP
// Documentation: http://api.jquery.com/jQuery.post/
$.post("http://localhost/script.php", data, function(response) {
alert('The PHP returned: ' + response);
});
});
});
</script>
Then take the values from $_POST in PHP (or any other webserver scripting engine) and do your thing to update the DB. Change the URL and the data array to your needs.
Remember that data can be like this: { input1 : value1, input2 : value2 } and the PHP will get something like $_POST['input1'] = value1 and $_POST['input2'] = value2.
This is how i post form data using jquery
$.ajax({
url: 'http://example.com',
type: 'GET',
data: $('#checklist').serialize(),
cache: false,
}).done(function (response) {
/* It worked */
}).fail(function () {
/* It didnt worked */
});
Hope this helps, let me know how you get on!
I need to pass an array to a php page with AJAX. This array of input elements gets sent to the other page:
<input type="text" name="txtCoursesNamewith[]" id="txtCoursesNamewith" size="117" >
This is how I prepare it for sending:
var txtCoursesNamewith = $.serialize($('#txtCoursesNamewith').val());
But I get this error when running the script:
TypeError: $.serialize is not a function
How can I send an array with AJAX?
I am facing same problem and, i am just using code like this.
but first of all please insert one hidden field and set textbox id like this:
<input type="hidden" name="txt_count" id="txt_count" value="3" />
<input type="text" name="txtCoursesNamewith[]" id="txtCoursesNamewith1" size="117" >
<input type="text" name="txtCoursesNamewith[]" id="txtCoursesNamewith2" size="117" >
<input type="text" name="txtCoursesNamewith[]" id="txtCoursesNamewith3" size="117" >
<script type="text/javascript">
var txt_count= $('#txt_count').val();
for (i=1; i<=txt_count; i++){
queryString += "&txtCoursesNamewith%5B%5D=" + $('#txtCoursesNamewith'+i).val();
}
</script>
finally we can pass queryString variable to ajax, and you can print array.
<?php
echo "<pre>";
print_r($_GET); // or print_r($_POST);
?>
var textBoxes;
$('input[name="txtCoursesNamewith[]"]').each(function() {
textBoxes+=$(this).val()+"|||";
});
Now the textBoxes have all the values of text field with ||| separated and pass to php script and use explode() function to split each input value . may it helps u
You don't need to use .val() because .serialize() works on a the field itself, not on the value. (because it needs to get the name and the value from the field)
You can also call serialize() directly on a jQuery object, rather than using the jquery object as a parameter. Do it like this:
var txtCoursesNamewith = $('#txtCoursesNamewith').serialize();
Hope that helps.
Because $.serialize($('#txtCoursesNamewith').val()) is a string and not a jQuery object, it doesn't have the serialize function.
If you want to serialize the input (with its value), use $('#txtCoursesNamewith').serialize();
$.ajax({
type: 'POST',
url: your url,
data: $('#'+form_id).serialize(),
success: function(data) {
$('#debug').html(data);
}
});
Then in php
<?php
print_r($_POST);
?>
Could someone help me with how to pass an array of values from PHP and retrieve it using AJAX. What i have found is only to pass a single value from PHP. When i try passing the value of an array i dont know how to receive it at the AJAX side
This is my PHP code:
$success[];
$timeout[];
$fail[];
while($row1 = mysql_fetch_array($masterresult))
{
$success[]=$row1[1];
$timeout[]=$row1[2];
$fail[]=$row1[3];
}
echo json_encode(array("a"=>$success,"b"=>$timeout,"c"=>$fail));
And below is by AJAX call:
var channel;
function overall(){
$(".one").show();
$(".two").hide();
$(".three").hide();
$(".four").hide();
window['channel']="overall";
$.ajax({
type:"GET",
url:"dash2.php",
data:{channel:channel},
dataType:'json',
success:function(data){
console.log(data.a);
console.log(data.b);
console.log(data.c);
}
});
}
How should i pass those php array values onto this ajax call? could someone help me with the code
What you want to do is encode it as JSON.
$yourArray = array('asdf', 'qwer', 'zxcv');
echo 'var yourJavaScriptArray = ' . json_encode($yourArray) . ';';
This makes all of your arbitrary data safe for use in JavaScript as well.
If you are only doing this with AJAX, no need for the var part. Just output from json_encode() directly.
Whether it is one value or multiple values in an array for example, you should always use:
json_encode($your_php_var)
json_encode your array on PHP end.
Use that JSON object in JavaScript without any additional effort, its part of JavaScript.
When you send it back to PHP just json_decode it in PHP.
Reference: PHP Manual
Hope this example will help you. Imagine if you have some input data on html form and need to send them by AJAX, do something with them on server side and recive the result on client side and do some stuff with it.
<form id="my_form" method="post" action="<?=$ServerSideUrl?>">
<input type="text" name="field_1" value="">
<input type="text" name="field_2" value="">
<input type="text" name="field_3" value="">
</form>
Here is you AJAX script, i used in this example JQuery
$('#my_form').ajaxSubmit({
dataType: 'html',
error: function() {
alert('some error text');
},
complete: function(data) {
//data this is the result object which returned from server side
//for example you shpold alert the sum of thouse 3 field
alert(data.sum);
}
});
Here is your server side code
<?
$data = array();
$data["sum"] = $_POST["field_1"] + $_POST["field_2"] + $_POST["field_3"];
echo my_json_encode($data);
return true;
?>
So when your AJAX will be complete it alert the sum of three field on your form,
You can use JSON in combination with jQuery for that.
<?php
$myArray = array('a', 'b');
echo json_encode($myArray);
?>
Ajax
$.get('http://localhost/index.php',
function(data) {
var response = jQuery.parseJSON(data);
console.log(response);
}
);
In your code:
var channel;
function overall(){
$(".one").show();
$(".two").hide();
$(".three").hide();
$(".four").hide();
window['channel']="overall";
$.ajax({
type:"GET",
url:"dash2.php",
data:{channel:channel},
dataType:'json',
success:function(data){
console.log(data["a"]);
console.log(data["b"]);
console.log(data["c"]);
}
});
}
Suppose all forms in your application has this structure:
<div id="result_messages"></div>
<form action="/action">
<!-- all the form -->
</form>
A submit button for this form looks like this:
<input type="button" onclick="$.post( '/action', $(form).serialize(), function (data) {
$('#result_messages').html( data ); // At this point the 'data' is an standard HTML with a message
});" />
BUT, But not always the response is a message... how to detect when data is a message or not??????:
<input type="button" onclick="$.post( '/action', $(form).serialize(), function (data) {
if (isMessage( data ))
$('#result_messages').html( data );
else
doActionWith( data );
});" />
Using JSON maybe a solution:
{ response_type : 'message', data: 'all_data_here' }
{ response_type : 'nomessage', data: 'all_data_here' }
Other solution is to put a special STRING at the begin of data:
<!--message--><ul><li>form was processed</li></ul>
Have you other ideas? what do you think about this solutions?
what do you think about this solutions?
<input type="button" onclick="$.post( "/action", $(form).serialize(), function (data) {
That will fall over. The quote before /action will terminate the onclick attribute value
Inline JS is nasty. Bind your event handlers from external scripts.
If JS is not available, this won't work. Write a form that works (with a regular submit button) and then progressively enhance with JS.
form is undefined, that should be this.form
/action is repeating yourself. Write more reusable code: this.form.action
Using JSON maybe a solution
Yes. Use a structured data format instead of a blob of code to shove into the page.
What are the options, other than simple html output? json?
If so, you can send an object back and check it in the callback.