I am using jQuery. My main page is index.php. on load of this page. How do i load another page internally. say a small block in the page ?
Like this: $('.smallBlock').load('targetUnderSameDomain.php .anotherSmallBlock');
In the first part you select the block where you want to insert the block of the targeted file.
The load function has two parts:
The first part is where you select the targeted file, the second is optional, but there you can select an element within the targeted file's html.
you can use the load command. For a simple page like this:
<html>
<head>
<title>test</title
</head>
<body>
<div id="content"> </div>
</body>
</html>
you could fill the Div with id = content like this:
$('#content').load('yourUrl.php');
EDIT: changed from get() to load()
the syntax for the get command would be:
$.get('yourUrl.php', function(data){
$('#content').html(data);
});
Related
I need to load, modify and output some 3rd party iframe on my webpage. As suggested, I had created the intermediary page that simply contains <iframe> with its src attribute.
The php code that outputs the page looks like this:
$iframe->loadHTML(file_get_contents("http://example.com/iframe_page.php")); //creating DOM object, see htm content below
$xpathObj= new DOMXPath($iframe);//creating DOMXPath object
foreach ($xpathObj->query('//div[#id="specific_id"]') as $node){ //this query returns nothing
$node->parentNode->removeChild($node);//i need to remove the div with that id, but there is nothing to remove
}
echo $iframe->saveHTML($iframe->documentElement);//the iframe output works fine
And the content of my iframe looks something like this:
<html>
<head>
</head>
<body>
<div>
<div>
<div id="specific_id">
</div>
</div>
</div>
</body>
</html>
I've even tried disabling JS to see if this div is placed there by front-end code and nope with JS disabled the structure of the document looks exactly the same.
The answer is rather simple. You CAN'T manipulate iframe element crossdomain using PHP DOMDocument.
So since joining I've learned a lot - compared to where I was - but I still don't know the terminology and functions well enough I suppose... so here's my problem:
I'm making several js-based galleries. The idea being that there will be 3-4 pages containing some thumbnails that will populate a specific div with the corresponding art and copy (a div I'm calling using innerHTML) and so far that works. Here is the script:
function changeDiv(target,id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML;
}
This works great... when I have the 'target' and all 'id's in the same page. I even went as far as using a php include on the page (I added it to the footer) and nested it inside an inline div that I set to visibility:hidden. A shot in the dark but this worked too. EXCEPT that my footer was now about another 100px taller with nothing but blank space. Apparently it HID the content, but made plenty of room for it.
But what I really want to do is include the source of the divs I'm calling (we'll call them artwork.php) into the gallery page ( ...and gallery1.php) the same way a css or js is linked in the header or the same way it is included with a php tag but without messing up any of my objects.
I hope that made sense, but in brief: How can I call an external php document that won't display but can be called upon by the js?
Any thoughts?
1) visibility:hidden; keeps the place on the page. Use display:none instead.
2) Jo have two possibilities.
a) Use Ajax (google it!) if your artwork.php will change dynamically.
b) Use artwork.php as JS file, ie like this:
<?php
/* artwork.php */
header('Content-type: application/javascript');
echo "var myImages = [{'name':'First image','src':'image1.jpg'},{'name':'Next image','src':'image2.png'}];\n";
?>
//... any other JS functions here ...
And gallery1.php:
<html>
<head>
<script type="text/javascript" src="artwork.php"> </script>
</head>
<body>
...
</body>
hmm i am not actually getting what u are trying to say but i think this might help
save your php page lets say "artwork.php"
then use the jquery Load to call the page and hide the div where you have loaded the page.
$("#any_div_u_want").load('artwork.php',function(){
$(this).hide();
});
now u can show the div which contains your php script wheneveer u ant with just
$("#any_div_u_want").show();
Hope this helps
So I'm basically trying to pass the <link> and <script> tags into my original header file from a modules view file (which is displayed in the body of the page). How can I pass variables that include these references?
Currently I have just put extra <head></head> tags into my module's view, but it just feels messy and dodgy to do so, as that means the head tags are used up the top of the page, and also mid-way down.
Edit: Didn't realise that stack overflow edited out my tags that are crucial to this question! Sorry guys!
It sounds like you are really in need of a Template setup for CodeIgniter. Here are links to some of my favorites:
http://williamsconcepts.com/ci/codeigniter/libraries/template/reference.html
http://philsturgeon.co.uk/demos/codeigniter-template/user_guide/
And my personal favorite for simplicity:
http://maestric.com/doc/php/codeigniter_template
EDIT:
Per #Sneaksta's question, here is how I add css scripts to my template:
In my master template I have this code:
<?php if (!empty($cssFiles)): ?>
<?php foreach ($cssFiles as $styleSheet): ?>
<link rel="stylesheet" media="screen" href="<?= base_url(); ?>styles/<?= $styleSheet; ?>" />
<?php endforeach; ?>
<?php endif; ?>
Then in my controllers that might need to load different CSS files per function I do this:
$cssFiles = array('style1.css', 'style2.css', 'style3.css');
$this->template->set('cssFiles', $cssFiles);
Sneaksta,
I think I understand what you are asking about, but I am not 100% sure because you don't have any code examples posted.
So I will give you an example of how you can have a "telescoping" View that allows you to modularly load different style tags inside the head tags.
As Damien Pirsy mentioned, Views are buffered, which means that CI makes a special output buffer and will concatenate a series of View objects together, and then output the final buffer content as a finished web page.
My example below is built on this sort of chain of thinking:
End User
(calls) --> Page Controller, which then:
(calls & passes params) --> Base View
(calls multiple fragment views) --> Fragment View +
--> Fragment View +
--> Fragment View = Final Cumulative Page --> (sent back as output ) --> End User
First make the "base View", which we will call "base.php" for reference sake:
<!doctype html>
<html>
<head>
<!-- Base View -->
<?php
//This "if" + "isset()" statement is important,
// because if you forget to pass the variable in the controller
// CI will throw an error.
// Also important: the name of variable ($style) MUST match the
// the name of the associative element in the controller! (See
// remarks below on handling this in the controller)
if(isset($style))
{
//Loading views is like a telescoping effect:
//A view may load other views into itself recursively
$this->load->view($style);
}
else
{
//This echo statement will show a comment in
// source code if an error occurred during loading a view
echo "<!-- Style not found -->");
}
?>
</head>
<body>
<!-- Page Content Here -->
</body>
</html>
Next you create the Style View (note: the following code fragment would be in a separate file all by itself) which we will call "style1.php", and must located with your other views in order for CI to find it, e.g. inside the "application/views" folder. This lets you swap out an inline style block declared in the header by just changing which style view is loaded:
<style type="text/css">
/*Style 1:*/
/*Just do something simple and obvious, i.e. turn text red*/
body { color: red; }
</style>
Next you create the alternate Style View (note: the following code fragment would be in a separate file all by itself) which we will call "style2.php", and must located with your other views in order for CI to find it, e.g. inside the "application/views" folder. This lets you swap out an inline style block declared in the header by just changing which style view is loaded:
<style type="text/css">
/*Style 2:*/
/*Just do something simple and obvious, i.e. turn text blue*/
body { color: blue; }
</style>
Now inside of our controller "example.php" we tell base.php to load the style1.php file into its header. We do this by passing the file name as a parameter when we load the base.php view, by passing the file name as an element of an associative array, code igniter will parse that parameter array and create a variable with the same name as the associative element, and make that variable available to you inside the base.php view:
<?php
class Example extends CI_Controller
{
//Constructor
function __construct(){ parent::__construct(); }
//Base View request handler
function baseview()
{
//Note: Make an array, be certain to name the element
// the same as what will be expected inside base.php
$params = array("style" => "style1.php");
//Switching to load a different style is now easy
// just comment out the line above, and uncomment the line below:
//$params = array("style" => "style2.php");
//Pass the parameters array into the CI load view method:
$this->load->view("base.php", $params);
}
}
?>
The cumulative result should be the modular ability to switch the style tags inside the page header, by just specifying which "style view" to load (you could even build a model that retrieves which "style views" to load from a database table). Obviously this approach has certain processing overhead constraints inside of a web browser, as you are constructing actual inline HTML source code, rather than linking to a CSS file through a link tag. This means that the browser will not cache the css content for each page load, but will have to download it on each subsequent request.
Is it "okay" to have an HTML document embedded inside the body tag of another HTML document?
The reason why I want to do this is so that I can call a javascript body onload -- I cannot do that in the main HTML document because the main HTML code is dynamically generated by a controller (Yii) that controls other pages and I do not want to edit it.
*By the way, I tried it and it seems to work fine now, but I just want to be sure that the page will not break in the future for whatever reason.
<html>
<head>
<body>
<html>
<head>
<script type="text/javascript>
function somefunction(){
}
</script>
</head>
<body onload="javascript:somefunction()">
</body>
</html>
</body>
</html>
If all you want to do is attach an onload event, you're going about it the wrong way.
All you have to do is add a script element that attaches an onload event:
<script type="text/javascript">
function somefunction()
{
...do stuff...
}
document.body.onload = somefunction;
</script>
Alternatively, if you've appended your JS files at the bottom of the page, they will be able to interact with the DOM similarly to how onload works. The reason to use onload is only so that the elements defined within the web page have been added to the DOM by the time a function is executed. If your scripts are after your content, the elements will be in the DOM.
No, that's bad HTML.
Just put your JavaScript at the bottom before </body>.
I'm trying to do this:
Load content of a div on another page
but it doesnt work for me. and I'm not sure why.
what im wanting to do is, i have a mobile site im working with, and i want to pull the story content data thats on the main sites div, and place it on the mobile sites content div that way i dont have to really edit anything. whatever gets published on the main gets reflected on the mobile.
any ideas as to the best way to accomplish this? is there a way to do like an include in php or html but that it ONLY takes the targeted divs content and not everything else?
If I'm reading you correctly, this is what you need:
$('#result').load('ajax/test.html #container');
This will load the page ajax/test.html, grab the content of the element with id "container" and load this into your current pages' element with the id "result".
More info can be found at http://api.jquery.com/load/
Edit: Working code based on your test files:
<html>
<head>
<script src="http://code.jquery.com/jquery-git.js"></script>
<script>
$(document).ready(function(){
$('#result').load('pull4m.shtml #hello');
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>