php_file:-
class class_name{
function method1(){
//some code
}
function method2(){
//some code
}
}
in html:-
<i class="fa fa-angle-right" onclick=""></i>
How can i call function from php file when the icon clicked
A jquery demo is as follows:-
abc.php:- (you can change extension to .html also if you are not going to use any php code in this file)
<button class="fa fa-angle-right" onclick="myFunction();">Click Me Please!</button>
<script src= "https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function myFunction(){
$.ajax({url: "demo_test.php", success: function(result){
alert(result);
}});
}
</script>
demo_test.php:-
<?php
include_once('def.php');
$obj = new myClass();
$result = $obj->method1();
echo $result;
?>
def.php:-
<?php
class myClass{
function method1(){
echo "demo";
}
function method2(){
echo "demo2";
}
}
Output:- http://prntscr.com/clw7hu and http://prntscr.com/clw7sl
Note:-
All three files must be at same working location(same directory)
It's a very small and easy sample to understand what is exactly need and how it can performed. Thanks
You can't, you need jQuery to do this.
Example:
<i class="banana"></i>
<script type="text/javascript">
$(document).ready(function() {
$(".banana").click(function() {
// write action you want to do here
});
});
</script>
Related
Using the following code for facebook comment box on my site. There is a link to show or hide Comments box. I just want to remove this link and make the comment box appear always.
Code in header.php
<script type="text/javascript">
$(document).ready(function(){
$('.link').toggle(
function () {
if($('#box').text() == '') {
$.ajax({
url:'./comments.php?url=<?php echo $domain.$path; ?>',
method:'GET',
success:function(r) {
$('.link').html('hide comments ∧');
$('#box').html(r).hide().slidedown(1000);
},
error:function() {
alert('file does not exist');
}
});
} else {
$(this).html('Hide Comments ∧');
$('#box').slideDown(750);
}
},
function () {
$(this).html('Show Comments ∨');
$('#box').slideUp(750);
}
);
});
Code in index.php
<span class="link" style="color:#FFA300;cursor:pointer;font-weight:bold;">Show Comments (<fb:comments-count href=<?php echo $domain.$path; ?>></fb:comments-count>) ∨</span>
Code in comments.php
<?php
if(isset($_GET['url']))
{
?>
<div style="padding:5px;">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="<?php echo $_GET['url']; ?>" num_posts="5" width="626"></fb:comments>
<script>FB.XFBML.parse();</script>
</div>
<?php
}
?>
I have little knowledge in PHP and other languages and due to that i am unable to figure out the necessary changes required to make this comment box appear without clicking show comments link.
Any help would be greatly appreciated.
Try this
$(function(){
$.ajax({
url:'./comments.php?url=<?php echo $domain.$path; ?>',
method:'GET',
success:function(r) {
$('#box').html(r).slidedown(1000);
},
error:function() {
alert('file does not exist');
}
});
});
Here I have an .ajax function within a PHP function, like this:
function phpFunction($ID) {
print "<script>
$('.uparrow').click(function(){
request = $.ajax({
etc... the rest isn't important.
Anyway, the class .uparrow is an html element that runs this .ajax function when clicked. The other thing you should know is that this function: phpFunction() is called a few times in the document, like this:
phpFunction(1)
phpFunction(2)
phpFunction(3)
However, the problem is that when I load phpFunction(), and I click on the .uparrow element, the .ajax call is made on behalf of each instance of phpFunction() that follows the one whose element I clicked on.
So if I clicked on the .uparrow of phpFunction(1), I would also be virtually clicking on the .uparrows of phpFunction(2) and phpFunction(3). Essentially, I need .uparrow to just be a local class that only applies to the instance of phpFunction() that is currently being called.
The only solution I could think of is to replace .uparrow's class name with something unique to each call of this function. The only difference between each instance of phpFunction() is their input $ID and I was thinking I could redefine .uparrow as:
class = '$ID.uparrow'
or
class = $ID + 'uparrow'
But that doesn't work. So how do I make sure that when I click on .uparrow within phpFunction(1), that the .ajax function only gets called that one time?
This is pretty confusing to explain and probably to understand, so please tell me if there's something that needs elaboration.
Let's say you have a list of elements, and when you click one of them, you want to do an ajax call.
click me
click me
<script>
$(function(){ //on DOM ready
$('.uparrow').on('click', function(){
//do ajax call
$.ajax({
url: 'url here'
type: 'post|get'
data: $(this).attr('data-id'), // you only send the ID of the clicked element
... callbacks, etc
})
});
})
</script>
Now you only have a function that makes an ajax call and takes the parameter to send from the element you clicked.
I hope this is what you wanted to achieve
Try something like this
$('[class="uparrow"]').click( function () {
var request = $.ajax({
// Your ajax call
});
});
this will execute ajax on the clicked element with .uparrow class
HTML
<a class="uparrow" href="#" data-ajax="I'm the first element">Click Me</a>
<a class="uparrow" href="#" data-ajax="I'm the second element">Click Me</a>
<a class="uparrow" href="#" data-ajax="I'm the third element">Click Me</a>
JS:
$('[class="uparrow"]').click(function () {
var currentAjax = $(this).data('ajax')
console.log(currentAjax);
});
And the DEMO
Do not call your php function multiple times. Just one time is sufficient.
Modify the markup of your .uparrow element to include the id like so:
<a class="uparrow" data-id="<?php echo $id; ?>" href="#">TextM/a>
Then re-write your php function like so:
function phpFunction() { /* no need to pass the ID */ ?>
<script>
$(function(){
$(document).on('click', '.uparrow', function(){
$.ajax({
url: 'URL',
type: 'POST'.
data: $(this).attr('data-id')
})
});
})
</script>
<?php } ?>
Call your phpFunction like so:
phpFunction();
UPDATE
<!doctype html>
<html>
<head>
<title>trop</title>
<meta charset='utf-8'>
<link rel='stylesheet' href='css/postStyle.css' />
<link href='http://fonts.googleapis.com/css?family=Exo+2:400,300,200|Homenaje&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel='shortcut icon' href='http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Music-Note-icon.png'>
<script src='../jquery.js'></script>
<script type='text/javascript' src='../script.js'></script>
</head>
<body>
<?php
$ids = array(1,2,3); // IDs of the posts you want
$result = mysql_query("SELECT * FROM all_posts WHERE ID IN($ids)");
while ($data = mysql_fetch_array($result)){
?>
<div class='post' style='width:470px'>
<h3><?php echo $data['Title']; ?></h3>
<div class='date'><?php echo $data['DateTime']; ?></div>
<iframe width='470' height='300' src='http://www.youtube.com/embed/WF34N4gJAKE' frameborder='0' allowfullscreen></iframe>
<p><?php echo $data['Body']; ?></p>
<div class='postmeta1'>
<p><a href='<?php echo $data['DownloadLink']; ?>' target='_blank'>DOWNLOAD</a></p>
</div>
<div class='verticalLine' style='height:39px'></div>
<div class='postmeta2'>
<p class='uparrow' data-id="<?php echo $data['id']; ?>">▲</p>
<div class='votes'>3</div>
<p class='downarrow'>▼</p>
</div>
<div class='verticalLine' style='height:39px'></div>
<div class='postmeta3'>
<div class='tags'>
<p><?php echo $data['Tags']; ?></p>
</div>
</div>
</div>
<?php } ?>
<script>
var request;
$('.uparrow').click(function(){
request = $.ajax({
url: 'votesHandler.php',
type: 'post',
data: { add : '1', ID : $(this).attr('data-id') }
});
request.done(function (response, textStatus, jqXHR){
alert('Voted!');
});
request.fail(function (jqXHR, textStatus, errorThrown){
alert(
'Oops, something went wrong'
);
});
request.always(function () {
alert('Done.');
});
});
</script>
</body>
</html>
This my code :
<?php
if (isset($_GET["add"]))
{
?>
<script type="text/javascript" language="javascript">
var i=0;
function createDiv()
{
$('#newdiv').append('<div id="div"'+i+'" class="ex" style="text-align: left;">Life Really suck</div>');
i++;
$( ".ex" ).draggable({containment:'parent',cursor:'pointer',opacity:0.6});
$( ".ex" ).droppable();
}
createDiv(); // will execute when it loads this line
</script>
<?php
}
?>
<div id = "newdiv"> </div>
How can I make the function execute in the DIV outside of the condition statement?
I need the function execute normally is the GET["add"] is set
Now I it does not execute in the DIV even though the function does run
surround your createDiv() call by $(document).ready(function(){ and }), this will execute what's inside only after the page is fully loaded.
I am very new with Ajax.
i am using the following javascript function to get the value from the list those user select the li.
but using this function each time the page is reloading. i am trying to use ajax using this function.how can i use ajax with this need syntax.
My function:
<script type="text/javascript" language="javascript">
function pagelim(index)
{
var page_lim=$('#page_num li').get(index).id;
self.location="<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim ;
}
</script>
<script type="text/javascript" language="javascript">
function dateby(index)
{
var date_by=$('#sort-by-date a').get(index).id;
var cls=document.getElementById(date_by).className;
if(date_by=="ASC")
{
date_by="DESC";
}
else
{
date_by="ASC";
}
self.location="<?php echo get_option('head'); ?>"+'?details&sort=' + date_by ;
}
</script>
Value get from list:
<div class="sort-links">
<span class="by-date" id="sort-by-date">Sort by: <a href="#" id='<?php _e($sort_by)?>' class='<?php _e($class)?>' onclick="dateby($(this).index())" >Date</a>
</span>
//list to select value
<span id="view-on-page">View on Page: <?php if($lim=="") { _e($limit); } else { _e($lim); } ?>
<ul id="page_num">
<li id="5" onclick="pagelim($(this).index())">5</li>
<li id="10" onclick="pagelim($(this).index())">10</li>
<li id="15" onclick="pagelim($(this).index())">15</li>
</ul>
</span>
</div>
Welcome to the wonderful world of functional programming.
I'm assuming you are doing a "get" request based on "index" which is a url? If that's the case, then you need to provide a callback.
$('#page_num li').get(index. function(id) {
var page_lim = id; // assuming that's what you sent back.
self.location="<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim ;
});
Notice that you have to put everything in a function that is called after the ajax request is finished. I'm assuming that all you are sending back from the request is the id you need.
jQuery AJAX calls are asynchronous, meaning that the the function $(...).get(url, callback); returns a value BEFORE the AJAX call has finished. That callback function only happens after the AJAX call is completed. I'd advise some time spent with the jQuery API documentation.
You might also Google "javascript functional programming" and see if you can get an explanation of how JavaScript (and thus jQuery) does not always return the value you expect from functions. It's very different from other languages like PHP or ASP.NET in that regard.
Hi hope this will help you... Create a div (say "MyDiv") and put all the elements which you want to change dynamically(without page refresh)... Then try jQuery.load() method...Like
<div id = "MyDiv">
<div class="sort-links">
<span class="by-date" id="sort-by-date">Sort by: <a href="#" id='<?php _e($sort_by)?>' class='<?php _e($class)?>' onclick="dateby($(this).index())" >Date</a>
</span>
//list to select value
<span id="view-on-page">View on Page: <?php if($lim=="") { _e($limit); } else { _e($lim); } ?>
<ul id="page_num">
<li id="5" onclick="pagelim($(this).index())">5</li>
<li id="10" onclick="pagelim($(this).index())">10</li>
<li id="15" onclick="pagelim($(this).index())">15</li>
</ul>
</span>
</div>
</div> //end of MyDiv
Then change your script like
<script type="text/javascript" language="javascript">
function pagelim(index)
{
var page_lim=$('#page_num li').get(index).id;
$("#MyDiv").load("<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim);
}
</script>
<script type="text/javascript" language="javascript">
function dateby(index)
{
var date_by=$('#sort-by-date a').get(index).id;
var cls=document.getElementById(date_by).className;
if(date_by=="ASC")
{
date_by="DESC";
}
else
{
date_by="ASC";
}
$("#MyDiv").load("<?php echo get_option('head'); ?>"+'?details&sort=' + date_by);
}
</script>
Please note that I havnt tested this...
Its very simple to use jQuery to perform AJAX requests... So pls refer this page
Try binding to the click event of your links. This way you can remove any inline javascript and its all neatly contained in your function.
$("li a").click(function() {
//should alert the id of the parent li element
alert($(this).parent.attr('id'));
// your ajax call
$.ajax({
type: "POST",
// post data to send to the server
data: { id: $(this).parent.attr('id') }
url: "your_url.php",
// the function that is fired once data is returned from your url
success: function(data){
// div with id="my_div" used to display data
$('#my_div').html(data);
}
});
});
This method means your list elements would look something like,
<li id="5">5</li>
This doesn't look ideal though as id="5" is ambiguous.
Try something like,
<li class="select_me">5</li>
then your click event binding can look like this,
// bind to all li elements with class select_me
$("li.select_me").click(function() {
// alert the text inside the li element
alert($(this).text());
});
i have this code:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function doSomething() {
$.get("supcont.php");
return false;
}
</script>
an i want to call this function when clicking on an img so i used this
<a href="#" onclick="doSomething();">
<img src="photo/suppc.png" width="295" height="36" href="" target="fenetreA"/>
</a>
but this doesn't work, is ther any one that can help me
$(function () {
$('img').live('click', function () {
$.ajax({
url:"supcont.php",
success:function (res) {
alert(res);
}
});
});
});
Put this anywhere:
<img id="img1" src="photo/suppc.png" width="295" height="36" href="" target="fenetreA"/>
Place this after you include JQuery.js
<script type="text/javascript">
$(document).ready(function () {
$("#img1").click(function(){
$.get("supcont.php");
});
});
</script>
More info here : http://api.jquery.com/click/
Check w3schools website. Much helpful to you regarding this.