jQuery function:
function refresh(ppp){
$("#content").load("process.php"+ppp)
}
PHP process.php:
$vID = $_REQUEST[id];
include page_$vID.php;
The problem is that any code like datatables, jquery stuff doesn't load in the new content. I have to include all .js and .css in this piece of script. And some of the jQuery plugins doesnt work anymore.
What are the best prectices in this case? How do you integrate PHP+jQuery and jQuery's Load()?
lookup $.ajax() might do what you want. http://api.jquery.com/jQuery.ajax/
It's hard to say with the little data you have provided, but my guess is that you are trying to add stuff to the interface that requires some sort of initialization by javascript.
For instance, if you have some content like this:
<input class="datepicker" />
And a plugin that adds a datepicker widget to this input, the widget does not work on dynamically loaded content. This is most likely because you have some code in $(document).ready() that initializes your widgets. This code only runs the first time the page loads however, and not after you load some new dynamically loaded content.
To solve you would have to run the same initialization code found in your document ready code, and run it again after your dynamically loaded content is loaded.
Other than that, I believe JQuery automatically tries to load scripts found in dynamically loaded content, so I'm not sure why that is an issue. Would be helpful to see the actual page content that you are trying to load.
as for dynamically loaded css, see this link: How to apply inline and/or external CSS loaded dynamically with jQuery
Related
I am fetching tweets and showing them into the slider . now when i open the page it shows me all the tweets one above another which create a mess. and after page fully loaded it shows me tweets as i wanted . so is there any way to show tweets or run php code when page is fully loaded ?
PHP code can not be run once the page has loaded, however you can run an AJAX call to a php script.
Although, I would suggest you can run Javascript/jQuery once the page is loaded. Your best bet is to use https://dev.twitter.com/docs/embedded-timelines
This will provide all the code you should need.
It sounds like all your tweets are output via php, and then styled into a slider with javascript, so in between the data being output and the javascript loading, you see the unstyled data.
A simple solution would be to give the containing element a style of display:none, then show it via javascript when the page has loaded:
css
#tweet-holder{
display:none;
}
php / html
<div id="tweet-holder">
//all your tweets go here
</div>
js
$(function(){
$('#tweet-holder').show();
});
My homepage (index.php) is generated dynamicly by PHP, so it takes about 1s till the the page is delivered to the user.
Because my css and js script is in the header of (index.php), after this 1s the css and js will start to download.
Is there some general way of preloading this js and css files?
My aproach would be to delete all content of index.php, include just <'head> with my css and js file, and then do some js to load the whole indexOriginal.php (with the dynamic content generated on my server by PHP), so this should enable the user to download the css, js in parallel of indexOriginal.php.
Is this the right aproach?
The approach you suggested could work. You also might consider altering your PHP script to hurriedly deliver the first part of the page (<html> down through <body>) before it starts getting the rest of the page together (see http://php.net/manual/en/function.flush.php).
Your page full generated by backend and sended to user only after php script end its work.
You could, for example, create page like.
<html><head><script></script></head><body></body></html>
In <script></script> load, for example, JQuery and do something like
$(document).ready($('body').load('/path/to/your/script.php'))
But I really thing this wouldn't be a good practice. Also I don't think that Google would parse your site content with this solution.
I think you should look better about your JS (compress, gzip, split to many files and upload them from different CDNs, move everything to $().ready, etc.)
My recommendation would be to have your initial PHP script JUST deliver the CSS and JS tags. Once those are loaded, use the JavaScript to make an AJAX call that gets the rest of the page then displays it. Or you can build the page in the JavaScript (which would allow you to use loading icons and the like to give a better indicator to the user that "the page is coming")
I got a .html Page with jQueryMobile. This page sends a database request to a .php script on my server. Then the script returns the result with html code and jQuery Mobile theme features like data-role="listview" included. But the JQM theme is not shown in my frontend. Only the "normal" html style of ul and li. Anyone of you know how to show the database results in jQuery theme? Thanks in advance!
When dynamically adding new jQuery Mobile its content markup can only be enhanced manually through use of a proper enhancement functions. Every widget has an unique function.
This should do it:
$('#listviewID').listview('refresh');
In case this error is thrown:
cannot call methods on listview prior to initialization
use this:
$('#listviewID').listview().listview('refresh');
There's also another solution. Instead of enhancing single component you can enhance whole content DIV, do it like this:
$('contentDivID').trigger('create');
or it can be done on a whole page like this:
$('pageDivID').trigger('pagecreate');
If you want to find more about this process (with working examples) take a look at this ARTICLE, to make it transparent it is a link to my blog post.
So I have a system using jQuery AJAX to load the content dynamically. I have some pages, and they may have a script only for that page (in the js/ folder).
For example, if I'm at the index page and click a post (article.php), the post will dynamically get on the page removing unnecessary content and will get the 'js/article.js' on the page. However, the problem is that if I click on another post after I have visited another, the 'js/article.js' script won't work.
Is there any way i can execute a script that has already been executed on the page, so the problem will be easily solved. If not, do you have any ideas I can fix the problem described?
Did you try http://api.jquery.com/jQuery.getScript/?
I'm guessing you need to attach the click events to the newly added content.
jQuery can do that automatically for you if you use .live() or .on() event handlers instead of the classic ones like for example .click().
All scripts and style declarations will be removed from your loaded content (since jquery 1.4, if I remember well)
As jeroen said, you can use .live() or .on()
If your loaded content contains specific scripts and css, they will have to be in separate files that you will have to load (as Stefan said)
The urls for loading scripts could be known through a naming convention, or you can hide it in your loaded content as an invisible
tag, then parse your loaded content and load the referenced files.
I have a header and a main div on my site. How can I create dynamic pages without refreshing the page, by just placing the files from profile.php, search.php and so on inside the main div of my website through using navigation menu?
For example, I have profile.php as the users main interface, and using ?action=action I have achieved the dynamic pages. But when it comes to search, I have to redirect the user to search.php?query=search-text and so on for the other pages.
Thanks.
Sounds like you want to do content replacement using AJAX.
Using JQuery you can do
$('#divid').load( "URL" )
Using Javascript and Frames are the only ways to do this without refreshing the header. Frames are considered bad pracice, so AJAX and JQuery are your best option here.
There are several ways to do this.
If you are not using a framework (it looks like you are not) you can just use include/require to bring whole chunks of code into your file (requires a page refresh).
If you are using a framework that supports the MVC structure, then you will just include multiple views to build your response page. The syntax differs between different frameworks, so sorry no example code for you (requires a page refresh).
Also you could use AJAX. Note, AJAX is not a new programming language. It is using Javascript to execute an independent call on the end-user's browser to your server at a special page/handler. The server side handler script then processes your request and returns a snippet of HTML code or a small block of text which is then received by your end-users browser and then dynamically inserted into the DOM (no page refresh).
Cheers.
The only way I know how to achieve this would be requesting content with AJAX and setting the content of your div to being the result - might not be the most ideal (not sure as I've never looked into it) but that's how I would go about it. JQuery would make this easy like so:
function loadPage(pg)
{
var container = $("#container");
$.ajax({
method: "post",
data: "page="+pg,
url: "loadhtml.php",
success: function(result)
{
container.html(result);
}
});
}