I know this question is asked many times, but I didnt find the solution, because my case is a little bit more specific.
So, I've got a jQuery based site. I need to load the external .php pages (located on my server ofcourse) but not inside a .div or other page element (the most questions here asks just for this). I need to load the whole page including it's own head's and body's and css's and etc., without need to reload the whole page.
This is because I'm using jQuery's "Supersized" plugin, and each page has a different rotating background...
Thank's a lot:) And if it's not possible to do that - I'll go as usual, with normal links:)))
Related
I want to load more images in my website when I reach the bottom of my page. I'm using php and postgresql as my database.
For this post I simply load some text instead of image. I can write the code for it's equivalent.
So currently, I'm using a button at the bottom of my page, which when pressed re-loads the page and gives you more images(I'm displaying 50 images at a time).
But there are 2 problems with it, one being that the user will have to press the button again and again while I want it to happen automatically.
And the second one being that when new images are loaded, the previous ones are gone. I don't want to happen. For eg., if currently 1-50 images are present, my page later changes it to 51-100 while I want it to have all 1-100. I'm unable to solve this.
Please help. Thanks!
What you are looking for is commonly referred to as "infinite scroll pagination", while what you're asking for is techniclly possible using only PHP it would be a terrible user experience, as each reload would take the user to the top, and they would constantly have to continuously scroll further and further just to reach the location they were previously at.
Alternatively, handle this with JavaScript, an example: https://infinite-scroll.com/demo/full-page.
Doing simple Google searches reveals a plethora of options for JavaScript and JQuery plugins to achieve this.
An alternative, without the need for a plugin you can implement the answer to this:infinite-scroll jquery plugin
Simply call your PHP code in the form of an AJAX request when the bottom of the page is reached and append your new results. (this could be easily achieved with vanilla javascript as well).
Hope this helps.
I'm building a site where there will be four tiles on the front page. When a tile is selected, I want the content to pop up in like a window that will be a bit transparent so you can see the main page behind it.
I've successfully coded just that, getting the link to bring up another div that is otherwise hidden and I've even gotten it to load another html document. I accomplished this with XMLHttpRequest();. My question is, is there a more efficient way to do this? I know I've done something similar in PHP before in school and when I google, I do see that being a way to do it, but I'm also seeing jQuery and AJAX being mentioned. My overall goal is to get it to where if I want to update the CSS of the screens, that I only have to do that for the main page, and it affects the content pop-ups.
I hope I explained this well enough. Thank you for any advice!
It's very simple to do in jQuery:
$("#yourDivsId").load("/UrlOfYourIntendedMarkupDelivery?anyarguments=true");
Intro: I'm a newbie on both php and Javascript and have been trying to solve this issue for my site (another version of this issue here), but have had trouble putting into effect the answer by LocalPCguy.
(in short: the issue is that with infinite scroll activated, the social buttons work on the first posts that are loaded, but do not work for posts loaded subsequently).
I am working off of a WordPress them, and I've added my social buttons to an existing php file that generates most of the appearance of each post. I seem to be adding them to the right place because the buttons appear where I want them to on each post (only for the first ones on the page). Like the other two guys who posted about this problem, I am using digg digg as my social plugin.
Currently the code in the php file that generates the social buttons looks something like this:
<div class="sharing-button">
<?php dd_google1_generate('Compact (20px)') ?>
</div>
Like I said, this makes the button appear for the first posts that are loaded, but once the infinite scroll tries to load additional posts, the social button will not appear on those posts.
For now I have tried the following:
Add the code below just above or below (taken from the answer here), or inside my <div> containing the buttons in the php file.
if (typeof gapi !== "undefined") { gapi.plusone.go(); }
That didn't work I figured it was because a .php file would need some kind of signal to know that it needs to run a javascript operation. So I looked around and found a couple suggestions on how to do this, here and here. In neither case did I manage to get the buttons to appear appropriately. Below was what seemed like the least idiotic of those attempts:
<?php
echo '<script type="text/javascript">
if (typeof gapi !== "undefined") { gapi.plusone.go(); }';
echo '</script>';
?>
I also thought perhaps I needed to pass an argument into gapi.plusone.go(), and I tried passing my sharing-button <div> above, but that did not work either (php code inside a javascript script inside a php block... didn't have high hopes).
At this point I'm not sure what to do - I feel like the solution is probably quite simple but I'm completely stuck, having spent hours reading threads about javascript integration into php and the like.
Does anyone have an idea how I can go about applying that Javascript solution to my .php dependent Wordpress theme?
Many many thanks!
Short Answer: this is not possible.
Long Answer:
FIRST comes PHP, SECOND comes javascript.
The PHP "program" is run at the Server, which is you web provider's server. This server works out all the PHP stuff. After this one is finished, the files of the Website are sent to your computer. It contains, among other stuff, javascript.
And this javascript is only run on YOUR computer, the one you're looking at. Once your Browser loaded the page and starts running javscript, it's already too late to ask the Server for some more info.
There are techniques allowing for that (AJAX is the Keyword), but that's another question :-)
You need to initiate the javascript of the buttons for them to work since infinite scroll loads the next set of posts using ajax. One example I found but it only does it for facebook if the plugin uses FBML:
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
}catch(ex){}
});
I'm using a custom implemented Like Box from facebook and infinite scroll and this works just fine.
I need to create a website with an audio player that plays as users traverse through the site. At the same time, the content section needs to fade out and back in while this is still going on. So bring in another piece of HTML without reloading the page. The question I have is, how can i get all those to run correctly, while at the same time, running different Jquery plugins on different pages?
Essentially, I need to website to run like this one but with a continuous audio player in the corner or something.
http://www.chalicerecording.com/
If you notice, the page never reloads and the name of the actual file doesnt display on the browser top. This gives me the idea thats its using PHP for the page.
So with that idea, I ended up finding this.
http://www.youtube.com/watch?v=ytKc0QsVRY4
The problem im having with that is that I cant seem to figure out a way to run individual Jquery plugins on each individual PHP page without reloading the entire page. I hope this is enough info for you guys to work with.
you will need to use ajax calls to do so
jQuery.ajax
jQuery.post
jQuery.get
you also need to use jQuery fadeIn , jQuery fadeOut
Hey all..here a question from GJ in Holland.
I am busy with my first AJAX web programming and really like the idea where one php file (index) is loaded and from there xmlhttprequest are able to load and refresh content of the div's without refreshing the page.
Things are running good so far and about 4 div sections get different contents depending on which menubuttons you press (all through getdata functions and xmlhttprequests).
My last step is to integrate an extra autenthication div. I am trying to implement a nice jquery fade in fade out system with a login.php with the input fields for user name and pass; a process_login.php which compares the data with mysql and returns if theres a match or not; and finally a secured page where the user can logout when succesfully authorized.
These pages seem to work seemlessly when i load the login.php directly in browser.
When i use getdata and xmlhttprequest on the login.php to load it into a div section on index.html nothing works anymore because it seems it can't use the functions anymore which are declared on the login.php page.
Reading ajax for dummies doesn't give me any answers although i am sure there must be an easy to understand logical explanation for this fact.
I can't get my head around it..please any info is welcome...greets
GJ
Javascript loaded through ajax does not become part of the window. You have to explicitly execute it (e.g. using eval). There's no direct solution to this problem, so you need to come up with a model for your application to know about the resources that are needed by something it loads through ajax.
The best way to do this is to create some application-wide convention - e.g. set up a cross reference of pages & script files, and use $.getScript to load them on demand. Ideally you would check to see if a resource is already loaded before trying to load it again.
Here's a simple idea you could use. In the output of your login.php add a tag at the top, e.g.
<span id="script" style="display:none">login,/scripts/login.js</span>
Then after an ajax call that loads a page, do something like this:
data = $('#wrapper').find('#script').html().split(',');
if (!window[data[0]]) {
$.getScript(data[1]);
}
So basically you're passing some info in the HTML that the loader uses to figure out what it needs. The first parameter is a namespace, so you can check if it's already loaded. The 2nd is the path to the script.
You could flesh this out to account for more than one script, use JSON for the data format, etc.. but this is a basic idea.
Yeah, you could always just include all your scripts up front, too :) however loading on demand is a good idea for any nontrivial application, so you don't clutter things up with scripts you don't need. The login script's only going to be needed once per session after all.
As to why.....I dont know why this behaves so.
However as to a fix/workaround. Im in a similar situation currently where im loading in pages (actually asp/jscript rather than php). What ive discovered is that the scripts you write in the page thats being loaded in, are not available anymore when loaded through AJAX. I have experienced the same problem if the page being loaded contains an applet or other html object type of tag.
A solution to this is to move your scripts to an external file on the server, from there your page will be able to reach them regardless of whether it was loaded by AJAX as a panel or is a standalone page
Example: (this is obviously jscript rather than php but the loading will be similar.)
Page login.asp contains in <head>
<script type="text/javascript" src="scripts.js"></script>