My php page has at the top of the page before any jquery a php variable called $pause.
The value assigned to this is read from a database.
What I'm trying to do using jquery is show a div, then delay for the $pause value then hide the div.
This shows and hides the div, how do I add the delay ?
$("#div1").show();
$("#div1").hide();
Thanks
If you can parse php inside of your js, you can echo it:
var pause = <?php echo $pause; ?>
If not, attach the value to an element such as a hidden input so that you can access the value with jquery.
Then you could do:
$('#div1').show().delay(pause).hide(0);
Note: You need to pass the duration to hide() in order for delay() to work:
When a duration, a plain object, or a "complete" function is provided, .hide() becomes an animation method
Here's a fiddle
add $pause to a HTML Element...for example body:
<body data-pause="<?=$pause?>" >
</body>
and js:
$("#div1").show();
setTimeout(function () {
$("#div1").hide();
}, parseInt($('body').attr('data-pause'), 10));
If you would like to keep your javascript Inline write this at the end of your html before
<script>
$("#div1").show(0).delay(<?php echo $pause; ?>).hide(0);
</script>
if you don't want to keep your code inline you can add an attribute to your element and use that:
For example:
<div id="div1" delaytime="<?php echo $pause; ?>">Hello World</div>
And finally use the javascript below:
$("#div1").show(0).delay(jQuery(this).attr('data-pause')).hide(0);
Related
So if i have a small layout stored in example.blade.php, How do i use it in jquery ?
I want to include certain elements such as textboxes when a particular radio button is checked otherwise not.
Example:
$("document").ready(function(){
if ($("#role").prop( "checked")) {
$("#content").html(#include('layouts.nav'));
}
else
{
$("#content").html('');
}
});
The above code does not work so please provide some solution.
You can not do that. #include() is Blade and will be interpreted by PHP while JS runs in the browser. The Blade directives are already interpreted by PHP when the code hits the browser
You can create a hidden div in your view and then use jquery to get it's html content, here is an example:
<div class="layouts-nav" style="display:none;">
#include('layouts.nav')
</div>
<script>
$("document").ready(function(){
if ($("#role").prop( "checked")) {
var layoutNav = $('#layouts-nav').html();
$("#content").html(layoutNav);
}
else
{
$("#content").html('');
}
});
<script>
My question is simple.
I have the following code:
<div class="last"
<?php
if hasClass(last){
echo " style='width:100%;' ";
}
?>
></div>
I know the if statement is wrong, but the idea is there. I want to know how can I check if this div has the .last class then echo something.
I've been searching around but didn't work anything (didn't find much though).
Best regards.
As already in the comments told it's possible with PHP with DOM parsers.
I'm gonna give you 2 very simple solutions which will save you a lot of work:
CSS:
<style>
.last {
width:100%;
}
</style>
jQuery:
<script type="text/javascript">
$(document).ready(function(){
if($('div').hasClass('last')){
$('div').css('width', '100%');
}
});
</script>
PHP runs on server, so it generates HTML. If you have that class="last" you don't need to check - it's part of the code....hard-coded.
But you can have some PHP variable and depending on it's place print out class and also style for that other element:
<?php
$print_last = true;
?>
...
<div <?php if ($print_last) echo 'class="last" ';
<?php
if ($print_last){
echo " style='width:100%;' ";
}
?>
></div>
But if you want to check on html element you have to do it on client side (browser) from JavaScript and jQuery can be helpful too.
It is possible to check that using PHP, however that couldn't be done easliy (you'll need to parse buffered HTML using DOM parser, then look up for divs, etc...).... Much better solution is to do that with Javascript/jQuery, using Document.getElementsByClassName() function.
Sample solution:
var elements = document.getElementsByClassName("last");
for(var i = 0; i < elements.length; i++)
{
var element = elements[i];
element.style.width = "100%";
}
#azhpo
Obviously the HTML being the front end language you have to pass the elements either through some submit button or via ajax request.
Using submit button: select the class name of div using either javascript
var className = document.getElementById("myDIV").className
document.getElementById("myHiddenField").value = className;
Now on clicking the submit button it would get submitted
Using ajax:
Again take the classname either through javascript / jquery
var className = jQuery("#myDiv").attr("class");
Now fire ajax query and send the class name to your script
jQuery.ajax({
url: 'file.php',
type: 'POST',
data: 'class='+className,
success: function(data){//do whatever you want},
error:function(){//do whatever you want}
});
I have very limited knowledge with scripts so I hope you guys can help me with a simple solution to a small problem that I have...
I'm using the following jquery function to refresh a div with new content when a link is clicked
<script>
$(function() {
$("#myButton").click(function() {
$("#loaddiv").fadeOut('slow').load("reload.php").fadeIn("slow");
});
});
</script>
My problem is, I need to send 2 variables to the reload.php page to use in a mysql query (I have no idea how to accomplish that), also I need to make multiple links work with this function, at the moment I have multiples links with the same id and only the first link works so I guess I must associate different ids to the function in order for this to work, how can I do that?
here's the page where i'm using this: http://www.emulegion.info/teste/games/game.php
You may want to use document ready instead of function on your first line as this will make sure the code is not executed until the full page (and all elements) have loaded.
You can then use the callback functions of the fade and load to perform actions in a timely manner.
additional variables you can add after the .php, these can then be read in your reload.php file as $var1 = $_GET['var1'];
Do make sure to sanitize these though for security.
<script type="text/javascript">
// execute when document is ready
$(document).ready(function() {
// add click handler to your button
$("#myButton").click(function() {
// fade div out
$("#loaddiv").fadeOut('slow',function(){
// load new content
$("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){
// content has finished loading, fade div in.
$("#loaddiv").fadeIn('slow');
}); // end load content
}); // end fade div out
}); // end add click to button
}); // end document ready
</script>
For different variables you could add a HTML5 style variable to your button.
<input type="button" id="myButton" data-var1="foo" data-var2="bar" />
You can retrieve this when the button is clicked:
// add click handler to your button
$("#myButton").click(function() {
// get vars to use
var var1 = $(this).data('var1');
var var2 = $(this).data('var2');
...
load("reload.php?var1="+var1+"&var2="+var2
if you have multiple buttons/links I would use class instead of id "myButton". that way you can apply the function to all buttons with the above script. Just replace "#myButton" for ".myButton"
First, you should use .on('click', function() or .live('click', function() to resolve your one click issue.
You'll want to do something like:
<script>
$(function() {
$("#myButton").on('click', function() {
var a = 'somthing';
var b = 'something_else';
$.post('url.php', {param1: a, param2: b}, function(data) {
//data = url.php response
if(data != '') {
$("#loaddiv").fadeOut('slow').html(data).fadeIn("slow");
}
});
});
});
</script>
Then you can just put var_dump($_POST); in url.php to find out what data is being sent.
Try creating a function that would accept parameters that you want.
Like:
$(document).ready(function(){
$('.link').click(function(){
reload(p1,p2);
});
});
function reload(param1, param2){
$("#loaddiv").fadeOut('slow').load("reload.php?param1="+param1+"¶m2="+param2).fadeIn("slow");
}
But by doing the above code your reload.php should be using $GET. Also you need to use class names for your links instead of id.
<script type="text/javascript">
// execute when document is ready
**$(document).ready(function() {**
**$("#myButton").click(function() {**
**$("#loaddiv").fadeOut('slow',function(){**
**$("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){**
// content has finished loading, fade div in.
$("#loaddiv").fadeIn('slow');
});
});
});
});
</script>
$("#myButton").click(function() {
// get vars to use
var var1 = $(this).data('var1');
var var2 = $(this).data('var2');
I want to run a function only when a div gets loaded.
When I load the page, a number of files are loaded. At the end of the list, PHP echoes a div. When this one is displayed, jQuery should run a function.
I can do this with a click-event, but I want it to work automatically, without pushing a button.
This is how it works with a click:
$("#PP_end_show").live("click",function(){
$("#PP_head_bar").slideToggle("slow");
$("#PP_info_file_wrap").slideUp("slow");
});
This is the div echoed by PHP:
<?php echo "<div id=\"PP_end_show\"></div>"; ?>
The output is generated after an AJAX call:
<form id="PP_search_input" method="post" name="search_ID" ONSubmit="xmlhttpPost('PP_search_stream_client.php', 'PP_search_input', 'PP_thumb_output', '<img src=\'images/wait.gif\'>');return false; ">
<input name="search_string" type="text" class="PP_input" id="search_string" value="<?php echo $_POST['search_string']; ?>"/>
<button type="submit" class="PP_submit" id="search_submit"> search </button>
at the end of the generated output the specific div will be printed and should trigger the new jQuery function.
This is how I would tackle this issue, assuming I've understood it correctly in which the submission of the form PP_search_input, returns the html needed, in which then a the javascript code should be executed.
$('#PP_search_input').submit(function() {
$.ajax({
url: 'PP_search_stream_client.php',
type: 'post',
data: $(this).serialize(),
success: function(html) {
$(html).insertAfter('#whereToInsert') //change to however you want to insert the html
.find("#PP_head_bar").slideToggle("slow").end()
.find("#PP_info_file_wrap").slideUp("slow");
}
});
});
Try putting your javascript code inside the generated ajax code.
For example if your ajax is generated from the php code
<?php echo "<div id=\"PP_end_show\"></div>"; ?>
then try smth like this
<?php
echo "<div id=\"PP_end_show\"></div>";
echo '$(function(){$("#PP_head_bar").slideToggle("slow");';
echo '$("#PP_info_file_wrap").slideUp("slow");});';
?>
You could use the livequery plugin
You would then use it as follows :
$('#PP_end_show').livequery(function(){
$("#PP_head_bar").slideToggle("slow");
$("#PP_info_file_wrap").slideUp("slow");
});
The code in the function would execute when the element in the selector (#PP_end_show) was added to the DOM
Why not echo your javascript along with the DIV code?
You can use PHP to echo Javascript like this:
After your code:
<?php echo "<div id=\"PP_end_show\"></div>"; ?>
Write this:
echo "<script type='text/javascript'>
$('#PP_head_bar').slideToggle('slow');
$('#PP_info_file_wrap').slideUp('slow');
";
echo "</script>";
This should work.
In your JS, wrap the code you want to execute in a function. i.e.
function showInfoBlock() {
$("#PP_head_bar").slideToggle("slow");
$("#PP_info_file_wrap").slideUp("slow");
}
In your PHP, write out the JS needed to call that function after writing out the PP_end_show div. i.e.
<?php echo "<div id=\"PP_end_show\"></div><script>$(function() { showInfoBlock(); })();</script>"; ?>
This does what you are asking:
(function($){
var checkForEndInterval = window.setInterval(function(){
if ($('#PP_end_show').length) {
// stop interval
window.clearInterval(checkForEndInvertal);
// call your code now
$("#PP_head_bar").slideToggle("slow");
$("#PP_info_file_wrap").slideUp("slow");
}
},200);
})(jQuery);
However this is not a good idea because its silly and what you are asking for hints you not understanding but that is why you are here. Since you already know when your AJAX is called, call it explicitly and attach a success handler to it.
$.ajax({
/* your other setup code here */
success : function(data) {
// run your code
}
});
If you were not doing AJAX as you say, I would put a script tag at the end of your output and have it call your code as the simplest approach. Even still, you could use the jQuery.load method (not event) which by default executes JavaScript from your response.
Happy coding.
keep that jquery live-click-function as it is
& run the below code in php
<?php
echo "<div id=\"PP_end_show\"></div>";
echo "$(function(){ $(\"#PP_end_show\").click(); });";
?>
$.ready(function(){
$("#wrapper").add("div").attr('id','PP_end_show');
$("#PP_head_bar").slideToggle("slow");
$("#PP_info_file_wrap").slideUp("slow");
});
<div id='wrapper'>
</div>
Bind the live event to a custom event that is triggered by the document:
$(document).trigger('echo');
$("#PP_end_show").live("echo", function(){
$("#PP_head_bar").slideToggle("slow");
$("#PP_info_file_wrap").slideUp("slow");
});
References
jQuery API: .trigger()
JQuery API: .live()
Jason Brumwell enter right answer, also you can use the $.when function of JQuery.
http://api.jquery.com/jQuery.when/
If the action you want to perform once the desired div loads is bound to a click event, simply trigger click at the end of the ajax request something like:
$.ajax({
url:'whatever.php',
type:'post', //guessing obviously
success: function(data){
$('#PP_end_show').click(); //etc
}
});
These guys are right though, you are doing this all backwards mate
Does it have to be that exact div? It seems to me that you should just execute the function on load of the document. That way you know all your elements are loaded.
$(function()
{
// This function is executed when the DOM is ready, including that last div.
// Could be that images are still loading, but your code usually won't depend on that.
}
Try this,
if(window.isBodyLoaded){
try{
$("#PP_head_bar").slideToggle("slow");
$("#PP_info_file_wrap").slideUp("slow");
}catch(d){
alert(d)
}
}
Use a callback function.
Its a function that will be triggered as soon as your event is handled.
so for Jquery:
$("#PP_end_show").live("click",function(){
$("#PP_head_bar").slideToggle("slow");
$("#PP_info_file_wrap").slideUp("slow");
}, myCallback());
function myCallback(){
//Do what ever you want to happen after
//the div creationin this function
}
And I think that should do the trick
php sends html strings to html via ajax wrapped in <p class="select"></p> tags, css reads class perfectly. javascript/jquery does not. javascript/jquery wont even parse <p onclick="function()"></p>. What am i doing wrong?
heres my php (sends data via ajax fine)
echo "<p class='select' onclick='populate();' >{$row['song_name']} </p>";
heres my css (works fine)
p.select{color:#fff;padding: 5px;margin:0}
p.select:hover{color:#fff;background:#f60;cursor:pointer;}
heres my javascript
method 1 jquery.
$("p .select").click(function(){
var str = $(this).val();
alert(str);
});
method 2 onclick function.
function populate()
{
alert('here')
}
neither of the two methods respond at all. Guru why is this?
$("p .select").live ( "click" , function(){
var str = $(this).text();
alert(str);
});
See
Events/live
Binds a handler to an event (like
click) for all current - and future -
matched element.
Two things:
p .select will choose <p> tags containing an element with class select. p.select selects <p class="select">.
Why not move the populate function to within the live? I suspect the jquery live (or click) removes any explicit handlers.
Try this:
$("p.select").live("click",function()
{
var str = $(this).text();
alert(str);
populate();
});
I posted a working(in Firefox) example below. I think you forgot to put the jquery method inside the onload event. Beside the other (small) bugs...
<html>
<head>
<style>
p.select{color:#fff;padding: 5px;margin:0}
p.select:hover{color:#fff;background:#f60;cursor:pointer;}
</style>
<script src="jquery-1.3.2.min(2).js" type="text/javascript"></script>
<script type="text/javascript">
function bodyOnLoad() {
//instead of "p .select" "p.select"
$("p.select").click(
function(){
//changed val() into text()
var str = $(this).text();
alert(str);
});
}
</script>
</head>
<body onload="bodyOnLoad()">
<p class='select'>Songname</p>
</body>
</html>