using javascript to load a .php into a div
Question
PLEASE NOTE: I cannot use jquery or ajax to do this!
This app is for dealing with clients face to face: with it I can show them many themes as an illustration of webpages. They get to choose which theme they want. These themes contain tab templates and button templates, breadcrumbs all sorts of combinations that are used for any web-page depending on what they need. If it is for a blog then the templates are blog-centric; if it is commercial selling products the like then the pages (or rather examples that look like webpages which are rendered within the main div) may have an template using jquery or ajax of one
I am making an app that puts php switch onto a page that contains 10 variations on a theme. It is all inside a div as a page without the head tags (they are already used); the themes come from drop down lists (strung out on a bar near the top of the page).
THE REASON I CAN'T USE JQUERY/AJAX I can't use these because there are now various versions of these used for the templates that are already in my themes. If more than one version of jquery or ajax are used on the same page and they are different versions then they conflict with one another and don't work properly or not at all.
I have managed to get this far only using php. I can use a switch for the themes using ten cases per page works well and with each drop down list I have another 10 pages on each list and so one list = 100 so with only 5 lists there is 500 varitions of web-pages (which means over 2000 can be on the drop down list bar so this is essential for my app to have). this is a actually a simple way of doing it and without the complication of the various versions of jquery and ajax that are used now I would be able to use jquery to solve this problem.
YES I HAVE SPENT MANY HOURS AND DONE MUCH SEARCHING FOR A SOLUTION BUT ALL FIND ON ANY SEARCH IS SOMEONE ADVISING THE PERSON LOOKING FOR A SOLUTION TO USE AJAX OR JQUERY.
I am new to javascript so am asking how to get my .php document with the switch function into the main div onscreen (each case of the switch has an example of a theme, that renders in html) so can be put within the main div from the drop-down list.
Here's a simple example of what I need to do and how far I have got so far:
<?php
?>
<html><head>
<title>Test Includes</title>
</head>
<body>
<div id="content" style="margin: 0 auto;">
<style type="text/css">
#nav{ list-style:none; font-weight:bold; margin- bottom:0px;float:left;width:100%;position:relative;z-index:5;}
#nav li{float:left;margin-right:1px;position:relative;}
#nav a{display:block;padding:1px;color:#fff;background:#333;text-decoration:none;}
#nav a:hover{color:#fff;background:#aaa;text-decoration:underline;}
/*==== DROPDOWN ====*/
#nav ul{background:#fff;
background:rgba(255,255,255,0);
list-style:none;position:absolute;left:-9999px; }
#nav ul li{padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */float:none;}
#nav ul a{white-space:nowrap; }
#nav li:hover ul{ /* Display the dropdown on hover */left:0; }
#nav li:hover a{
background:#aaa;text-decoration:underline;}
#nav li:hover ul a{
text-decoration:none;}
#nav li:hover ul li a:hover{ background:#333;}
</style>
<div id="linker" style = "position:absolute; float:left;top:0;left:0;margin: 0 auto;height:30px">
<ul id="nav">
<li>
<a href="#">pages</a>
<ul>
<li><a href="includes/inc_page1.php">page 1</a></li>
<li><a href="includes/inc_page2.php">page 2</a></li>
<li><a href="#" onclick='changeText()'>page example</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
function changeText(){
document.getElementById('target').innerHTML = 'includes/pager00.php';
}
</script>
<div id = "target" style = "position:absolute;top:50; left:20px; width:85%;height:300px;padding:5px; border: 1px solid red;">
</div></div>
</body></html>
SO THERE ABOVE IS AN SHORTER EXAMPLE OF WHAT MY INDEX PAGE IS. below is the pager00.php which is a shortened example of my switch. I want this example to render within the div in the example above. Here is the switch in a shortened version without any templates and as an example of what I want to do.
pager00.php example:
<div>
<!--========== THESE LINKS WOULD NEED TO BE INSIDE THE DIV AND A CLICK BRINGS A THEM ONTO THE PAGE ====>
<p style="text-align: center;"><a href="?pmode=one">Pick Me</a> | <a href="? pmode=two">No Pick Me</a> | <a href="?pmode=three">NO! PICK ME!!!</a></p>
<?php
$closediv = "</div>";$closebody = "</body>"; $closep = "</p>";$closeh1 = "</h1>"; $closeh2 = "</h2>"; $closeh3 = "</h3>";
$closeh4 = "</h4>"; $closeh5 = "</h5>"; $closeh6 = "</h6>";$closespan = "</span>"; $closeli = "</li>"; $closeul = "</ul>";
$closea = "</a>"; $break = "</br>"; $wrapperend = "</div>";
$c1heading = "hiho";
$c1text = "hiho, it's off to work we go";
$c2heading = "hiho hiho";
$c2text = "hiho hiho";
$c3heading = "hiho";
$c3text = "hihohihohiho hiho ";
$styler01 = '<LINK REL=StyleSheet HREF="plonkone.css" TYPE="text/css" MEDIA=screen />';
$styler02 = '<LINK REL=StyleSheet HREF="plonktwo.css" TYPE="text/css" MEDIA=screen />';
$styler03 = '<LINK REL=StyleSheet HREF="plonkthree.css" TYPE="text/css" MEDIA=screen />';
class tagClass { public $prop1; public function __construct() { } public function __destruct() { }
public function setProperty($newval) { $this->prop1 = $newval; } public function getProperty() { return $this->prop1; } }
$obj =new tagClass();
if(isset($_GET['pmode']))
if ($_GET['pmode'])
{
$pmode = $_GET['pmode'];
switch($pmode)
{
case 'one' :
// ===== CHANGING THE STYLE ON EACH CASE IS WHAT CHANGES THE THEME ITSELF IN MY APP ======>
echo $styler01;
$tag = 'div';$id = 'caseone';$style = 'cone';$tagger = '<%s id="%s" class="%s">';
$obj->setProperty(sprintf($tagger, $tag, $id, $style));
echo $obj->getProperty();
$tag = 'h3';$tagger = '<%s >';
$obj->setProperty(sprintf($tagger, $tag ));
echo $obj->getProperty(); echo $c1heading; echo $closeh3;
$tag = 'p';$tagger = '<%s >';
$obj->setProperty(sprintf($tagger, $tag ));
echo $obj->getProperty(); echo $c1text; echo $closep; echo $closediv;
break;
case 'two' :
echo $styler02;
$tag = 'div';$id = 'casetwo';$style = 'ctwo';$tagger = '<%s id="%s" class="%s">';
$obj->setProperty(sprintf($tagger, $tag, $id, $style));
echo $obj->getProperty();
$tag = 'h3';$tagger = '<%s >';
$obj->setProperty(sprintf($tagger, $tag ));
echo $obj->getProperty(); echo $c2heading; echo $closeh3;
$tag = 'p';$tagger = '<%s >';
$obj->setProperty(sprintf($tagger, $tag ));
echo $obj->getProperty(); echo $c2text; echo $closep; echo $closediv;
break;
case 'three' :
echo $styler03;
$tag = 'div';$id = 'casethree';$style = 'cthree';$tagger = '<%s id="%s" class="%s">';
$obj->setProperty(sprintf($tagger, $tag, $id, $style));
echo $obj->getProperty();
$tag = 'h3';$tagger = '<%s >';
$obj->setProperty(sprintf($tagger, $tag ));
echo $obj->getProperty(); echo $c3heading; echo $closeh3;
$tag = 'p';$tagger = '<%s >';
$obj->setProperty(sprintf($tagger, $tag ));
echo $obj->getProperty(); echo $c3text; echo $closep; echo $closediv;
break;
}
}
?>
</div>
Above is an example of what I need to come into the div: I need this switch with the links to each separate switch-case content. It works fine on it's own but need it to come inside the div in the index page example. the pager itself needs to be bought into the div. The javascript is just an example of what I want it doesn't work as is. I only get 'includes/pager00.php' printed although it does end up inside of the div I need the pager00.php script to render and not just those words... OBVIOUSLY
<script type="text/javascript">
function changeText(){
document.getElementById('target').innerHTML = 'includes/pager00.php';
}
</script>
IS NOT WHAT i NEED. the javascript .innerHTML is not the right thing to use here.
So what is? this is my Question how do I do this with straight javascript and no jquery or ajax?
1 answers
solution1
2 2013-10-25 02:59:47
I don't really understand why you can't use ajax here. This will work on all newish browsers (IE7+):
function changeText() {
var obj = new XMLHttpRequest();
obj.onreadystatechange = function() {
if(obj.readyState == 4) {
document.getElementById("target").innerHTML = obj.responseText;
}
}
obj.open("GET", 'includes/pager00.php', true);
obj.setRequestHeader("Content-Type", "text/plain");
obj.send("");
}
Scripts returned by the php may not run, but the html will be put inside your div. This is the function behind AJAX, but there's no libraries required and there will be no versioning difficulties; this function works all on its own.
If this doesn't work, can you say exactly why?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.