Hi does anyone know if you can control a div thats encased in php like the one below?
I want to try and find a way of using javascript to fade the div in after a 3 second delay when the page loads?
Can anyone show me a way of doing this?
i would imagine its something like this:
<script>
jQuery(document).ready(function($){
$('.dashboard_intro').hide().delay(2000).fadeIn(2000);
$('.dashboard_intro_arrow').hide().delay(2000).fadeIn(2000);
$('.dashboard_intro_text').hide().delay(2000).fadeIn(2000);
$('.exit_intro').hide().delay(2000).fadeIn(2000);
});
</SCRIPT>
<?php
$dashboard_intro = dashboard_intro();
while ($intro = mysql_fetch_array($dashboard_intro))
if ($intro['dashboard_intro'] == '0') {
echo "<div class=\"dashboard_intro_arrow\"></div><div class=\"dashboard_intro\"></div><div class=\"dashboard_intro_text\"><strong>Welcome to Your Dashboard</strong><br/><br/>These are your tools: Check Messages, Reviews & more.</div><div class=\"exit_intro\"></div>";
} ?>
PHP is run on the server and doesn't affect what jQuery does later in the browser. What does the rendered HTML look like? Something like your example code should do just fine. What's the problem, exactly? Here's a simple demo:
http://jsfiddle.net/tXhwH/1
<script>
$(function() {
$('.dashboard_intro_text').delay(3000).fadeIn(2000);
});
</script>
Related
I want to open a bootstrap modal on page load. but my problem is that at every page refresh, it do gets launch but I want to display it only single time when user redirect on the that page.
Can anyone suggest me how to do that?
Thanks in advance.
Can it be possible in this way while on a page load?
<script type="text/javascript">
$(window).on('load',function(){
$('#myModal').modal('show');
});
</script>
Hoping that you have used bootstrap modal box as you haven't mentioned the code so.
Yes there are many ways to do that... You can send $_GET parameter in url Something like this:-
Suppose Url :- localhost/modal?open=modal
Now in Jquery You can do like this:-
<script> //not forget to add ready function
<?php if(isset($_GET['open']) && $_GET['open']=="modal"){ ?>
$("#somemodalid").modal('show') //open modal here
<?php } ?>
</script>
Hope it helps!
I am trying to test the jQuery GET method, but what I am getting as result is completely insane. All I am trying to do is call a function from my controller with jQuery and then display the echoed value in a div within my view. Below is my code and finally a breakdown of the problem I am encountering.
Controller
public function generate_suggestions2() {
echo "James";
}
View views\suggestions_v.php
<body>
//This DIV is used a button to call the jQuery function
<div id="next_btn">
<p>Click here to display a name</p>
</div>
//In this div the value retrieved by the jQuery should be displayed
<div id="listB"></div>
//This is the function that calls the function within my controller
<script type="text/javascript">
$( "#next_btn" ).click(function() {
$.get("core/generate_suggestions2/",
function(data) {
$( "#listB" ).html(data);
});
});
</script> //For some reason I need to put the script at the end of the body. When it's in the head nothing happens when I click the button. Also something I do not understand.
</body>
Now the problem is that when I click the DIV next_btn it does NOT display the James in the DIV listB.
Instead it populates the DIV listB with my source code from my main view views\core_v.php
I have no idea how this is even remotely possible, so please if you have a clue or even better you know what I am doing wrong please tell me. I am trying to get this to work for the past three days without any success or progress :(
Try using this code in your view
<script type="text/javascript">
"$( "#next_btn" ).click(function() {
$.get("<?php echo site_url().'/core/generate_suggestions2';?>",
function(data) {
$( "#listB" ).html(data);
});
});"
</script>
Also delete the </script> tag just right before this block comment.
Regarding this comment you have:
//For some reason I need to put the script at the end of the body. When it's in the head nothing happens when I click the button. Also something I do not understand.
It is because the DOM is not yet fully loaded and Javascript executes its code when the browser has finished loading the DOM you are referring to. So you either have to put it after the DOM element you want to edit, like you do now or you could use $(document).ready(function(){
}
); .
Read more about it here
This line is pretty strange:
</script><script type="text/javascript">
Try to delete first closing tag 'script' on it.
I have this jQuery script in my web page:
<script>
$(function() {
function callAjax(){
$('#lastlogins').load("ur.php");
}
setInterval(callAjax, 1000 );
});
</script>
But, in container lastlogins, there isn't shown file ur.php, it is just empty. I have created div like that:
<div id="lastlogins">
</div>
I don't see any wrong on your code. Only problem would be with your ur.php file. Just try to access your file directly and see, if that works.
In the meanwhile, refer my sample code.
<script>
$(function() {
function callAjax(){
$('#lastlogins').load("/SivaCharan/EGxWL/show");
}
setInterval(callAjax, 1000 );
});
</script>
<div id="lastlogins">
</div>
Refer my LIVE DEMO
After a quick review of the .load function, there can only be one possibility... your PHP file is not returning anything useful. Run it directly in a browser and make sure it returns valid HTML.
Your jQuery function is correct as is.
I read this question, and I'm pretty sure it's 90% of what I need, but I'm after something more than just this, and my success formulating my query in Google has been less than stellar.
What I'd like to do
I have a form on a site that, when submitted, needs to connect with a database, and then the user needs to be apprised of the result. I'm trying to get the result page to load in a modal jQuery dialog instead of forcing a full page reload. At present, I'm just trying to create a jQuery dialog that replaces the contents of a <div> with the product of a PHP file. I know I will get the PHP file's execution result this way. That's what I'm after, but it currently is not working.
My code currently looks like this:
$(document).ready(function() {
$("#dialog").get('include.php', function(data) {
$("div#dialog").html(data);
});
});
And include.php is simply:
<?
echo "<h1>Loaded</h1>";
?>
When I load the page, the original contents of #dialog are still there. I have a strong suspicion that what I'm failing to grasp isn't major, but I've had bad luck finding the fix. I'm a web dev newbie. How do I wwebsite as on the internet?
You are calling get on a jQuery result. That'a a different method than $.get, the one you should be using:
$(document).ready(function() {
$.get('include.php', function(data) {
$("div#dialog").html(data);
});
});
i have been using Ajax call for the same purpose. So try this :
$(document).ready(function() {
$.ajax('include.php',
success : function(data) {
$("#dialog").html(data);
});
});
If you want to replace the entire contents of the #dialog DOM object with the HTML you load, then you probably want to use .load():
$(document).ready(function() {
$("#dialog").load('include.php', function(data) {
// no need to set the html here as .load() already does that
});
});
I spent about hour and did not find any clue how to highlight my div.
Ok example my code.
1.proccess.php
$_SESSION['msg']='<div class="success">Your account has been updated</div>';
header("location:http://domain.com/account.php/");
2.account.php
if ($_SESSION['msg']!="") {
echo $_SESSION['msg'];
unset($_SESSION['msg']);
}
Now I want the javascript or jquery to highlight the <div class="success"> on account.php. How to do that? Let me know :)
jQuery UI has a highlight effect:
$(document).ready(function() {
$('div.success').effect("highlight", {}, 3000);
});
The above code will need to be loaded into the page containing your div, along with jQuery, jQuery ui.core.js and effects.highlight.js
You probably were looking for this:
http://docs.jquery.com/UI/Effects/Highlight
That's the highlight effect which "focusses" your attention. So "focus" was just the wrong search term to go for?