I have two pages: test.php and backend.php.
test.php has three images which when clicked takes the user to backend.php. I want the src of the image clicked to be displayed on backend.php. I am trying to achieve this task via JavaScript and Ajax but the src of the image doesn't appear on backend.php. Code for the same are given below:
test.php:
<?php
session_start();
?>
<html>
<head>
<script src="jquery-1.9.1.js">
</script>
<script>
function clickIt(data){
$.ajax({
url: 'backend.php',
data: {"imgsrc":data},
type: 'post',
success:function(res){
alert(res.message);
}
});
}
</script>
</head>
<body>
<a href="backend.php">
<img onclick="clickIt(this.src)" src="img1.jpg"/>
</a>
<a href="backend.php">
<img onclick="changeIt(this.src)" src="img2.jpg"/>
</a>
<a href="backend.php">
<img onclick="changeIt(this.src)" src="img3.jpg"/>
</a>
</body>
</html>
backend.php:
<?php
session_start();
?>
<?php
echo $_POST['imgsrc'];
echo 'Back';
?>
What am I possibly doing wrong?
Try this;
HTML:
<body>
<a href="javascript:void(0);">
<img onclick="clickIt(this.src)" src="img1.jpg"/>
</a>
<a href="javascript:void(0);">
<img onclick="changeIt(this.src)" src="img2.jpg"/>
</a>
<a href="javascript:void(0);">
<img onclick="changeIt(this.src)" src="img3.jpg"/>
</a>
</body>
Jquery:
function clickIt(data){
window.location.href = 'backend.php?imgsrc='+data; // redirect to backend.php
}
In backend.php
<?php
echo $_GET['imgsrc']; // use $_GET
echo 'Back';
?>
Click event of tag is not firing because tag takes the
page to backend page before tag click event gets fired. You can resolve this problem simply by removing the tag from each line.
You cannot access ajax response as res.message as you haven't echo the response in json format. You can access response simply from res variable
Also change the function name to changeIt to clickIt as you have defined function has clickIt
// use only res
success:function(res)
{
alert(res);
}
<img onclick="clickIt(this.src)" src="img1.jpg"/>
<img onclick="clikcIt(this.src)" src="img2.jpg"/>
<img onclick="clickIt(this.src)" src="img3.jpg"/>
Related
When using below code share on Facebook but https://www.facebook.com/dialog/return/close#_=_ does nothing return.
<?php
$social_link = "https://www.google.co.in";
$sharelink = "http://www.facebook.com/sharer.php?u=".urlencode($social_link)."&t=&s=100";
$strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
echo "<script>var win = window.open('$sharelink', '_self', '$strWindowFeatures');</script>";
?>
You can create share button using the given tag and add given script in your script section
<a onclick="shareinsocialmedia('https://www.facebook.com/sharer/sharer.php?u=<?php echo $ShareUrl;?>&title=<?php echo $Title;?>')" href=""> <img src="images/facebook.gif" title="share in facebook"> </a>
<script type="text/javascript" async >
function shareinsocialmedia(url){
window.open(url,'sharein','toolbar=0,status=0,width=648,height=395');
return true;
}
</script>
I have the following code..
<!-- LANGUAGE -->
<div class="languages_box">
<span class="red">Languages:</span>
<img src="../images/au.gif" alt="" title="" border="0" height="12px" width="15px"/>
<img src="../images/gb.gif" alt="" title="" border="0" height="12px" width="15px" />
<img src="../images/de.gif" alt="" title="" border="0" height="12px" width="15px" />
</div>
<!-- CURRENCY -->
<div class="currency">
<span class="red">Currency: </span>
AUD
GBP
EUR
</div>
Which produces the following result..
I'm trying to alter the code so that when a user clicks on another flag or value, it updates the webpage to change with one is selected. To do this, I would imagine every <a> tag would include a <?php if(something) {echo (class=\"selected\"); } ?> but I'm unsure what the something would be.
Is there a way to do this in PHP? Or is it only possible in Ajax / jQuery since the page content has already been loaded?
<?php
session_start();
echo $_SESSION['flag'];
?>
<!-- LANGUAGE -->
<div class="languages_box">
<span class="red">Languages:</span>
<img src="../images/au.gif" alt="" title="" border="0" height="12px" width="15px"/>
<img src="../images/gb.gif" alt="" title="" border="0" height="12px" width="15px" />
<img src="../images/de.gif" alt="" title="" border="0" height="12px" width="15px" />
</div>
<!-- CURRENCY -->
<div class="currency">
<span class="red">Currency: </span>
<a href="#" <?php if ($_SESSION['flag'] == 1) { ?> class="selected" <?php } ?>>AUD</a>
GBP
<a href="#" <?php if ($_SESSION['flag'] == 3) { ?> class="selected" <?php } ?>>EUR</a>
</div>
<style>
.selected{
color:green;
font-size:20px;
}
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('.languages_box a').click(function ()
{
var flagid = ($(this).attr('id'));
var jsonData = {"flagid": flagid};
$.ajax({
type: 'POST',
async: false,
url: "testadmintest.php",
data: jsonData,
success: function (data) {
//alert(data);
window.location.reload();
// $('.currency a').removeClass('selected');
// if($.trim(data)==1){
// $('#gbp').addClass('selected');
// }
}
});
})
});
</script>
<---- php code ----->
<?php
session_start();
unset($_SESSION['flag']);
if (isset($_POST['flagid'])) {
$flagid = $_POST['flagid'];
if ($flagid == 1) {
$_SESSION['flag'] = 1;
} else if ($flagid == 2) {
$_SESSION['flag'] = 2;
} else {
$_SESSION['flag'] = 3;
}
}
//echo"1";
?>
you can send a flag variable using get, then:
if(isset($_GET['flag']) && $_GET['flag'] == your flag)
{echo (class=\"selected\"); }
use a flag for each link, and change the onclick function of links to be form.submit()
Since you are not bother about the changed content as of now. So, I am assuming it will be handled separately.
You have already got the css class to display a currency or language as selected.
So, your html will look like something following(I am writing it for currency only, language will use a similar approach):
<!-- CURRENCY -->
<div class="currency">
<span class="red">Currency: </span>
<a href="#" <?php echo ($_GET['currency']=="AUD" || empty($_GET['currency']))?'class="selected"':'';
?>>AUD</a>
<a href="#" <?php echo ($_GET['currency']=="GBP")?'class="selected"':'';
?>>GBP</a>
<a href="#" <?php echo ($_GET['currency']=="EUR")?'class="selected"':'';
?>>EUR</a>
</div>
I am assuming that you have a GET parameter for currency which you can access through PHP. Apart from this, it is also possible that you might access the currently selected language from session variable (like $_SESSION['language']) which is the case mostly. It all depends on the server side implementation(PHP).
The variable in $pieces[12] is the url of an image on my server, some times when the page loads there is a broken image. My script is suppose to find the broken image error if there is one and replace it with $pieces[12] again. If that sounds right. But I don't know how to do it with my code.
<div class="right_ad" id="right_ad">
<script>
<img src="<?php echo $pieces[12]; ?>"
onError="this.onerror=null;this.src='<?php echo $pieces[12]; ?>';"
style="width: 100%;max-height: 100%"/>
</script>
</div>
You should urlencode those values. My tip is that there are special values in your filenames.
function onError_run_this_func(){
//get your new image url with ajax function
//or if you already have it in $pieces[12] then use it.
$.('.image-class).attr('src', '<?php echo $pieces[12]; ?>');
}
<div class="right_ad" id="right_ad"><script><img class="image-class" src="`<?php echo $pieces[12]; ?>" onError="onError_run_this_func()" style="width: 100%;max-height: 100%"/></script> </div>`
This is my Current Code in my wordpress:
<div class="entry-content">
<a href="<?php
echo $currenturl.'?material=&type='.$get_type;
?>">All Materials</a>
<?php
$materials = get_field('materials',$valueid);
foreach($materials as $id):?>
<a href="<?php
$matterm = get_term($id,'materials');
$matslug = $matterm->slug;
$mattitle = $matterm->name;
echo $currenturl."?material=".$matslug.'&type='.$get_type;
?>"><?php
echo $mattitle;
?>
</a>
<?php endforeach; ?>
</div>
This is the Current Output:
<div class="entry-content">
<a href="#>Material 1</a>
<a href="#>Material 1</a>
</div>
And I want the output of the code will be:
<div class="entry-content">
<a class="current" href="#>Material 1</a>
<a href="#>Material 1</a>
</div>
and I have this Script on my header but it will not function:
<script type="text/javascript">
window.onload = function() {
document.getElementById('entry').className = 'current';
};
</script>
You're mixing up class and id (or just left off the id). If you do console.log(getElementById("entry")), I bet you get back null.
I think you have to replace this.
window.onload = function() {
var parentDiv = document.getElementsByClassName('entry-content');
parentDiv.childNodes[0].className = 'current';
};
In your code:
document.getElementById('entry').className = 'current';
getElementById(ID) it's a javascript method and used for getting the element with the specific ID
And your HTML is not correct, you forgot the end " of href.
You should write your HTML like -
<div class="entry-content">
<a id="entry" href="#">Material 1</a>
Material 1
</div>
After make above changes, your code works perfectly. See Demo
I have a little problem while calling the JS function which is defined in iframe source from the light box. Here is my code what i tried so far,
index.php
<iframe id="commentframe" src="index.php?option=com_excelvision&view=livevideo&layout=commentiframe&tmpl=component2&ev_id=<?php echo $result[0]->id;?>" width="950px" height="450px"></iframe>
commnentframe.php
<script>
function comments(ev_id,text,name,email)
{
var comment=text;
jQuery.ajax({
type: "POST",
url:'index.php?option=com_excelvision&controller=excelvision&task=subcomment',
data: {body:comment,eventid:ev_id,name:name,email:email},
success: function(data) {
//console.log(data)
}
});
}
</script>
<?php
JHTML::_('behavior.modal');
?>
<div class="jointhe">
<img src="<?php echo JURI::root();?>templates/excel/images/conv_icon.png">
<a href="<?php echo JURI::root().'index.php?option=com_excelvision&view=comment&tmpl=component1&ev_id='.$_REQUEST['ev_id'];?>" class="modal" >Join The Conversation</a>
</div>
<br/>
<div id="prev_comment">
<div id="com_det1">
<div id="com_det">
Commnets is loading.......
</div>
</div>
</div>
comment.php
<a onclick="window.parent.comments('<?php echo $_REQUEST['ev_id']?>',$('.commnenttext').val(),$('#name').val(),$('#email').val());window.parent.SqueezeBox.close();" class="button_org">Submit Commnet</a>
In the above code I call the view layout commentframe from iframe in index.php and in iframe there is a link for comment when clicks on the link light box will open inside the iframe and it's have a link for post the comment when click on it , It should call the commnents function which I defined in the commnetframe.php. I tried to do it window.parent.myfunctionname() but it's not working. if someone have any solution please help.