The following code works perfectly fine for "normal" wordpress pages without a parent page, BUT if the requested page has a parent I get nothing and I can't get the code to work (alert box never came) after 5h of web-searching and trial and error.
JS/jQuery here:
<script>
jQuery(document).ready(function () {
//get the page via page slug
jQuery.get("thePageSlug").success(function(data){
//get the content div of the found page
jQuery(data).find("#content").appendTo("#content");
alert("finally.....");
});
});
</script>
I think this is because you used relative path in .get function. Try to use absolute path so that it will not get conflict with Wrodpress Permalink.
Try this instead:
jQuery.get("/thePageSlug")...........
Or even:
jQuery.get("http://your.domain/path/to/your/thePageSlug")...........
Code:
<script>
jQuery(document).ready(function () {
//get the page via page slug
jQuery.get("<?php echo site_url(); ?>/thePageSlug").success(function(data){
//get the content div of the found page
jQuery(data).find("#content").appendTo("#content");
alert("finally.....");
});
});
</script>
Related
In my site's index.html I have a div element that changes when a menu item gets clicked (with jquery). The pages that get inserted into this element all have some javascript functions in them. However, I load my javascript files in the index.html right before the body closes. These files don't 'reload' when this div element changes, so the javascript doesn't work on these pages. How would I fix this issue? Do I have to reload the javascript files on the change of the element? And if so, how?
edit:
Sorry, these are the codes for the page inserts:
$("li.load-page").click(function() {
var pagina = $(this).data("page") + ".html";
console.log(pagina);
$("#main-content").load(pagina);
});
main-content is an empty div in index.html.
In one of the pages that gets inserted I use the jquery accordion in my html for example, but it doesn't work since it's included in the head, and the page doesn't refresh on insertion:
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
heightStyle: "content"
});
});
EDIT2: I have simulated my problem here: https://jsfiddle.net/ktoeon2f/2/
<script type="text/javascript" id="jsid">
//your script here
</script>
after onchange call
eval(document.getElementById("jsid").innerHTML);
after load
$("li.load-page").click(function() {
var pagina = $(this).data("page") + ".html";
console.log(pagina);
$("#main-content").load(pagina);
eval(document.getElementById("jsid").innerHTML);
// give an id (jsid) to script tag inside your loaded page
});
The problem was solved in this thread: jQuery: Changing the CSS on an element loaded with ajax?
The solution was to load the other function(s) in the succes function of an ajax call:
$('#main-content').load(
url,
function(){
accordionFunction();
}
);
i have a script that cuts a part of the iframe( iframe without headers ) and shows it. my problem is if i make actions within this iframe, the iframe reloads but is not applying the jquery filtering to give me only that part but instad gives me all the page with headers so i'm assuming that script is not working when it reload the iframe without the window reload of the main page that has the iframe:
<iframe class="test" width="100%" height="100%" src="/message.html?msjId=260" style="height:100%;width:100%;">
$(window).load(function () {
$('.test').each(function(){
var filteredContents1 = $(this).contents().find('.div_iframe').html();
$(this).contents().find('body').html(filteredContents1);
});
});
any solutions please ?
I think you need to add load events for frames as well. Add the load event in document.ready function as given below. If it works you may be able to omit window load event you already have for filtering frames data.
$(document).ready(function(){
$('.test').load(function () {
var filteredContents1 = $('#frame1').contents().find('#divChild').html();
$('#frame1').contents().find('body').html(filteredContents1);
});
});
Update on request of questioner
$(document).ready(function(){
$('.test').load(function () {
$('#frame1, #frame2, #frame3').each(function(){
var filteredContents1 = $(this).contents().find('#divChild').html();
$(this).contents().find('body').html(filteredContents1);
});
});
});
.
I have the following script that loads a page into a div and not just the targeted div. This is most evident when going back to my index and my header and footer are jammed into the <div id="contentspace"></div>.
I read on here somewhere that the div needs to be placed in it's own page prior to being displayed. Not sure which method would do that. Is this possible without hashtags Thanks for your help
<script type="text/javascript">
$(function() {
$('#header a').click(function() {
$('#contentspace').empty();
$("#contentspace").load(this.href, function(response){
console.log($('#content', response).html())
event.preventDefault();
});
});
});
</script>
The method .load() can load page fragment, simply by specifying a valid jquery selector next to the url.
$('myelement').load('page.html #content', function() {
...
});
Note that when loading page fragments, jquery will remove any SCRIPT element it might contain.
In you example, you would do:
$("#contentspace").load(this.href + ' #content', function(response){
...
});
Did you read the documentation at all? Take a look at the section titled Loading page fragments in the jQuery API for .load(). Essentially you just pass a selector along with the URL of the page to load as the first argument of the method.
I have a page that has multiple links with various attributes (these attributes will be pulled in from a database):
index.php
<html>
<head>
<script type='text/javascript' src='header.js'></script>
</head>
<body>
My_Link_1
My_Link_2
<div id='my_container'> </div>
</body>
</html>
My header.js file has:
$(document).ready(function(){
$('.link_click').click(function(){
$("#my_container").load("classes/class.project.php", {proj: $(this).attr('id')} );
return false;
});
});
class.project.php is pretty simple:
<?php
echo "<div id='project_container'>project = ".$_POST['proj']." : end project</div>";
?>
This loads and passes the ID variable (which actually comes from a database) to class.project.php. It works fine for the first link click (either link will work). Once one link is clicked no other links with this div class will work. It feels like javascript loads the class.porject.php and it will not refresh it into that #my_container div.
I tried running this as suggested by peterpeiguo on the JQuery Fourm, with the alert box for testing wrapped inside .each:
Copy code
$(document).ready(function() {
$('.link_click').each(function() {
$(this).click(function() {
alert($(this).html());
});
});
});
This seems to work fine for the alert box. But when applying it to .load() it does not reload the page with the new passed variable. As a matter of fact, it doesn't even reload the current page. The link performs no function at that point.
The example site can be viewed here: http://nobletech.net/gl/
I looked at the link you posted, and the problem is that when you're doing load you're replacing the elements on the page with new ones, thus the event handlers don't work anymore.
What you really want to do is target the load. Something like:
$("#project_container").load("classes/class.project.php #project_container", {proj: $(this).attr('projid')} );
This only loads stuff into the proper container, leaving the links and other stuff intact.
Ideally, the php script should only return the stuff you need, not the whole page's markup.
BTW- Caching shouldn't be an issue in this case, since .load uses POST if parameters are passed. You only have to worry about ajax caching with GETs
Sounds like the request is getting cached to me.
Try this:
$.ajaxSetup ({
// Disable caching of AJAX responses */
cache: false
});
Sorry but this might be completely wrong but after examining your XHR response I saw that you are sending back html that replaces your existing elements.
So a quick fix would be to also send the following in your XHR response (your php script should output this also):
<script>
$('.link_click').each(function() {
$(this).click(function() {
alert($(this).html());
});
</script>
In my main.html page I have a button. When that button is clicked, I need to get the content of another page.
The target page has five divs, I need to catch one div and display that div data in main.html page.
Use Javascript and JQuery. See http://docs.jquery.com/Manipulation or specifically http://docs.jquery.com/Ajax/load
To be precise use something like this:
$("#yourdiv").load("/yourpage.html #section");
jQuery can do this very elegantly:
<script type="text/javascript" src="/js/jquery/jquery-1.3.2.min.js"></script>
<script>
//only when the DOM has been loaded
$(document).ready(function() {
//bind to button id="myButton" click event
$('#myButton').click(function() {
//populate div id="myDiv" with specific div (div id="someDiv") from another page
$('#myDiv').load('/anotherPage.html #someDiv');
});
});
</script>
See jQuery Ajax/load
As long as the second page is on the same domain, you can use AJAX techniques. For example, using Prototype you could do something like this:
new Ajax.Request('http://url.of.second/page', {
method: 'get',
onSuccess: function(transport) {
//make a regular expression to grab the required HTML fragment
var re = /<div id="otherdiv">(.*)</div>/i;
//extract the fragment from transport.responseText
var found = transport.responseText.match(re);
//add the fragment to targetdiv on current page
$('targetdiv').innerHTML=found[1];
}
});
Jiri's answer is spot on.
http://docs.jquery.com/Ajax/load
is the exact jquery link.
Thanks Jiri...