I am trying to save the current dom of the document being worked on to the server via jquery. But running into an issue trying to send the dom value to a php file which handles the save. Here is the code :
Jquery
$('SaveQuote').click(function() {
var customername = $('#customername').val();
var customernameedit = $.trim(customername);
var customerphone = $('#customerphone').val();
var quotedata = encodeURIComponent($(document).html());
$( "#Message" ).load("/include/SaveQuote.php?
customername="+customernameedit+"&customerphone="
+customerphone+"&data="+quotedata);
});
PHP Code
$customername = $_GET['customername'];
$thedata = $_GET['data'];
$thephone = $_GET['customerphone'];
$file = $_SERVER['DOCUMENT_ROOT'].'/Quotes/'.$customername.$thephone.'.html';
// Open the file to get existing content
$current = $thedata;
// Append a new person to the file
file_put_contents($file, $current);
echo'Record Was Saved! View It Here <a href="/Quotes/"'.$customername.$thephone.'>
View Quote</a>';
?>
The Load Request is working and all the Values are "posting" but the load request is not allowing the dom to be sent via the quotedata var in the jquery code, could it be there is too much data in the string?
I believe I may have to use post with Jquery but not 100% sure.
The point of this snippet of code is to allow the dom during manipulation to be saved and viewed later or changed/edited, so I need the entire dom saved as is. Also will implement an autosave eventually but not part of this question.
So simply, how do I send the current dom via jquerys ajax controls to my php save file
Your javascript could look like this:
$('SaveQuote').click(function() {
var customername = $('#customername').val();
var customernameedit = $.trim(customername);
var customerphone = $('#customerphone').val();
var quotedata = $('html').html();
$.ajax({
url: "/include/SaveQuote.php",
type: "POST",
data: {
customername: customernameedit,
customerphone: customerphone,
data: quotedata
}, success: function(response) {
$("#Message").html(response);
}
});
});
That would make a POST request to the server with the data you want, and the server response would be injected as innerHTML into the #Message element.
Related
I am building a form to process text input, multiple check boxes and 4 images. currently I am to process the check boxes using the each function to put all the values of the checkboxes in an array before sending it through ajax. Now the problem is that I can't send the images with ajax too. And also I can't access the images too.
Code:
$(document).ready(function () {
//alert("this page works");
$('#uploadProperty').on('submit',function (e){
e.preventDefault();
var hname = $('#hname').val();
var location = $('#location').val();
var htype = $('#htype').val();
var rooms = $('#rooms').val();
var price = $('#price').val();
var hdetails = $('#hdetails').val();
var feature = [];
$('.feature').each(function() {
if($(this).is(":checked")){
feature.push($(this).val());
}
});
// if (feature.length == 0)
// alert("Select atleast 1 Feature");
// else{
// feature = feature.toString();
// alert(feature);
// }
var file1 = $('#file4').val();
//alert(file1);
$.ajax({
url : 'core/upload.php',
type : 'POST',
data : new FormData(),
contentType : false,
processData : false,
success : function (ep){
alert(ep);
}
});
});
});
You need to upload images first via ajax ( ex: http://hayageek.com/docs/jquery-upload-file.php ) and after make another ajax for the form fields. But you need an ID link between Property and images. you cand add an empty record and remember the mysql_insert_id to make update with the form fields and insert images or update ( depend how is your table structure )
So if i got it right, you want to fill the FormData object. Because currently it's empty.
You can use append method:
var formData = new FormData();
var $myField = $('#myField');
formData.append('myField', $myField.val());
To append file:
var $fileField = $('#fileField');
var myFile = $fileField.get(0).files[0];
formData.append('myFile', myFile);
To append multiplie files you should set the name properly:
formData.append('myFile[]', myFileFirst);
formData.append('myFile[]', myFileSecond);
Check it here: Uploading multiple files using formData()
Also, you can grab the whole form data through constructor:
var form = $('form').get(0);
var formData = new FormData(form);
I would like to know if it's possible to do an ajax post request to a specific url and receive in data a zip file in only on request? Or I have to send two requests... one, in order to have the url of the zip file inside the server which has been created and an another to download the zip file?
Sure you can do this! But only new browsers support this.
var url = 'test.zip';
var filename = 'test.zip';
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'blob';
request.onload = function() {
var link = document.createElement('a');
document.body.appendChild(link);
link.href = window.URL.createObjectURL(request.response);
link.download = filename;
link.click();
};
request.send();
The native answer is no!
But you can do like this.
Your ajax request:
$.ajax({
url: 'your-url-that-gives-zip-file.php',
dataType: 'JSON',
success: function(response){
if(response.zip) {
location.href = response.zip;
}
}
});
Your php file:
<?php
//Get your zip file code with and combine with http://youradress.com
$zipFile = 'http://youraddress.com/downloads/'.$zipFile;
echo json_encode(array('zip' => $zipFile));
?>
You cant download a file with ajax.
If you only want one request, then ditch the ajax and append a hidden iframe to the page, with the php file as its source.
This will limit you to a get request though.
eg:
$('#id').click(function(){
$(body).append('<iframe style="display:none;" src="yourfile.php?key=value"></iframe>');
});
How to post data to a php script (showitemid.php) using ajax and open the same script (showitemid.php) immediately in a thickbox on a hyperlink click and display that posted data. Below is my code:
postitemid.php
This file consists of multiple check-boxes. The user will tick the checkboxes and click a hyperlink. On clicking the hyperlink all the selected check-box values would be posted to showitemid.php and then immediately showitemid.php would open in a thickbox and display the received values. But it isn't receiving any values in my code ? Need help.
$('#showitem).click(function()
{
var data = $('input:checkbox:checked').map(function() {
return this.value;
}).get();
$.ajax({type: 'POST',
url: 'showitemid.php',
data: data,success: success,dataType: dataType});
});
showitemid.php
$data = '';
if (isset($_POST['data']))
{
$data = $_POST['data'];
}
elseif (isset($_GET['data']))
{
$data = $_GET['data'];
}
echo 'd='.$data;
use something like this
$('#showthickbox').click(function()
{
var data = $('input:checkbox:checked').map(function() {
return this.value;
}).get();//your code
$.post("showitemid.php",{data:data},function(data){
$("#thickbox").html(data);
})
})
})
in your showitemid.php
echo "your data";
The main problem with the original code is the data being sent has no key named data to match $_POST['data']) so $_POST['data']) is empty. You have to send key/value pairs, you are only sending a value with no key. You are likely getting a bit confused since you use the same variable name constantly
var dataArray = $('input:checkbox:checked').map(function() {
return this.value;
}).get();
var dataToServer= { data : dataArray} /* now have the key to match $_REQUEST in php */
Now can use AJAX shorthand method load() to populate content
$('#myContainer').load( "yourfile.php", dataToServer, function(){
/* new html exists run open thickbox code here*/
})
Hello this is code snippet which i get from Jquery Ajax based search
I am done with everything, just the problem is the following script may not be sending the POST variable and its values or may be i am not properly fetching it.
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$("input[name='search_user_submit']").click(function() {
var cv = $('#newInput').val();
var cvtwo = $('input[name="search_option"]:checked').val();
var data = 'cv=' + cv + '&cvtwo=' + cvtwo; // sending two variables
$("#SearchResult").html('<img src="../../involve/images/elements/loading.gif"/>').show();
var url = "elements/search-user.php";
$.post(url, {
contentVar: data
}, function(data) {
$("#SearchResult").html(data).show();
});
});
});
});//]]>
</script>
In php file i have the following code:-
if (isset($_POST['cv']))
{
// My Conditions
}
else
{
// Show error
}
And its showing error, This means everything is correct just the post is not working properly, maybe.
Do the var data = 'cv=' + cv + '&cvtwo=' + cvtwo; // sending two variables will do the needful or we need to do any modifications. I know questions like this really annoy people, but what should i do i am stuck up.. #userD has really helped me a lot just, this part is left.
Since you're using $.post instead of $.ajax, your call should be:
$.post(url, data, function(response) {
/// ...
});
data must be a Javascript object, like this:
data = { "cv" : cv, "cvtwo" : cvtwo };
Check Jquery's documentation for more info:
http://docs.jquery.com/API/1.1/AJAX#.24.post.28_url.2C_params.2C_callback_.29
I am using tinyMCE for Wordpress.
Which is the way to load text from server via AJAX?
Until now I have:
php:
<?php echo the_editor($_POST ? $_POST['content'] : '', $id = 'content'); ?>
javascript (which is failing...):
$("select[name='tpl']").live("change", function(e) {
var file = $(this).val();
var loadUrl = varsJs.WORDPRESS_PLUGIN_URL + "/templates/" + file;
$.get(loadUrl, function(result) {
$("#content").val(result);
});
});
The variable result is loaded with the desired text. No problem with that. But how pass this content to the tinyMCE?
if (typeof tinymce === "object"){
$("select[name='tpl']").live("change", function(e) {
var file = $(this).val();
var loadUrl = varsJs.WORDPRESS_PLUGIN_URL + "/templates/" + file;
$.get(loadUrl, function(result) {
tinymce.get("content").focus();
tinymce.activeEditor.setContent(result);
});
});
}
Note: varsJs is the second parameter of wp_localize_script function used to pass data from php to javascript. Really no needed in this precise issue but useful to know it.
Try this code, where 'content' is your field #ID
tinymce.init(tinyMCEPreInit.mceInit['content']);
this way and once tinymce is also loaded in current html,
you will reinit only one field, the one you received from Ajax Request.
also set this code before ajax saving Call
tinymce.activeEditor.save(); // get editor instance