I have been trying a lot of different ways to make a change on a image src from a AJAX Requset, the new URL is retrived from an AJAX call, with the Developer Tools i visualized data the returning variable 'DATA' have the expected URL but the image SRC get this:
"atrk.js-; var s = document.getElementsByTagName('script')[0];s.parentNode"
The AJAX Request:
$.post("readurl.php",function(data){
$("#imagen").attr("src",data);
});
The HTML Element:
<img id="imagen" src="old_pic.png">
The PHP file:
<?php
$xml=simplexml_load_file("links.xml");
echo $xml->URL_one;
?>
I hope someone can help me.
Thanks in advance!
try to use prop function:
$("#imagen").prop("src",data);
Related
I'd like to have 4 images. After click on the image, it will change to different image and call function.
I already have it and it works, but only separately.
Code for changing image. (I put code only for one image):
<form method="post" action="index.php" name="loginform">
<script>
function prvni(img)
{
img.src = "img/green/green_0.jpg";
document.getElementById("image2").src = "img/red/red_0.jpg";
document.getElementById("image3").src = "img/red/red_0.jpg";
}
</script>
<img src="img/red/red_0.jpg" id="image1" onclick=prvni(this) />
</form>
Code for calling function via button (type=submit):
<form method="post" action="index.php" name="loginform">
<input id="user_drink" class="login_input" type="text" name="user_drink" ?> required /><br>
<input type="submit" name="pridat" value="přidat" id="button"/><br>
</form>
and code from different file:
elseif (isset($_POST["pridat"])) {
$this->myfunction();
When I try to change type submit to image, it doesn't work.
Maybe my codes above are not a good way.
Could you help me how to do it (click on image -> change the image -> call function)
Thank you
The only way you can call a php function from javascript is to use Ajax to send a post or get request after changing the image.
See this CodePen for the client side.
And in your php file:
// read the data
$mydata = $_POST['data'];
// perform actions
// return if needed
header('Content-Type: application/json');
echo json_encode(array('returnData' => 'myOtherData'));
Thank you tima
now I'm able to change the image.
Unfortunately I don't know how to call function with your code from another file.
Which part from your php code call the function?
Is there something which fulfill IF condition from different php file below?
if (isset($_POST['data'])) {
$this->myfunction();
Basically I need use image as button, but I want to change image after click on. There will be 4 images for 4 options. When I click one of them image will change and via function write value to mySQL. If I click on another one image will change (First clicked image will change back) and to mySQL will write value for this actual image. myfunction() from my previous post do mySQL and it is working, so i don't need help with it. I mentioned it for better understanding of my problem)
Thank you so much, I am really new (two weeks) with php, JS etc.
Lukas
I want to call a PHP function passing an argument on clicking a hyperlink (text with <a> tag) on the same page, i.e. href='#' onclick='loadpic($id).
Where $id is the variable to be passed to PHP function.
You can do that by ajax easily. Create a loadpic function in javascript instead and then pass $id to the php file via ajax and do something when you get the result.
Your javascript file should look like this-
(make sure you've inserted a link for jquery in your index file)
function loadpic(id_param){
$.post("filename.php",
{
id: id_param
},
function(data){
alert("Data received:" + data);
});
};
The data parameter in function(data) would be the value that you've echoed in the php file.
If you want to use onclick() method in your HTML element then you have to write your method is javascript and make an AJAX call to PHP. THis is one simple way to do this using php and javascript. And for this please see javascript and ajax with PHP.
But if you dont want to use javascript then here is a simple way and very simple code.
<?php
if(isset($_GET['myMethod'])){
myMethod($_GET['id']);
}
function myMethod($id){
echo $id."<br>";
}
?>
<?php
$myId = 4;
?>
<a href="index.php?id=<?php echo $myId ?>&myMethod" >MyLink</a>
Note: Copy this code and paste into a file called index.php because notice the hyper link tag and its attribute href="index.php".
Also note that you can not directly call php method using js like onclick() from your HTML tag. You should use AJAX or something. But using above demo code you can easily call myMethod() which is a PHP method using the hyper link tag.
In your case:
<?php
if(isset($_GET['call_loadpic'])){
loadpic($_GET['id']);
}
function loadpic($id){
echo "My loadpic method has been called! and the id is".$id."<br />";
}
?>
<!-- your other codes -->
<?php
$id = 4;
?>
<a href="this-same-file-name.php?id=<?php echo $id ?>&call_loadpic" >MyLink</a>
This is because your php function is in the same page and you want to call that function using same file and hyperlink in the same file. (According to your question)
You still will have to make javascript handle the exception because php has no onclick.
onClick=\"loadpic("'.$id.'");"\
//this will only send a php variable javascript will still have to loadpic();
I'm trying to unobtrusively detect when JavaScript is disabled by having an image inside of a noscript element. I'm pretty sure I'm on the right path though I'm not sure about what data I should be echoing exactly.
<noscript><img alt="" src="images/noscript.gif" /></noscript>
The base64 encoded data below is simply a 1x1 transparent GIF image.
header('HTTP/1.1 200');
header('Content-type: image/jpeg');
echo 'data:image/gif;base64,R0lGODlhAQABAIAAAP8A/wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
What do I need to do to ensure I can have PHP intercept the image request and have the image successfully be displayed on the page (obviously while JavaScript is disabled)?
<noscript><img alt="" src="path_to_script.php"/></noscript>
Script:
header('HTTP/1.1 200');
header('Content-type: image/gif');
echo base64_decode('R0lGODlhAQABAIAAAP8A/wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
You could just make the src attribute the link of the PHP file:
<noscript><img alt = "" src = "[stuff].php" /></noscript>
Also, I don't know how PHP servers work, but in Python TCPServers and UDPServer, the server is run by a class with this handle() method that takes in data from the client and then sends data back. That data can be completely independent then the actual file from that link.
If this is the same in PHP, then you could get a request for a link from images/noscript.gif, not even have a images/noscript.gif file, and then just send back the data from the PHP file.
Ah, I forgot I can decode the image at the server. The key is having the client make an HTTP request otherwise the server won't be aware and thus can not log that JavaScript is disabled.
<?php
header('HTTP/1.1 200');
header('Content-type: image/gif');
echo base64_decode('R0lGODlhAQABAIAAAP8A/wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
?>
I want to display the content of Division in one page to another.
<div id="box-cont" class="box-content">
<?php
echo $stat;// Contains multiple images with strings
?>
</div>
Here $stat will display multiple images with few contents. And i am using jQuery AJAX to display this html in another page.
var bcont = $('#box-cont').html();
$.ajax({
type:"POST",
url:"abc.php",
success: function(data) {
document.location.href='def.php?bcont='+bcont;
}
});
And i am getting this html in def.php as
$_GET['bcont'];
This is not working for me..
Thanks in advance
A shortcut method would be to use sessions to pass the html from one page to another.
<div id="box-cont" class="box-content">
<?php
echo $stat;
$_SESSION['stat'] = $stat; // make sure session_start(); is present on this page
?>
</div>
Then, in the success handler of your ajax call
$.ajax({
type:"POST",
url:"abc.php",
success: function(data) {
window.location.href='def.php';
}
});
Finally, in def.php
session_start();
echo $_SESSION['stat'];
Note: This is not an ideal approach but will do the job for you
Ok, you want to pass the html of #box-cont to def.php, right?
You're mixing post and get. Read: http://api.jquery.com/jquery.post/
and you'll find you need to use the data-parameter.
There's something odd with the success-part. You don't reload the frame/div
where def.php is sitting. What you've done is passing data to the server
but not getting anything back, (if I read your attempts correctly).
In fact there's currently little use for a server-via here, from what you
describe it can all be done at client / JS.
There is a question on SO How to send HTML code in an http POST request? and works good in sending but receiving of HTML and decode it back to original HTML is not working
My HTML Code as
<div id="TypePostBox">
<div style='margin-top:20px;'>Hello World</div>
</div>
Currently I am posting with JQuery with this code as suggested in above link
var cod = encodeURIComponent($('#TypePostBox').html());
//code to POST with jquery
console.log(cod);
//Output in console as %26lt%3Bdiv%20style%3D'margin-top%3A20px%3B'%26gt%3BHello%20World%26lt%3B%2Fdiv%26gt%3B
and receiving it in php as
echo rawurldecode($_POST['dt']);
//PHP Output as <div style='margin-top:20px;'>Hello World</div>
How can I send and get the exact HTML Code? I want to POST not GET with Jquery / Javascript. I am ajaxing it.
I just want to send exact HTML and receive exact HTML, What can be done?
I am pretty sure
echo html_entity_decode(rawurldecode($_POST['dt']));
does the job. See html_entity_decode.
Post an echo of the post['dt'] with out using the rawurldecode