I have a php page where I display few images with radio buttons. On start two images are pre selected and I merge those and show the combinations. But user can choose a different image and click on MergeImages button, which should display the combination of two images selected.
I am doing this in one php file, where I pass the selected contents via POST to the same file through AJAX.
$.ajax({
url: 'CreateImage.php',
type: 'POST',
data: {imagename : newImageName},
success: function(data) {
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
I am getting a success and now I would like to display the data so that I can see the newly created images. How do I do this?
You'll want to send with the ajax call the "dataType: 'image'," so the ajax call knows what to do with the returning data -- other options that I've used are dataType:'json' or 'text' or 'html', etc.
http://docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests
actually it won't take anything but a string, so send back the image src to display. (I was thinking you wanted to return the actual image itself).
Since you are running AJAX, which uses HTTP protocol for communication, HTTP relies on MIME type. Identify the callback by using 'image' as dataType.
dataType:'image',
If you want to display the data in a DIV, you can do this:
html:
<div id="myemptydiv"></div>
javascript:
$("#myemptydiv").append(data);
php (if you are in the same file, you have to clear the buffer 1st but you should use another php file for ajax requests instead):
<?php
if(isset($_POST['imagename'])){
while(#ob_end_clean());
//do stuff here
echo $data;
exit;
}
?>
Related
I want to create 'like' counter.
Currently I use ajax with php and on button click in like.php I update count in database and echo back count number to jquery.
$('btn').on('click',function(){
$.ajax({
url: 'like.php',
type: 'post',
data: someData,
dataType: 'json',
}).done(function(response){
//increase like shown on response
}).fail(function(jqXHR, textStatus, errorThrown) {
});
});
This would be triggering likes from client side.
I would like to do this on server side instead, so on button click to call php file:
Example (I put this in my page):
like
And then in like.php update count in database as above.
2 questions:
is it possible for url not to change when I click this?
how would I echo back like count from like.php this way? (because I dont use ajax to call like.php like in first example)
to your first question: simply no!
But you could make it a submit button and do post to the same url wich wouldn't change the url and you can push data through submit...
to your second question -> your like.php has to return the whole html with your counter-value ;)
cheerio :)
I've recently changed my searching page to a searchable datatable page due to my employer's request for easier data management. The problem is that it is taking too long to load.
I'm wondering it there is a way to only load like a portion of the table and finish loading the page first. Then finish off loading the rest of the table after that, e.g. while the user actually attempt to search for the data.
This was requested because the user might want to navigate to other parts of the page instead of using the datatable.
Extra info : The page is in .php and the data is loaded using php do-while loop. Maybe we can do a workaround using php functions?
Using the AJAX method recommended in the comments, the following is similar to how you could handle the page-load. You would need the jQuery library for the below.
Initial page
<script type="text/javascript">
// when the page is done loading,
// let's send a call to load more data
$(document).ready(function(){
myFunction();
});
// function to handle AJAX request to gather data
function myFunction(){
$.ajax({
type: "POST",
url: "./linkToMyPHP.php?loadData=1",
success: function(data){
// handle the data using the "data" variable
}
});
}
</script>
AJAX Page
<?php
if(isset($_GET["loadData"])){
// call query here and echo information
}
It may be recommended, to actually use a PHP function called json_encode() to echo back the information from your AJAX page in JSON form. This would allow you to transmit an array of information, instead of raw data. You would then need to update your AJAX request function similar to below.
$.ajax({
type: "POST",
url: "./linkToMyPHP.php?loadData=1",
dataType: "json",
success: function(data){
$("#myDivToChange").html(data);
}
});
You can read up on JSON at this highly rated question.
OK, If you need me to post any more of my code I have come up with then let me know. I am not sure this is even possible. But what I want to do is stop PHP from making a Zip file when the user selects a cancel button / link.
Now what I have set up is all the files upload per user are listed in a form, the user then can selected which files they wish to zip and download. Once the files are selected and the download button clicked, the div holding the form is changed via a Jquery AJAX call, which works fine no issues.
But I have a 'Cancel' / 'Stop' button / link which sort of works. Once clicked I call the .abort on the AJAX request and then loads new HTML content saying the user cancelled the zip making progress. However, all the message works fine, it seems like the server is still making the zip in the background and any links will not respond (most are also AJAX requests to load in new users requests) until the zip has been made.
The base of my site is using the CakePHP framework. But I am sure this is just standard Jquery / PHP issue.
Any ideas on how to get my AJAX request to stop PHP from making the zip?
This is how I am building my AJAX :
$(document).ready(function() {
$(".MAKEMYZIP").click(function(e) {
e.preventDefault();
$('.DIV-HOLDER').load('/PAGE-PREVIEWER');
var MakeNewZipFile = $.ajax({
url: '/makezip',
type: 'post',
dataType:'html', //expect return data as html from server
data: $('.FILE_DATA').serialize(),
success: function(response, textStatus, jqXHR){
$('.DIV-HOLDER').html(response); //select the id and put the response in the html
},
error: function(jqXHR, textStatus, errorThrown){
console.log('error(s):'+textStatus, errorThrown);
}
}); //End of AJAX call
//Below line makes the 'text' link visible once the make zip but clicked.
$('.ZipLinkHolder').css("visibility","visible");
$( ".Can_Zip_This_Zip" ).click(function() {
MakeNewZipFile.abort();
$('.DIV-HOLDER').html('<br/><br/><div class="CenterTxt">User has canceled Zip making process.</div>');
});
});
});
i do have a litte problem with my actual project.
My .HTML document gives via post some data to a php document wich is only echoing some numbers and letters but no spaces. So now id like to load that respond directly into a textbox, without showing the "ugly" respond php doc or reloading the site.
thanks for help
$.ajax({
url: "/mydoc.php",
type: 'POST',
data: {tb1: "arbitrary"}, // this could be anything
success: function(data) {
$("#myTextBox").val(data);
}});
Hope this helps!
You can accomplish this with jquery.
You will need to capture your response and set the textfield value attribute.
If you are getting data perhaps you should use GET method instead of post.
$.get('your_php_url?some_data=here&some_more_data=here', function(response, status) {
if (status === 'success') {
$('#your_textbox').val(response);
}
});
Or even better encode your data in JSON instead of passing plain text.
$.getJSON and set your textbox to the json response
you can use submit to attach a submit handler to your form. Make sure to return false so the form doesn't go to the action page.
I know a lot of questions have been asked about this question but i am still not abale to get my head round it.
I have a number of images that when clicked, i get the big image via ajax. The result from ajax a load of html that goes into my chosen div. the reason for this is that i plan on using other information on the page that ajax returns.
The html that gets returned contains the img tag and i am wanting hold off showing the image until it is fully loaded.
here is what i have so far:
function getimage(sent_data){
$("#gallery").hide()
$.ajax({
type: "GET",
url: "gallery/name.php?",
data: "id=" + sent_data,
success: callback
});
}
function callback(data, status){
$("#gallery").html('').hide(); // you need to remove the old image
$("#gallery").removeClass("loading").html(data).fadeIn("slow");
}
and the data returned is:
<a href="test.jpg" class = "cloud-zoom" rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4">
<img src="test.jpg" width="450" height="301" alt="johnboy"/></a>
Thank you.
I haven't tried it but this should work.
when you get your html data from your server place the returned html but not show, then add load handler to your gallery element and when it loads show your html.
$("#gallery").load(function(e) {
$(this).show();
});
function callback(data, status){
//edit: you must place your returned data
$("#gallery").html(data).hide(); // you need to remove the old image
}