I'm trying to keep my ajax call on the same line, as detailed here: http://external.sidewaykill.com/versound/motd.php.
It won't, so what can I do?
$(document).ready(function() {
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='http://static.sidewaykill.com/img/ajax-loader2.gif' alt='loading...' />";
// load() functions
var loadUrl = "playercount.php?id=2";
$("#servercount").html(ajax_load).load(loadUrl);
});
This has nothing to do with PHP but everything to do with the absolutely awful markup of your HTML and the lack of CSS. You're going to want to wrap all of this "free-text" inside of a div or two, and then make sure you're putting the wrapper div inside of the infobar div
Sample CSS:
#infobar p{
float: left;
margin-left: 5px;
}
HTML:
<div id="infobar">
<div style="float: left;">
<p>Welcome! Our server count is:</p>
<p>1 / 10</p>
<p>We hope you enjoy your stay! We are currently playing on gm_construct.</p>
</div>
</div>
its because the ajax call returning a div element,
as this :
<div id="count"> 0 / 10</div>
Since div is a block element it will always render in a new line. there are two solutions for this
one would be to return a <span> element instead of the div
second will be if u are unable to change the return value you can fix it via css
#servercount #count { display : inline }
My suggestion is to go with the first solutions
Related
I have the following HTML generated by PHP:
<input><label>anchor 139</label>
<div class="slidingDiv 139" style="display: none;">content 139</div>
anchor 140</label>
<div class="slidingDiv 140" style="display: none;">content 140</div>
<input><label>anchor 141</label>
<div class="slidingDiv 141" style="display: none;">content 141</div>
<input><label>anchor 142</label>
<div class="slidingDiv 142" style="display: none;">content 142</div>
As you can see it, the second class of anchor and div is the same for each iteration of the loop. I did like this because I am using a jquery snippet to hide/show div onclick on anchor.
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
The problem of this jquery code: It doesn't take into consideration the second class I am adding (to anchor and div). In fact I want to hide the specific div related to his anchor, not all the divs.
Thank you for your time and help.
Try using .next which seems to do the trick for your markup.
$(this).next('.slidingDiv').slideToggle();
Full Code:
<style>
.slidingDiv { display: none; }
</style>
<script>
$(document).ready(function(){
$('.show_hide').click(function(e){
e.preventDefault(); //to prevent default action of link tag
$(this).parent().next('.slidingDiv').slideToggle();
});
});
</script>
Note: I added display:none style rule to .slidingDiv so that it is hidden when the page is rendering and not after page is rendered.
Try this using next:
$('.show_hide').click(function () {
$(this).next(".slidingDiv").slideToggle();
});
Your code:
$(".slidingDiv").slideToggle();
was sliding all the div with class slidingDiv. But we need to take into consideration the div next to the element being clicked in the current scope only using the next() method.
Hoping someone can see my error. Probably easiest if you take a look at my test page
Notice the shifting of the contents within <div id="ajax" style="background-color:red">
when clicking on a .menu {position:fixed;} element.
Strange that only one (Home) shifts not the others (Prog, Jet, Wind, Mesonet, Disc,Rad/Sat)
The PHP that the ajax calls is of similar format on all pages as follows:
<?php
// do php stuff
echo <<<HTML
<div class="content">
<!-- html stuff -->
</div>
HTML;
Don't know if its a PHP or css issue nothing I've tried has given any indication.
Appreciate your ideas... thanks
EDIT: added ajax
var options = {
success: function(result) { $("#ajax").html(result); },
beforeSend: function() {},
url: file,
type: "post"
};
$.ajax(options);
Edit: Resolved
The answer to my question is "something is inserting some whitespace before the content div" as given by Explosion Pills. Strangely that something is caused by PHP's include "file.php"; being called inside home.php
Another question is appropriate I think so I'll post the link here later.
Thanks All
follow up question here
Your success function is replacing your content:
<div id="ajax" style="background-color:red"><div class="content"></div></div>
with:
<div id="ajax" style="background-color:red">Ajax Content</div>
The class 'content' has CSS: .content {margin:auto; background-color:#eee; border-radius:15px; border:3px solid black; padding:.5em;} that is removed with the ajax success.
Just remove <div class="content"></div> from your page or modify the success function to replace the content of the first div using something like: success: function(result) { $("#ajax div:first").html(result); },...
I have following html structure in editstaff.php:
<div id="result" style="display:none">This is result div</div>
<form id="adres" onsubmit="return submitForm();">
<input type="hidden" name="type" value="adrs" />
<input type="submit" value="Address" /></form>
And in inline-style:
#result{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
What this html page do, clicking on "Address" button of "adres" form, some post data is send to another php page which shows information based on sent data on a pop-up like div (which style was display:none) fadeIn from display:none. The javascript/jquery codes for this purpose are as follows:
<script>
function submitForm(){
var data=$("#adres").serializeArray();
/* alert(data); */
data.push(
{
name:'sname',value:$("#title").val()
}
);
$.post("geteditdata.php",data,
function(data){
$("#result").html(data);
positionPopup();
$("#result").fadeIn(1000);
}
)
return false;
}
function positionPopup(){
$("#result").css({
left: ($(window).width() - $('#result').width()) / 2,
top: ($(window).width() - $('#result').width()) / 2,
position:'absolute'
});
}
$("#divclose").live('click',function(){
$("#result").fadeOut(500);
});
</script>
i.e the div in editstaff.php with fetched data will pop-up like following structure:
<div id="result">
some_value
Close
</div>
All things is going on okay upto this stage. But when I am clicking on "Close" link on pop-up div the div is not closing(fadeOut) with $("#divclose").click(function()
Why this is not happening in this case?
can anybody give a solution for me?
I am giving a demo page where you can see the problem in practical.
Please visit http://raddacentre.org/editstaff.php and
write 'Afsar' in "Search by name" field and
then press "show".
After page loads, please press "Address" button which will be at the bottom of the page.
Then a pop-up div will be shown where there will be a link named "Close".
Press that button and please check why this div is not fade in there?
As I used jquery version 1.3, I used $("#divclose").live method instead of $(selector).on method.
Any help will be appreciated.
in geteditdata.php there is only this code:
<?php
echo $_POST['sname'];
?>
<br /><br />Close Here
You are using really old jQuery 1.2.3 (it's not jq 1.3), I'm not sure if .live exist in that version. So two things:
Use new jQuery (I suggest 1.9)
Use .on instead of .live (read about it, syntax is a little bit different)
Code should look like that:
$("body").on('click', "#divclose", function(){
$("#result").fadeOut(500);
});
Instead of "body" you can use other container that exist when event is being binded.
Hoping someone can point me in the right direction to an annoying problem.
To summarize before I put the code; I have two files.. a html file with javascript called "bookings.php", and a php file with php "getBookings.php".
The bookings.php file contains all the static information like menus, text etc along with javascript + ajax calls.
I'm calling the getBookings file successfully with javascript/ajax and works well and i don't have any problems with it.
My problem is, that from the file that is loaded (getBookings.php); there are some html elements that i need to toggle. The jQuery for it, I have included in the bookings.php file.. but the jquery won't apply or work when the ajax file is called.
All the contents on getBookings.php gets loaded into an #bookingSummary element.
Now, my code is very long, so i will include all the important parts..
// Usual Head Content, Meta, CSS, jQuery files
// Filters
<script language="javascript" type="text/javascript">
function bookings()
{
var fltr="";
if(document.frm.bkid.value != "")
fltr+='bkid='+document.frm.bkid.value+'&';
if(document.frm.customer.value != "")
fltr+='cid='+document.frm.customer.value+'&';
if(document.frm.site.selectedIndex != 0)
fltr+='sid='+document.frm.site.value+'&';
if(document.frm.status.selectedIndex != 0)
fltr+='st='+document.frm.status.value+'&';
if(document.frm.supp.selectedIndex != 0)
fltr+='sup='+document.frm.supp.value+'&';
if(document.frm.datefrm.value != "")
fltr+='dfrm='+encodeURI(document.frm.datefrm.value)+'&dto='+encodeURI(document.frm.dateto.value);
document.getElementById('bookingsummary').innerHTML="<br /><p align='center'> <img src='img/bigloading.gif'></p>";
url='get/getBookings.php?'+fltr;
getAjaxRec(url, viewbookings);
}
function viewbookings()
{
if (xmlHttp.readyState == 4 && (xmlHttp.status==200 || window.location.href.indexOf("http")==-1))
{
document.getElementById("bookingsummary").innerHTML = xmlHttp.responseText;
}
}
</script>
The Above code is the javascript that all works fine.. the following is the html code that calls the above function - bookings():
<!-- Several Form fields are here..-->
<input type="button" value="Apply Filter" class="searchBtn" onClick="bookings();">
<!-- Show booking results -->
<div id="bookingsummary"></div>
Now, within the getBookings file there is an html element with a class name "hiddenDetails" that i need to toggle and the Jquery for it is:
<script type="text/javascript">
$(document).ready(function() {
$('.bookingKeyDetails').click(function()
{
$(this).next('.hiddenDetails').slideToggle('medium");
});
});
</script>
The above code all works apart from the jquery.. here is a snippet from the getBookings.php file.. the part i want to apply the jquery to..
<?php
// A while loop happens then..
$result="
<div class=\"bookingKeyInfo\">
<div class=\"lb1\"><input type=\"checkbox\" name=sup1x".$rw['id']." ></div>
<div class=\"lb2\">".$rw['id']." </div>
<div class=\"lb3\">".date('d/m/Y', strtotime($rw['pickupDate']))." <strong><font color=\"#FF0000\">".date('H:i', strtotime($rw['pickupTime']))."</font></strong></div>
<div class=\"clearLeft\"></div>
</div>
<div class=\"bookingKeyDetails\">
<div class=\"b-one\"><img style=\"margin-top:9px; padding-bottom: 5px;\" src=\"$base_dir/img/".strtolower($rw['status']).".png\"></div>
<div class=\"b-two\"><img id=\"isCustomerEmailed\" style=\"margin-top:9px; padding- bottom: 5px;\" src=\"$base_dir/img/unassigned.png\"></div>
<div class=\"b-three\"><img id=\"isSupplierEmailed\" style=\"margin-top:9px; padding- bottom: 5px;\" src=\"$base_dir/img/unassigned.png\"></div>
<div class=\"b-four\"><img id=\"isSupplierConfirmed\" style=\"margin-top:9px; padding- bottom: 5px;\" src=\"$base_dir/img/unassigned.png\"></div>
<div class=\"b-trip\">".substr($rw['DA'],0,6)."..<strong> to </strong> ".substr($rw['DB'],0,6)."..</div>
<div class=\"b-pax\">".$rw['pax']." Pax</div>
<div class=\"b-cost\">€$cost </div>
<div class=\"b-supplier\">".substr($sup,0,10)."..</div>
<div class=\"clearLeft\"></div>
<div class=\"hiddenDetails\">More Booking Information...</div>
</div>";
echo $result;
?>
I know this is a very long description of the problem.. so I have tried to give my code exactly as it is..
Could anyone shed some light, as to why the jQuery isn't working.. cz it works separately, just not on any element that is called from getBookings..
The problem is, you're binding an event handler with jQuery to bookingKeyDetails before it actually exists on the page. Remember that this element is being added to your html only after the page is loaded, so any actions you make in $(document).ready(function() { will not apply to it.
Bind the event handler only after you change the html:
function viewbookings()
{
if (xmlHttp.readyState == 4 && (xmlHttp.status==200 || window.location.href.indexOf("http")==-1))
{
document.getElementById("bookingsummary").innerHTML = xmlHttp.responseText;
$('.bookingKeyDetails').click(function()
{
$(this).next('.hiddenDetails').slideToggle('medium');
});
}
};
Since the HTML element you need to toggle was never on the page when the calling page instantaiate the jQuery to toggle, you need to reinitialize the function after a successful call from your ajax.
You can use jQuery .success callback function for their AJAX call tools... I use that to help with this kind of processing instead of native AJAX. Makes life simpler and better cross browser support.
Just call your toggle function after the success.
http://api.jquery.com/jQuery.post/
It's very obvious that it will not toggle because you have writtent the Jquery in the "bookings.php". During the page load of bookings.php, it will not find any content of the getBookings.php so that Jquery will not apply as no element is available with that id.
You have to bind the event for the toogle on Ajax success event of the when you are calling for getBooking.php.
$.ajax({
url: URL,
success: function(){
$('.bookingKeyDetails').click(function()
{
$(this).next('.hiddenDetails').slideToggle('medium");
});
},
error: function(){
alert('failure');
}
});
You're using single and double quotes in your function call
$(this).next('.hiddenDetails').slideToggle('medium");
user 'medium' or "medium"
How do I put this together? I'm working on this website that requires that every time that a item from the menu is clicked the background-position of two specific DIVs change and keep the selection.
Here is my attempt:
First I create a variable "p" to save on the url/address the selected page, so for example, if you are in about us you will probably see something like this on the address bar:
website.com/index.php?p=aboutus
On the menu, on the button about us I did this with a call to the function changeBG onClick:
About Us
I figured I need javascript to do the trick and here is where I'm stock.
This is the script that goes in the header:
<script type="text/javascript">
<?
// Set "p" value to HOME if previously empty.
if ($_GET['p']=='') $_GET['p']='home';
?>
function changeBg(pvalue) {
if (pvalue == '') {pvalue = '<?=$_GET['p'];?>';
}
if (pvalue=='aboutus'){
document.getElementById('this_is_the_first_to_be_changed').style.backgroundPosition=0 20px;
document.getElementById('this_is_the_other_to_be_changed').style.backgroundPosition=0 80px;
if (pvalue=='contactus'){
document.getElementById('this_is_the_first_to_be_changed').style.backgroundPosition=0 10px;
document.getElementById('this_is_the_other_to_be_changed').style.backgroundPosition=0 100px;
}
}
</script>
This is what goes on the body:
<div id="left_menu">
About Us
Contact Us
</div>
<div id="this_is_the_first_to_be_changed">
</div>
<div id="this_is_the_other_to_be_changed">
</div>
Can anyone spot why this doesn't work?
Try it using quotes:
style.backgroundPosition="0 20px";
UPDATED
Also, what about this line:
pvalue = '';
you are setting pvalue='=aboutus'
UPDATED
The script element is incorrect:
<script type="java/text">
right is:
<script type="text/javascript">
In addition use firebug or chrome to see the JS generated in the page.