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.
Related
I tried the sample code for the jQuery UI dialog and got it to work -- saved that file as page1.html. That works, however, when I tried to load that page via jQuery.load to a container div (data-container) of a PHP page, page1 won't work, even displaying everything that's supposed to be hidden.
Both pages has its set of css and js. Is there a way for those css/js not get in the way of each other's pages? or is it when you use jquery's load function, the loaded page makes use of the parent's (PHP page) loaded css/js? If this is the case, how do I fix this concern of mine?
Thanks.
Got it! After taking the advise made by anpsmn in the above comment, because it still didn't work after that, what I did was, I moved the css/js references for the dialog in page1.html to the parent page (PHP page).
So, the js containing this code:
$('#data-container').load('page1.html', function() { $( "#dialog" ).dialog(<my dialog stuff>); });
was moved to be referenced from the parent page (PHP page) rather than in page1.html. I think it makes sense since the dialog IS initialized after the page (page1.html) was loaded in the parent page.
Thanks for making my first question here a good experience. Hope to learn more and hopefully get to answer a question and then some. ^^;
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
I want to make a wordpress site that refreshes only the content/post part and not the header, navigation, footer or the sidebar.
Is this possible? If yes then how?
If you want most of the elements to remain in place you are not refreshing necessarily. What you would want to do is an AJAX request to retrieve the new information for the_content and update the DOM with JavaScript.
You would need a function that intercepts the click event for links, handles the AJAX, and then returns false to prevent navigating away from the page.
What you try to achieve is technically possible, however your wordpress theme must support that. You need to use AJAX for it and your theme needs to provide server endpoints for the type of content that is going to be requested.
This can be done by providing fragment templates inside your theme which only return the fragment in question (e.g. content column, menu). However depending on your site's layout this might not be always possible, e.g. if the layout changes from one page to another.
A possible workaround is to request the new page via AJAX and only replace the parts inside the DOM that are changed.
In any case you need to register an AJAX PHP callback function within wordpressCodex.
Are there any potentiall pitfalls with the following idea:
...I want to have one container page, index.php. The header and outlines will be constant but in the middle I want one big panel, which loads its content from external php files, one for each "slide". When a user click a link, the central div will update with the new content, the outer edge will remain unchanged.
Will I be able to use session variables, etc correctly with the set-up. I realise it will certainly break the browser history but other than some possible UI issues, are there any techincal barriers.
This is a common thing, as Jared stated. Session variables are always available through ajax or frames, so it shouldn't affect anything there, and if browser history is something you would like to continue to use, you could always change your location.hash when you load new content so that you can load previously rendered content with some javascript if someone uses the back or forward buttons.
The session should not be lost.
The browser history does not need to be lost also - please read about onPopState (and history.pushState) and onHashChange JS events. The AJAX-heavy sites can determine the content to be loaded that way.
One of the pitfails is, if you are using a lot of JS, that the events for the newly loaded content will need to be re-attached, but they can also be delegated from the container which is not replaced.
jQuery's .load() function may be also useful to you to get started.
I have been learning more about AJAX using PHP and wanted to ask about the relationship of loaded content to the page itis loaded into.
I have been using the AJAX Pagination script v1.2.2 i found at "dynamicdrive". I was able to properly implement the dynamic page load as expected and it works. The pages I load have images in them that i'd like to be able to add hyperlinks to. These links would change content on the original page with a similar function ( perhaps the ajax function .load() )
for some reason I can't seem to reference the objects on the original page fromt he loaded content to do any work. I noticed that when i "view source" on the page, I only see the original page and not the loaded content. I have been searching for anything I can use to determine how to interact between the original page and the loaded content. Is the "loaded" content a child page? i see a lot of references out there to iframes etc, but I know that this is not the method i'm using.
Any suggestions on the ralationship of these pages and how to interact betweent hem would be greatly apprecaited.
Thanks,
Silver
I can answer one part of your question - to view the source, try using Firefox extension - Developers tool bar, which allows you to view the 'Generated source'.
Or if you use element selector in any browser, it will show you the generated source.