i have a function to scroll a div like this:
function scrTo(id, to)
{
document.getElementById(id).scrollLeft = to;
}
and try to call it via php:
echo"<div id='movingtab' style='overflow-x:auto; width:765;'>";
echo"<table>...Some Table Content...</table>";
echo"</div>";
if(isset($_GET['scrl']))
{
echo"<script type='text/javascript'>";
echo"scrTo('movingtab', '".$_GET['scrl']."');";
echo"</script>";
}
The idea is to scroll to last position after the content of div changed via ajax, but when the script executed the scroll is back to begining and not back to last scroll position before div content loaded. I've try to call the function via <script onload="">, but still not working. Can anyone help solve my problem?
Probably Should use:
echo "<script type='text/javascript'>
$(document).ready(function() {
scrTo('movingtab', '".$_GET['scrl']."');
});
</script>";
<?php if(isset($_GET['scrl'])) { ?>
<script type='text/javascript'>
function scrTo(id, to){
document.getElementById(id).scrollLeft = to;
}
</script>
<?php } ?>
<div id='movingtab' style='overflow:auto; width:765px; border:1px solid blue;'>
<table><tr><td>...Some Table Content...</td></tr></table>
</div>
<button id="scroll" onclick="scrTo('movingtab', '<?php echo $_GET['scrl']; ?>')">scrollLeft()</button>
Your approach is wrong. You should call the function in the callback of your ajax request. This functionality should be done solely in JavaScript. If you are echoing JavaScript from PHP it is most probably the wrong approach.
Related
Can anyone help me. I’m trying to make jquery go to function while click on a div. Function works but it goes always on the same ID, first one.
Here is the code:
<?php do { ?>
<div class=“editNews”></div>
<script>
$(function() {
$(“.editNews”).on(“click touchstart”, function(e) {
Here I would like to execute jquery and than go to
window.location = “inserNews.php?id=<?php echo $row_rsNews[“NewsID”]; ?>;
});
e.stopPropagation()
});
});
</script>
<?php } while ($row_rsNews = mysqli_fetch_assoc($rsNews))?>
Thank you very much
I am using Googles reCaptcha API for form validation.
I have opted to have the submit button show once the validation has been complete by using a little bit of JS.
<?php
if(isset($_POST['Login'])){
$url = 'https://www.google.com/recaptcha/api/siteverify';
$privatekey = '6LerNA0UAAAAAEReb9rS5JXjtvNSYlMjKiocUv_O';
$response = file_get_contents($url."?secret=".$privatekey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
$data = json_decode($response);
if(isset($data->success) AND $data->success==true){
//show submit button
echo '<script type=\"text/javascript\">
function myFunction() {
document.getElementById("logDiv").style.visibility="visible";
}
</script>';
}
else{ // stay hidden
'<script type=\"text/javascript\">
function myFunction() {
document.getElementById("logDiv").style.visibility="hidden";
}
</script>';
}
}
?>
<div id='logDiv' style='visibility:hidden')
<?php
echo $form->add('Login',array('type' => 'submit'));
?>
</div>
Currently, the solution isn't working; when the Captcha is validated the div remains hidden.
Is this a result of a syntax error or have a made a logical error?
What is the bug in my code?
Are there any more robust solutions?
Why not simply use a php condition to show the div? I think your JS isn´t working because you never call myFunction().
Try something like this but it will become complex over time and amount of code:
if(isset($data->success) AND $data->success==true){
$showButton = true;
}
......
if($showButton) { ?>
<div id='logDiv' style='visibility:hidden'
<?php echo $form->add('Login',array('type' => 'submit'));
?> </div> <?php }
......
Or a simple Solution:
if(is_bool($data -> success) && $data -> success){
echo '<div id="logDiv">'.$form->add('Login',array('type' => 'submit')).'</div>';
}
Echo the HTML Elements only if validition was successful otherwise simply dont ouput any HTML for the Div.
Hope this Helps.
I have some implicit PHP functions which are to be called on particular front-end events; such as button onclicks. By doing so this should modify my PHP SESSION variable accordingly. However, both functions, setAlan() and setMark(), seem to be getting called even if I just want the first one to execute.
<?php
session_start();
function setAlan() {
$_SESSION['passed_user']='alan';
}
function setMark() {
$_SESSION['passed_user']='mark';
}
?>
<script>
function getAlan() { $(document.body).append('<?php setAlan(); ?>'); }
function getMark() { $(document.body).append('<?php setMark(); ?>'); }
function show() { alert(' <?php echo "{$_SESSION['passed_user']}" ?> '); }
</script>
<div class="pod">
<div class="pod_title"><h2>Select a User</h2></div>
<div>
<input type="button" onclick="getAlan();" value="alan">
<input type="button" onclick="getMark();" value="mark">
<input type="button" onclick="show();" value="show">
</div>
</div>
I don't understand why setMark() is being called automatically? By what I've written, I believe I am only defining the PHP functions, not calling them; I use JS for that. Am I missing something? Thanks in advance!
PHP is executed first, server side. Once PHP is done, your browser ( client ) gets the result, Javascript is executed on the client, so after PHP is done.
You can't mix javascript and PHP as you did with:
<script>
function getAlan() { $(document.body).append('<?php setAlan(); ?>'); }
function getMark() { $(document.body).append('<?php setMark(); ?>'); }
function show() { alert(' <?php echo "{$_SESSION['passed_user']}" ?> '); }
</script>
However you can use Javascript to call some server side PHP script with ajax ( Asynchronous JavaScript and XML ).
http://www.w3schools.com/ajax/default.ASP
In my PHP I am returning and updating a online users box however as it Echos each line out I also want it to activate a Jquery function. So if there is data there it will then echo it out and a Jquery function will take place.
example of php code ...
if($count1 > 0) {
foreach (user_list($user_name) as $user){
echo $user . "<br />";
};
echo ;// a message to activate a jquery function called userdisplay;
};
and the jquery code would look something like this...
function userdisplay(){
//do some amazing code like slide picture in from left fade text in at the top etc.
};
(I am not asking for help on the code which the function will do this is just an example)
Many thanks to anyone with an idea of how i should go about this my mind is completely blank.
just echo the call to the jquery function between a <script> tagfor example:
this is the page:
<html>
<head>
<script>
$(document).ready(function(){
//some jquery code here
});
//here is your function
function userdisplay(){
alert("triggered");
}
</script>
</head>
<body>
....
<?php
if($count1 > 0) {
foreach (user_list($user_name) as $user){
echo $user . "<br />";
};
echo "<script>userdisplay();</script>";
};
?>
....
</body>
</html>
if($count1 > 0) {
foreach (user_list($user_name) as $user){
echo $user . '<br />';
};
echo '<script>userdisplay();</script>';
};
You just have to make sure the function userDisplay() has been "echoed" before.
Easy question for a coder well-versed in JS.
I'm building a Wordpress site that uses jQuery AJAX methods, reloading either my entire content area when a top nav link is clicked or my main content area when a sidebar nav link is clicked. I want to be sure that the AJAX call is only issued if the user's browser supports JavaScript. I found some reference material here and on other sites that said by referencing my script externally, a browser unequipped with JavaScript would simply ignore all JS files. Is this accurate? I considered using php:
$my_arr = get_browser(null,true);if $my_arr['javascript'] == 1 {
echo '<script type="text/javascript" src="path/to/script"';
}
The UX I'm going for is if JS is enabled, then fire AJAX calls; if JS is disabled, just send the user to the page they've requested.
e.g.
<?php
/**
* The template for displaying all pages.
*
$ajxy = $_GET['ajxy'];
if(!is_null($ajxy)) {
$ajax_code = $ajxy;
}
if(!$ajxy) {
get_header();
}
?>
<?php if(!$ajax_code) { ?>
<div id="primary">
<div id="content" role="main">
<div class="container_12" id="contentWrapper">
<?php } ?>
<div id="contentContainer" <?php if($ajax_code) { echo 'class="ajxn"'; } ?>>
<?php while ( have_posts() ) : the_post(); ?>
<div class="grid_8" id="contentGrid">
<?php
get_template_part( 'content', 'page' );
?>
</div>
<?php get_sidebar(); ?>
<?php endwhile; // end of the loop. ?>
</div>
<?php if(!$ajax_code) { ?>
</div>
</div><!-- #content -->
</div><!-- #primary -->
<?php } ?>
<!---My Ajax Loading Script -->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/ajxy.js"></script><!---My Ajax Loading Script -->
<?php
if(!$ajxy) {
get_footer();
}
?>
and the script:
function ajxnOff(list, ajxnCode, wrapper, container) {
jQuery(list).click(function(e) {
e.preventDefault();
var $lnkGoz = jQuery(this).attr("href");
var $lnkGozAjx = $lnkGoz + '?ajxy=' + ajxnCode;
var $ajxyContainer = wrapper;
var $ajxyCurThing = container;
$ajxyCurThing.fadeOut(400, function() {
$ajxyContainer.html('<div id="loaderA"></div>');
jQuery("div#loaderA").fadeIn(400);
jQuery.ajax({
url: $lnkGozAjx,
success: function(data) {
jQuery("div#loaderA").delay(2000).fadeOut(400, function() {
$ajxyContainer.html(data);
jQuery("div.ajxn").fadeIn(400);
jQuery.remove("div#loaderA");
});
}
});
});
});
}
jQuery(document).ready(function() {
ajxnOff(jQuery("ul#topNavList a"), 1, jQuery("div#contentWrapper"), jQuery("div#contentContainer"));
ajxnOff(jQuery("ul#sidebarNavList a"), 2, jQuery("div#contentGrid"), jQuery("div#contentPageContainer"))
});
I've been learning to code on my own for about 6 months and don't have any books on the subject, so any help from the experts around here is greatly appreciated.
Here is a simple pattern to do unobtrusive ajax navigation with fallback to non-ajax links.
In your HTML:
<a class="ajaxnav" href="page.html">Text</a>
In your script:
$(".ajaxnav").click(function(event) {
event.preventDefault();
// do ajax nav here;
// URL is in event.currentTarget.href, modify it however necessary
});
If javascript is not supported, the script is simply not run, and you're left with standard web anchors with valid HREFs. If javascript is supported, the script replaces all "ajaxnav" link handling with your ajax click handler. Easy as pie.
Yes, if the user's browser either doesn't support JS or has JS disabled, script tags are essentially ignored. It doesn't hurt to include them no matter what, you just have to plan your site for what happens when they're not utilized.
As far as AJAX versus page reload goes, you simply code your site as if there were no AJAX, i.e. all links should have appropriate href attributes point to where they should go. If JS is enabled, you attach your AJAX to the links via its onclick handler and prevent the default action by returning false from whatever function handles the click event.