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. ^^;
Related
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
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.
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>
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.
I am hoping for some advice, imagine if you will will you are on a website and you are greeted solely with navigation menu, on click the navigation menu that is situated within the left hand side of the screen you can add various content to the right side of the screen that is loaded in individual ‘divs’ then collapsed in accordions(this effectively makes a one page site(Yes I am aware of poor SEO, Accesibility and Usability). Now this raises some questions from me.
1) What would be the best way to load in the data for each of these ‘modules’ as they are clicked. How would I load the codeigniter views in with leaving the index page?
2)The user can also remove ‘modules’ how could this be achieved without leaving the page?
3)If there are 3 pages that are loaded in from 3 different views all in an accordion how can i make it so only one accordion can be open?
4)If the ‘module’ has further links within it, it should load in another view to left of it, how could I control this?
I know I am asking alot of advice but I have never seen anything on the web that is like this and would really appreciate some feedback on the best way to approach this.
This really is a question on jQuery, and jQuery's Ajax methods. You're not asking about anything too difficult here. Just a menu that makes asynchronous calls to the server for content, and loads the respose HTML into a particular DIV.
$("a.homePage").click(function(){
showLoadingAnimation(); // Indicate ajax-loading
$("div.Container").load("/home", {}, function(){
hideLoadingAnimation(); // Hide indicator after content is loaded
});
});
This would load in your home view. Just be sure that it doesn't bring a template along with it. Once you get started on the actual development, return here to ask more specific questions to get quicker and more thorough responses.