I have this AJAX search functionality that searches through a list of files in a table and then updates the results according to the user's input. Now, I have a download button(which is an image) next to the file name in the table that enables the user to download the file. The problem is that when the AJAX call returns it is simply refusing to display the image. I don't know if i have a syntax error or if that is simply just not feasible. Code is here:
echo "<tr>
<td class='tlong'>".$state['title']."</td>
<td style='font-size:11px;' class=''>".$state['filesize']."
<a style='padding-left:px;' href='../downloads/".$state["filename"]."'><img src='../images/footer/downloadImage.png' alt='' style='width:10px;height:10px;'/></a>
</td>
</tr>";
}
This is the code inside the AJAX method. Im first pulling the title from the database, then the file size, then its supposed to show the image which enables the user to download that file next to it. But the image just doesnt show. It is however putting the alt text when I specify one. Any ideas peeps?
Check The path of image's src and the page that run the AJAX request. In other word, does the image rendered properly if you directly inserted it into that page?
// In the page that run AJAX
<img src='../images/footer/downloadImage.png' />
Suppose the following directory structure:
request.html
js/ajax_target.html
js/imgs/downloadImage.png
if the downloadImage is going to be rendered in ajax_target.html its src would be imgs/downloadImage.png, but if it would be rendered from request.html it should be js/imgs/downloadImage.png
Related
I am trying to upload a file a view the file on an iFrame but it is not working.
Here is what I have tried
jQuery('.file_upload1').change(function(){ jQuery('iframe').attr('src', jQuery(this).val()); $('iframe').attr('src', $('iframe').attr('src')); });
<label><input class="file_upload1" name="file_cover" type="file"></label>
<div>
<iframe src=""></iframe>
</div>
If this does not work, can I move the uploaded file to server directory so that the path becomes valid? How would I do this?
Apart from other problems and limitations of such solution, and specifically answering "why it does not work?" question:
The change event needs to be nested in ready function:
jQuery("document").ready(function() {
jQuery('.file_upload1').change(function() {
jQuery('iframe').attr('src', jQuery(this).val());
});
});
The src attribute of iframe must be a valid non-empty URL potentially surrounded by spaces. When selecting a file with input type file, in Windows the value will be something like c:\fakepath\file name goes.here, so before using as iframe source, you will have to rework it a little bit.
Regarding
I'm trying upload file and display it on iframe forcing it to reload
You don't need to force reload to achieve this. "Upload" means the page will be reloaded (well, unless upload is handled using AJAX, but it's not the case here I guess). In order to upload a file, the form must be submitted and the page needs to be reloaded. Once reloaded, you can easily construct the full path of the file and use it in iframe, something like:
<iframe src="<?php echo $file_full_url; ?>"></iframe>
But if you want to preview the file in iframe before uploading to server - it won't be possible due to security reasons. See this question for reference: How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
I have a script to upload an image and display it. When i choose an image and click upload, it doesn't update the current image, but if i press f5 it will change the current image... thank you very much in advance. im just new in php.
<br><br><input type='submit' name=save value=save onClick='alert(\"Profile Updated!\")'><input type='hidden' name='id' value=$id>";
your browser is probably reusing the cached image, the best way to fix this is to add a unique tag at the end of the image url e.g.
in php i would generally have some kind of helper to do this e.g(very basic):
**
function image_tag($url,$attrs){
$id = abs((int)(microtime(true)*1000)) ); //bit overkill
return '<img src="'.$url.'?'.$id.'" '.$attrs.' />';
}
echo image_tag('some_url.jpeg',' class="my_image_class" ');
**
if you are updating the image with javascript try do something like the following:
**$('#some_img').attr('src',some_url+'?'+(+new Date()));**
should do the trick
can you display image like ??
if yes then you have to append time() so it will loaded properly for example display image like ">
if you just upload image using AJAX then get back image data and fill in to image object.
Here you use profile.php page for upload image so after that you have to redirect that page or reload.
for example after upload image put code header('location:index.php?msg=imageuploaded');
I have no idea how to do this. I want to insert php code into an image source through jquery.. but it is not working. Here is my code and help would be greatly appreciated!
JQUERY:
var mainId = $(this).attr('id');
$("#intabdiv img").attr('src', '<?=resize("../php/admin/portfolio/before/'+mainId+'",$settings)?>' );
HTML:
<div id="intabdiv">
<?php $settings = array('w'=>450,'h'=>450,'crop'=>true); ?>
<img src="" border="0" class="pic" />
</div>
</div>
It looks to me like you're trying to have the client browser execute PHP. That's not going to work for you. I'm not sure you have a completely clear idea of the separation between server and client, and what happens where.
Here's a simple model that you can use to think about where things occur:
User puts URL in browser and hits enter
Browser sends request to server
Server receives request and attempts to provide the resource requested
At this stage, if the file is a PHP file, any PHP instructions are executed. The end result of this, after all PHP is finished and done, is an HTML file, perhaps with some javascript.
The server sends this HTML file back to the browser.
The browser loads the HTML file, and executes any javascript, which can manipulate the HTML on the client side.
So, where does that leave us? You're attempting to take an image file that exists on the server, resize it, and display it to the end user. Presumably the "resize" function is one you have defined somewhere in your PHP code. I'll go on the assumption that you just need to do this once and have it show up for the user when the page loads.
In this case, what you need to do is something more like the following (all in the same file):
<?php
$settings = array('w'=>450,'h'=>450,'crop'=>true);
$imgsrc = resize("../php/admin/portfolio/before/imageid.jpg",$settings);
?>
<div id="intabdiv">
<img src="<?= $imgsrc; ?>" border="0" class="pic" />
</div>
... no javascript required. Obviously, imageid.jpg must be the actual filename of the image you're trying to access. If, instead, you're trying to have some user action trigger the access to the image, please provide more context for what you're trying to accomplish and a better answer can be given.
The problem is you set the html as having an ID, but jquery is using the selector as being a class.
So change it from:
$(".intabdiv img")...
To
$("#intabdiv img")...
Why not use something like jcrop? http://deepliquid.com/projects/Jcrop/demos.php
in some part of my webpage i allow my users to change their profile picture. This is made simple by a form with the element <input type="file" name="avatar" id="avatar" />. After they upload the photo a php script is called were all the image checking and processing is made. When everything is ok, the previous user image is deleted and changed by the new one (with the same name) and then the user is redirected to their profile page.
The problem is, when the user change his picture, the firts time he goes to his profile page (when is redirected by the upload script) the picture is not the new one, is a cached copy of the old one, after a few f5 (reloads) the new image is showed.
A while ago a have a similar problem with an rss parser i made in php, if i call the url feed sometimes instead of a new version of the feed, i got a cached version. I solved this problem just by generating a ramdom number every time i needed the feed and then adding it to the url like; www.page.com/thefeed.rss?var=#ramdom_number
But, i really dont want to implement this "solution" because is unprofessional and my users will see the url with that parameter.
This is a resume of the upload operation:
profile.php?i=mycv : In this page is all the user data included the actual profile picture and the form to upload a picture, the form makes a post call to image_handler.php
image_handler.php : Is a php script who process the image sended by profile.php?i=mycv and is everything is ok, the user is redirected to profile.php?i=mycv.
Thanks for any help!
Try this code in profile.php
<?php
$act = $_GET["a"];
if($a == "return"){
header("location:profile.php?i=mycv");
}
?>
And then change url in image_handler.php that it sends user to profile.php?a=return page instead of profile.php?i=mycv
If that does not work you can add like this: <img src="http://someplace.com/someimage.png?<?php print time(); ?>"> then user cannot see the number part.
i am currently working on a class that generates diagrams as pictures with php. I want to load these pictures dynamically with jquery. How can i do that?? I wont have a real picture file, just the content of the file when i call it with ajax... And i cant simply define the php script as the src because i need to pass Post parameters to the picture...
EDIT:
Okay.. I think i have to explain it a bit further...
Here is the html code:
<div>
<img id="image" />
</div>
<input type="button" onclick="loadPicture();" />
When the button is pressed, some data should be send to the php script that generates the picture. A Callback function or something similar should now post the picture into the img- element.
Simply posting the Picture into the img tag doesnt work. The following code would work, but how can i add POST params??
<img src="<scriptname>.php" />
Http POST requests aren't meant to return resources. Why don't you use a GET request? The 'REST' way to do it will be to create the image with a POST request and then load it with a GET request. You need to define a URL mapping for your resources.
No people! You basically have 3 options as I see it.
Method 1 - Inline the image
Do what Brayn said, but data should be a base64 encoding of your image.
$("#div").html(data); // instead of this
$('#image').attr('src','data:image/gif;base64,'+data); // try something like this
But I don't like the idea of inlining the image or passing post data. Base64 might get a bit large for big images too.
Method 2 - Save the image
You can $.post the data like before, then save the image, and return the URL of the image.
Method 3 - Use GET
Modify your image-generating script to accept GET data. If you have a lot of data to pass, try compressing it somehow, or perhaps you can use SESSION variables.
I'm not very sure if I got it right from what you said but you could use the $.post() method that would return whatever you need through its callback. Something like this:
$.post("file.php",{param: val},function(data){
$("#div").html(data);
})
If you could explain further maybe we'll understand better. Hope this helps.
Is there any actual need to use AJAX / jQuery? Or are you simply putting it in because it's cool?
Here's what I would do:
if (isset($_POST['createImage'])){
// This means that the button was clicked
// Generate your image, and then display it:
}
// Regardless, you would now show your form
// That way if values were to be changed, the graphic can be recalculated.
This way, you achieve your desired output (the graphic loading depending on the form output) and a single click to generate that output.