I am working on site for users to do social netwoking. like facebook. or twitter. So far i have this code and let me show you what I want to do.
<button id="welcome">Welcome user</button>
<?php
function dal(){
alert("Hello user, welcome to my big social network")
}
?>
and i do javascript like this
<script>
document.byID('welcome').onclick = dal();
</script>
code currently is not working.
if you have any suggestion i really appreciate.
Remove the php and write this inside script tag
<script>
window.addEventListener("DOMContentLoaded",
function(){
document.getElementById('welcome').onclick=dal;
},false);
function dal(){
alert("Hello user, welcome to my big social netowkr")
}
</script>
You can't call php functions in javascript.
<button id="welcome" onclick="dal()">Welcome user</button>
<script type="text/javascript">
function dal()
{
alert("Hello user, welcome to my big social network")
}
</script>
This question really needs rewording. I honestly don't know where to start correcting the mistakes with this.... however to make the alert work for your button you need the following:
<button id="welcome">Welcome user</button>
<script>
document.getElementbyID('welcome').onclick = function(){
alert("Hello user, welcome to my big social network");
}
</script>
also you can't call or access PHP in JavaScript.
Please note the spelling mistake in your alert message too
It is considered best practice to unobtrusively add the handlers in the head instead of inline
I suggest
<?php ... ?>
<html>
<head>
<script>
window.onload=function() {
document.getElementById('welcome').onclick=function() {
alert("Hello user, welcome to my big social network")
}
}
</script>
</head>
<body>
<div id="content">
<button id="welcome">Welcome user</button>
</div>
</body>
</html>
Related
this is the code that I have to call my index.php file.
<script type="text/javascript">
$('button').click(function(){
$.ajax({url: 'permiteCookie.php'});
document.getElementById('div_cookies').style.display = 'none';
return false;
})
</script>
<?php
session_start();
if (!isset($_SESSION['permiteCookie'])){
?>
<div class="div_cookies" style="display: block;">
<div>
<div>
<div class="cookies_botoes">
<div class="cookies_bt2">
<button id="button" name="button" type="button">Close</button>
<a id="button" name="button" href="javascript:void(null);">Close</a></div>
</div>
</div>
</div>
</div>
<?php
}
?>
and this is the code that I have in the file permiteCookie.php
<?php
session_start();
$_SESSION['permiteCookie']=1;
?>
Problem: I cant access to the $_SESSION['permiteCookie'] in the index.php file.
What am I doing wrong?
The script is running before the DOM is ready. You'll need to wrap it in a $(document).ready() handler:
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$.ajax({url: 'permiteCookie.php'});
document.getElementById('div_cookies').style.display = 'none';
return false;
});
});
</script>
And as long as you're using jQuery, why use the plain DOM to hide the div?
$('#div_cookies').hide();
if I'm not mistaken, because session_start() affects the page headers, it needs to be at the top of the page, preferably the first line of code.
i.e. add this segment to the very top of index.php :
<?php
session_start();
if (!isset($_SESSION['permiteCookie'])){
?>
I have a div block that I only want to display on the first page. I mean, if the user is on
http://mywebsite.com/
it displays the div. But if he navigates to the second page of the posts
http://mywebsite.com/page/2
it hides that div. I am using Datalife Engine.
Div example:
<div class="example"> This is a test </div>
Can this be done?
follow this and all be worked fine.
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if( $('#mainPage').length > 0 ) {
$("#hideMe").css({"display": "block"});
} else {
$("#hideMe").css({"display": "none"});
}
});//end doc ready function
</script>
</head>
<body>
<div id="mainPage"> </div>
<div id="hideMe">lorem ipsum</div>
</body>
hope it helps you
example http://jsfiddle.net/viktorino/56ea5/
For datalife engine, display just on the first page we use:
[page-count=1]Content goes here[/page-count]
I am trying to load a table dynamically in a div in a php page. I want to load the tables using buttons or links on the same page.
I tried this:
<button id="fcluns" type="button" onclick="loadpage(this.id)">FC LUNs</button>
<div id="Table"></div>
<script type="text/javascript">
function loadpage(clicked_id){
if (clicked_id =="fcluns"){
$("Table").html('loadingImage.gif').load('getfcLuns.php?name=<?php $Host=$_GET['name']; echo $Host;?>');
}
}
</script>
i am generating the table from a php page getfcLuns.php where mysql queries are executed to get the details from database. And i am getting the $host in this php and passing it to the helper php to generate the table.
Any other efficient way is welcome. But I want to keep the page php based only.
<script src="ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"; type="text/javascript"> </script>
<button id="fcluns" type="button" onclick="loadpage(this.id)">FC LUNs</button>
<div id="Table"></div>
<script type="text/javascript">
function loadpage(clicked_id){
if (clicked_id =="fcluns"){
$("Table").load("getfcLuns.php?name=<?php $Host=$_GET['name']; echo $Host; ?>");
}
}
</script>
This above script Worked.
Try
$("#Table").css({'background-image':'loadingImage.gif'}).load(
'getfcLuns.php?name=<?php echo $_GET[name];?>',
function() {
$(this).css({'background-image':'none'});
}
);
Read the Documentation http://api.jquery.com/load/
When I generate PHP within a file that is asynchronously loaded by jQuery, the text seems to jitter or flicker a little while the animation runs. This does not happen to the regular HTML in the requested file, only the content generated with PHP.
Just want some hints as to what can end the jitter.
Here is the jQuery in the main.php:
$(document).ready(function(){
var demo = $('#demo');
demo.hide();
$("button").click(function(){
demo.load('demo.php', function() {
demo.show('medium');
});
});
});
Here is the HTML and PHP in demo.php:
<p><?php echo "Hello World with PHP trough AJAX"; ?></p>
I’m really unsure where to begin. Should I just avoid using PHP in demo.php alltogether? Even so I'd really like to have to possibility to use PHP in scripts called trough AJAX.
As per request, here is the whole darn thing:
main.php:
<!DOCTYPE html>
<html>
<head>
<title>Testing Ajax</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script>
$(document).ready(function(){
var demo = $('#demo');
demo.hide();
$("button").click(function(){
demo.load('demo.php', function() {
demo.show('medium');
});
});
});
</script>
<style type="text/css">
#demo {background-color: MidnightBlue;color: white;padding: 0.1em 1em 1.5em 1.5em;}
#demo h1 {color: white;}
</style>
</head>
<body>
<section>
<article>
<h1>Ajax</h1>
<hr />
<button>Load External Content</button>
<div id="demo"></div>
</article>
</section>
</body>
</html>
(I like MidnightBlue better than CornflowerBlue...)
demo.php:
<h1>Ajax criex Hello World!</h1>
<p><?php echo "PHP also cries Hello World trough Ajax!"; ?></p>
Technically speaking, there is absolutely no difference between text generated with PHP versus text generated in ASP.net versus text contained in a .txt file versus text caused by typing on your keyboard -- it is all letters and numbers. Indeed, I would go as far to say that, examining text absent other clues, it is completely and 100% impossible to tell how it was created. No, you should not avoid PHP with AJAX.
Any "jittering" that you see is a product of some other issue, most likely related to browser performance - processor availability, free memory, current process memory consumption, extension activity/interference with page content, etc.
I don't know if this will help you. Probably not if the code shown above is really all your code.
But: Some time back I also had a jittering problem in animations when I loaded content via Ajax. The reason was: The loaded content contained Javascript code with other animation commands and then both animations interfered. Maybe this is also the case here.
In my test whilst trying to reproduce the "jitter" your code is producing an infinite ajax loop (View it in Web Console, your see) thats most likely your jitter effect:
Heres a basic PHP and AJAX example:
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest' && $_SERVER['REQUEST_METHOD']=='POST' && isset($_POST['action'])){
$action = $_POST['action'];
switch($action){
case "hello":
echo "Hello World with PHP through AJAX";
break;
case "foobar":
echo "Hello Foobar";
break;
}
die;
}
?>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var action = this.value;
ajaxload('demo',action);
});
});
function ajaxload(placement,action){
$.post("./demo.php", { 'action': action },
function(data) {
$("#"+placement).hide().html(data).fadeIn('slow');
});
}
</script>
<button type="button" value="hello">Hello World</button>
<button type="button" value="foobar">Foobar</button>
<p id="demo"></p>
Hello i'm trying to insert
<?php comments_template(); ?>
into the jQuery show function below, but it doesn't work. Is it even possible to insert the php function into jQuery?
*update
<head>
<script src="code.jquery.com/jquery-latest.js"></script>;
</head>
<button>Show it</button>
<a style="display: none"><?php comments_template(); ?></a>
<script>
$("button").click(function () { $("a").show("slow"); });
</script>
May be if your comments_template returns its result as a string, instead of directly printing it with echo, you just need something like this:
<?php echo comments_template(); ?>
Firstly, make your comments_template() return a full string.
Then, try structuring your code like this. You want to .hide() the comments on .ready(), and then .show() them when you click the .comment-button button.
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button class="comment-button">Show Comments</button>
<p class="comments"><?php echo comments_template(); ?></p>
<script>
$("document").ready(function() {
$(".comments").hide();
$(".comment-button").click(function () {
$(".comments").show("slow");
});
});
</script>
</body>
Don't use direct elements with $() in jQuery, either; use a class or an ID.
Also, if you want a brilliant framework to use that can collapse elements with subtle animations, try Bootstrap for Twitter and then do something like this:
<div class="comment-1 collapse">
<?php echo comments_template(); ?>
</div>
<button data-target=".comment-1" data-toggle="collapse">Show Comment</button>
No Javascript needed, since it's already in the bootstrap library.