4 Replies - 3377 Views - Last Post: 02 July 2011 - 08:43 PM

#1 kajun989  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 11-June 09

Using Ajax to load a page that uses ajax

Posted 19 April 2011 - 06:55 AM

Dear Community,
I have a webpage with a menu. When I select an item from the menu, it is supposed to load another page to the right of it, with the use of AJAX. This works fine. However, the page that it is loading contains Ajax and Javascript as well. The page loads, but the Ajax/Javascript functionality is non existent. Let me get into specifics. I will provide code and files below if it is of any use.

I have a php page (slider.php) that loads a page with a set of sliders. It uses a script (slider.js) to generate the slider and the slider functionalities. These sliders are generated based on the number of entries in a database and are automatically adjusted on page load based on the slider values for each slider record in the database. You can use the adjust each slider and change its numerical value and it uses ajax to dynamically save these updated values to the database(with the help of an external php page, AJAX4Slider.php).

Now I want to load this said slider.php page from my main menu page (index.htm). This index page uses ajax to load the slider.php page to the right of the menu. It does this(it even sets the sliders to the accurate values in the database on page load), however, the error occurs where I am unable to adjust the sliders manually.

Can I please get some aid in rectifying this issue? Many thanks to the community!


I have included a zip file below with the files to allow full functionality.

-Please load the slider_script.php file first to create the database and the slider entries first. This must be done!
-You can then load the 'slider.php' page to see the sliders in action without any error.
-You can then load the menu page 'index.htm'. This brings up the menu. Click on the 'load sliders page' link and there you will see that we cannot manually adjust the sliders after page load.


Thanks again!

Attached File(s)



Is This A Good Question/Topic? 0
  • +

Replies To: Using Ajax to load a page that uses ajax

#2 kajun989  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 11-June 09

Re: Using Ajax to load a page that uses ajax

Posted 19 April 2011 - 07:22 AM

I forgot to post the code for easier viewing. Here's the code for the index.htm page:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Rotating Includes Script</title>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

<style type="text/css">
#leftcolumn{
float:left;
width:150px;
height: 400px;
border: 3px solid black;
padding: 5px;
padding-left: 8px;

}

#leftcolumn a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray;
}

#leftcolumn a:hover{
background-color: #FFFF80;
}

#rightcolumn{
float:left;
width:550px;
min-height: 400px;
border: 3px solid black;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
}

* html #rightcolumn{ /*IE only style*/
height: 400px;
}
</style>
</head>

<body>

<div id="leftcolumn">
<a href="javascript:ajaxpage('slider.php', 'rightcolumn');">Load Sliders page</a>


</div>

<div id="rightcolumn"><h3>Choose a page to load.</h3></div>
<div style="clear: left; margin-bottom: 1em"></div>

</body>

</html>







And here's the code for the fully functional slider.php page

<!--//---------------------------------+
//  Slider Using Ajax and PHP        |
//  Developed by Roshan Bhattarai    |
//	http://roshanbh.com.np           |
//  Contact for custom scripts       |
//  or implementation help.          |
//  email-nepaliboy007@yahoo.com     |
//---------------------------------+-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Roshan's Script for Slider Using PHP,Ajax And Javascript</title>
<script src="slider.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function setSliderVal(value,value2)
{
	xmlHttp=getXMLHTTP();
	if (xmlHttp==null)
 	 {
 	 	alert ("Your browser does not support AJAX!");
 		return;
 	 }
	
	xmlHttp.onreadystatechange=function() 
	{
	  if (req.readyState == 4) { // only if "OK"
		if (req.status == 200) {						
			//dont do any thing here we just need to save the valued in the database				
		} else {
			alert("There was a problem while using XMLHTTP:\n" + req.statusText);
				}
		}				
	}
	//alert(value.substring(0,value.length-2));
	//alert(value2);
	var queryString = "?sliderval=" + value.substring(0,value.length-2) + "&slider=" + value2; //stripping last two letter which is px 				
	xmlHttp.open("GET","AJAX4Slider.php"+queryString,true);
	xmlHttp.send(null);
	
}

function getXMLHTTP() { //fuction to return the xml http object
		var xmlhttp=false;	
		try{
			xmlhttp=new XMLHttpRequest();
		}
		catch(e)	{		
			try{			
				xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch(e){
				try{
				req = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(e1){
					xmlhttp=false;
				}
			}
		}
		 	
		return xmlhttp;
	}
	
</script>
<link href="slider.css" rel="stylesheet" type="text/css" />
</head>

<body>
<?php 
################For database connection####################
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('my_db'); //change the name of the database if required
//$query="SELECT slider_val FROM tbl_slider WHERE id='1'";
$query="SELECT * FROM tbl_slider";
$result2=mysql_query($query);
$row=mysql_fetch_array($result2);


//88888888888
$result2 = mysql_query("SELECT * FROM tbl_slider");
echo "<BR/>";

 echo "<BR/>";
//display table entries**************************************************
echo "<BR/>";
echo "<BR/>";
$i=1;
while ($row = mysql_fetch_row($result2)) {
//for ($i=0; $i<mysql_num_fields($result); $i++) {
$q="SELECT slider_val FROM  tbl_slider WHERE id='".$i."'";
$result=mysql_query($q);
$row=mysql_fetch_array($result);
//echo"$i";
//echo $row['slider_val'];
echo "<BR/>";
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
?>	

<DIV class=carpe_slider_group>
                <DIV class=carpe_horizontal_slider_display_combo>
                  <DIV class=carpe_slider_display_holder>
                    <!-- Default value: 0 -->
                    <input name="Input" class=carpe_slider_display id="display<?echo $i?>" value="<?=$row['slider_val']?>" />
                  </DIV>
                  <DIV class=carpe_horizontal_slider_track>
                    <DIV class=carpe_slider_slit></DIV>
                    <DIV class=carpe_slider id=<?echo $i?> display="display<?echo $i?>" style="left:<?=$row['slider_val']?>px"></DIV>
                  </DIV>
                </DIV>
                <DIV class=carpe_horizontal_slider_display_combo></DIV>
                <DIV class=carpe_horizontal_slider_display_combo></DIV>
                <DIV class=carpe_horizontal_slider_display_combo></DIV>
              </DIV>




<?php
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//}//end for
$i++;
}//end while


?>		
  
</body>


</html>




Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,172
  • Joined: 08-June 10

Re: Using Ajax to load a page that uses ajax

Posted 19 April 2011 - 07:45 AM

View Postkajun989, on 19 April 2011 - 03:55 PM, said:

However, the page that it is loading contains Ajax and Javascript as well. The page loads, but the Ajax/Javascript functionality is non existent.

if you load Javascript content by AJAX, it needs to be evaluated before it can be used. But the better soulution would be to include all the Javascript in the main page as you a) donít have to parse it and b) the browser can cache it.
Was This Post Helpful? 0
  • +
  • -

#4 kajun989  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 11-June 09

Re: Using Ajax to load a page that uses ajax

Posted 20 April 2011 - 10:03 AM

View PostDormilich, on 19 April 2011 - 07:45 AM, said:

View Postkajun989, on 19 April 2011 - 03:55 PM, said:

However, the page that it is loading contains Ajax and Javascript as well. The page loads, but the Ajax/Javascript functionality is non existent.

if you load Javascript content by AJAX, it needs to be evaluated before it can be used. But the better soulution would be to include all the Javascript in the main page as you a) don’t have to parse it and B) the browser can cache it.


I did the 2nd solution. I removed the javascript from the head tag in the 2nd page and I included it in the main page, but the same error occurs. The page with the sliders load and it is visible, but I cannot manually adjust it.
Do you think the possibility exists where the slider.js needs modification as (I believe), the DOM is affected?

Here's the contents of the slider.js file:

//---------------------------------+
//  CARPE  S l i d e r         |               |
//  By Tom Hermansson Snickars     |
//  Copyright CARPE Design         |
//  http://carpe.ambiprospect.com/ |
//  Modified by Roshan Bhattarai   |
//	http://roshanbh.com.np         |
//  Contact for custom scripts     |
//  or implementation help.        |
//---------------------------------+

// Global vars. You don't need to make changes here .
// Changing the attributes in your (X)HTML file is enough.
var carpeDefaultSliderLength      = 100
var carpeSliderDefaultOrientation = 'horizontal'
var carpeSliderClassName          = 'carpe_slider'
var carpeSliderDisplayClassName   = 'carpe_slider_display'

// carpeGetElementsByClass: Cross-browser function that returns
// an array with all elements that have a class attribute that
// contains className
function carpeGetElementsByClass(className)
{
	var classElements = new Array()
	var els = document.getElementsByTagName("*")
	var elsLen = els.length
	var pattern = new RegExp("\\b" + className + "\\b")
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i]
			j++
		}
	}
	return classElements;
}
// carpeLeft: Cross-browser version of "element.style.left"
// Returns or sets the horizontal position of an element.
function carpeLeft(elmnt, pos)
{

	if (!(elmnt = document.getElementById(elmnt))) return 0;
	if (elmnt.style && (typeof(elmnt.style.left) == 'string')) {
		if (typeof(pos) == 'number') elmnt.style.left = pos + 'px';
		else {
			pos = parseInt(elmnt.style.left);
			if (isNaN(pos)) pos = 0;
		}
	}
	else if (elmnt.style && elmnt.style.pixelLeft) {
		if (typeof(pos) == 'number') elmnt.style.pixelLeft = pos;
		else pos = elmnt.style.pixelLeft;
	}
	return pos;
}
// carpeTop: Cross-browser version of "element.style.top"
// Returns or sets the vertical position of an element.
function carpeTop(elmnt, pos)
{
	if (!(elmnt = document.getElementById(elmnt))) return 0;
	if (elmnt.style && (typeof(elmnt.style.top) == 'string')) {
		if (typeof(pos) == 'number') elmnt.style.top = pos + 'px';
		else {
			pos = parseInt(elmnt.style.top);
			if (isNaN(pos)) pos = 0;
		}
	}
	else if (elmnt.style && elmnt.style.pixelTop) {
		if (typeof(pos) == 'number') elmnt.style.pixelTop = pos;
		else pos = elmnt.style.pixelTop;
	}
	return pos;
}
// moveSlider: Handles slider and display while dragging
function moveSlider(evnt)
{
	var evnt = (!evnt) ? window.event : evnt; // The mousemove event
	if (mouseover) { // Only if slider is dragged
		x = slider.startOffsetX + evnt.screenX // Horizontal mouse position relative to allowed slider positions
		y = slider.startOffsetY + evnt.screenY // Horizontal mouse position relative to allowed slider positions
		if (x > slider.xMax) x = slider.xMax // Limit horizontal movement
		if (x < 0) x = 0 // Limit horizontal movement
		if (y > slider.yMax) y = slider.yMax // Limit vertical movement
		if (y < 0) y = 0 // Limit vertical movement
		carpeLeft(slider.id, x)  // move slider to new horizontal position
		carpeTop(slider.id, y) // move slider to new vertical position
		sliderVal = x + y // pixel value of slider regardless of orientation
		sliderPos = (slider.distance / display.valuecount) * 
			Math.round(display.valuecount * sliderVal / slider.distance)
		v = Math.round((sliderPos * slider.scale + slider.from) * // calculate display value
			Math.pow(10, display.decimals)) / Math.pow(10, display.decimals)
		display.value = v // put the new value in the slider display element
		return false
	}
	return
}
// slide: Handles the start of a slider move.
function slide(evnt)
{
	if (!evnt) evnt = window.event; // Get the mouse event causing the slider activation.
	slider = (evnt.target) ? evnt.target : evnt.srcElement; // Get the activated slider element.
	dist = parseInt(slider.getAttribute('distance')) // The allowed slider movement in pixels.
	slider.distance = dist ? dist : carpeDefaultSliderLength // Deafault distance from global var.
	ori = slider.getAttribute('orientation') // Slider orientation: 'horizontal' or 'vertical'.
	orientation = ((ori == 'horizontal') || (ori == 'vertical')) ? ori : carpeSliderDefaultOrientation
		// Default orientation from global variable.
	displayId = slider.getAttribute('display') // ID of associated display element.
	display = document.getElementById(displayId) // Get the associated display element.
	display.sliderId = slider.id // Associate the display with the correct slider.
	dec = parseInt(display.getAttribute('decimals')) // Number of decimals to be displayed.
	display.decimals = dec ? dec : 0 // Default number of decimals: 0.
	val = parseInt(display.getAttribute('valuecount'))  // Allowed number of values in the interval.
	display.valuecount = val ? val : slider.distance + 1 // Default number of values: the sliding distance.
	from = parseFloat(display.getAttribute('from')) // Min/start value for the display.
	from = from ? from : 0 // Default min/start value: 0.
	to = parseFloat(display.getAttribute('to')) // Max value for the display.
	to = to ? to : slider.distance // Default number of values: the sliding distance.
	slider.scale = (to - from) / slider.distance // Slider-display scale [value-change per pixel of movement].
	if (orientation == 'vertical') { // Set limits and scale for vertical sliders.
		slider.from = to // Invert for vertical sliders. "Higher is more."
		slider.xMax = 0
		slider.yMax = slider.distance
		slider.scale = -slider.scale // Invert scale for vertical sliders. "Higher is more."
	}
	else { // Set limits for horizontal sliders.
		slider.from = from
		slider.xMax = slider.distance
		slider.yMax = 0
	}
	slider.startOffsetX = carpeLeft(slider.id) - evnt.screenX // Slider-mouse horizontal offset at start of slide.
	slider.startOffsetY = carpeTop(slider.id) - evnt.screenY // Slider-mouse vertical offset at start of slide.
	mouseover = true
	document.onmousemove = moveSlider // Start the action if the mouse is dragged.
	document.onmouseup = sliderMouseUp // Stop sliding.
	
	return false
}
// sliderMouseUp: Handles the mouseup event after moving a slider.
// Snaps the slider position to allowed/displayed value. 
function sliderMouseUp()
{
	if (mouseover) {
		v = (display.value) ? display.value : 0 // Find last display value.
		pos = (v - slider.from)/(slider.scale) // Calculate slider position (regardless of orientation).
		if (slider.yMax == 0) {
			pos = (pos > slider.xMax) ? slider.xMax : pos
			pos = (pos < 0) ? 0 : pos
			carpeLeft(slider.id, pos) // Snap horizontal slider to corresponding display position.
		}
		if (slider.xMax == 0) {
			pos = (pos > slider.yMax) ? slider.yMax : pos
			pos = (pos < 0) ? 0 : pos
			carpeTop(slider.id, pos) // Snap vertical slider to corresponding display position.
		}
		if (document.removeEventListener) { // Remove event listeners from 'document' (W3C).
			document.removeEventListener('mousemove', moveSlider, false)
			document.removeEventListener('mouseup', sliderMouseUp, false)
		}
		else if (document.detachEvent) { // Remove event listeners from 'document' (IE).
			document.detachEvent('onmousemove', moveSlider)
			document.detachEvent('onmouseup', sliderMouseUp)
		}
	}
	//Here is the function call for ajax to save values
	//alert(slider.id);//test
	
	//alert(document.getElementsByTagName("input")[0].getAttribute("id"));
	setSliderVal(document.getElementById(slider.id).style.left,slider.id)
	//setSliderVal(document.getElementById('slider1').style.left,document.getElementsByTagName("DIV")[6].getAttribute("id"))//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	mouseover = false // Stop the sliding.
}
function focusDisplay(evnt)
{
	if (!evnt) evnt = window.event; // Get the mouse event causing the display activation.
	display = (evnt.target) ? evnt.target : evnt.srcElement; // Get the activated display element.
	lock = display.getAttribute('typelock') // Is the user allowed to type into the display?
	if (lock == 'on') {
		display.blur()
	}
	return
}
window.onload = function() // Set up the sliders and the displays.
{
	sliders = carpeGetElementsByClass(carpeSliderClassName) // Find the horizontal sliders.
	for (i = 0; i < sliders.length; i++) {
		sliders[i].onmousedown = slide // Attach event listener.
	}
	displays = carpeGetElementsByClass(carpeSliderDisplayClassName) // Find the displays.
	for (i = 0; i < displays.length; i++) {
		displays[i].onfocus = focusDisplay // Attach event listener.
	}
}



This post has been edited by kajun989: 20 April 2011 - 10:05 AM

Was This Post Helpful? 0
  • +
  • -

#5 menukadevinda  Icon User is offline

  • D.I.C Regular

Reputation: -7
  • View blog
  • Posts: 470
  • Joined: 14-April 11

Re: Using Ajax to load a page that uses ajax

Posted 02 July 2011 - 08:43 PM

hi all,

I too have the same problem I started a post and closed by the forum so I nevigate to this page. I think still there is the problem.

Can any body help to figur the problem. I too have a menu and load html page in the right div.

my code is

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link href="cssBlog/styles.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" type="text/css" href="images/style.css" />
<!-- jQuery -->
<script type="text/javascript" src="jquery.js"/>
<!-- markItUp! -->
<script type="text/javascript" src="markitup/jquery.markitup.js"></script>
<!-- markItUp! toolbar settings -->
<script type="text/javascript" src="markitup/sets/default/set.js"></script>
<!-- markItUp! skin -->
<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" />
<!--  markItUp! toolbar skin -->
<link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css" />
<script type="text/javascript">

function loadNewThread(){
var xmlhttp;


if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {//alert(xmlhttp.responseText);
    document.getElementById("col2").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","index1.php",true);
xmlhttp.send();
}
function loadcurrentThread(){
var xmlhttp;


if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("col2").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","viewPosts.php",true);
xmlhttp.send();
}

</script>
    </head>
    <body>
       <body>
    <div class="box_3col" >
<div class="col1" id="col1">
  <!--   <button type="button" onclick="loadThreadTable();">Posts </button>

      <a href="createThread.html">creat a new thread</a><br>-->

<br><br>
<form method="GET" >

 <button type="button" onclick="loadNewThread();" >New Post</button>

</form>

<form method="GET">
<button type="button" onclick="loadcurrentThread();">Current Posts</button>

</form>
   
  
 </div>

<div class="col2" id="col2">



        </div>

        <div class="clear">
	    </div>
    </div>


        <?php
        // put your code here
        ?>
    </body>
</html>




index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>markItUp! Universal markup editor</title>
<link rel="stylesheet" type="text/css" href="images/style.css" />
<!-- jQuery -->
<script type="text/javascript" src="jquery.js"></script>
<!-- markItUp! -->
<script type="text/javascript" src="markitup/jquery.markitup.js"></script>
<!-- markItUp! toolbar settings -->
<script type="text/javascript" src="markitup/sets/default/set.js"></script>
<!-- markItUp! skin -->
<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" />
<!--  markItUp! toolbar skin -->
<link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css" />
</head>
<body>
<script type="text/javascript">

$(document).ready(function()	{
	// Add markItUp! to your textarea in one line
	// $('textarea').markItUp( { Settings }, { OptionalExtraSettings } );
	$('#markItUp').markItUp(mySettings);
	
	// You can add content from anywhere in your page
	// $.markItUp( { Settings } );	
	$('.add').click(function() {
 		$.markItUp( { 	openWith:'<opening tag>',
						closeWith:'<\/closing tag>',
						placeHolder:"New content"
					}
				);
 		return false;
	});
	
	// And you can add/remove markItUp! whenever you want
	// $(textarea).markItUpRemove();
	$('.toggle').click(function() {
		if ($("#markItUp.markItUpEditor").length === 1) {
 			$("#markItUp").markItUpRemove();
			$("span", this).text("get markItUp! back");
		} else {
			$('#markItUp').markItUp(mySettings);
			$("span", this).text("remove markItUp!");
		}
 		return false;
	});
});

</script>
<h1><a href="http://markitup.jaysalvat.com/">markItUp!</a></h1>
<p><em><a href="http://www.jaysalvat.com">By Jay Salvat</a></em></p>
<p>Downloads, examples and documentation at <a href="http://markitup.jaysalvat.com">http://markitup.jaysalvat.com</a>.</p>
<p>Click <a href="#" class="add">this link to insert content</a> from anywhere in the page or <a href="#" class="toggle">this one to <span>remove markItUp!</span></a></p>
<p><form action="blog_admin.php" method="POST">
   <textarea id="markItUp" cols="80" rows="20" name="th_post">
&lt;h1&gt;Welcome on markItUp!&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;markItUp!&lt;/strong&gt; is a Javascript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own markup system can be easily implemented.&lt;/p&gt;
</textarea>
<input type="submit" value="submit" />
    </form>

</p>
<p>Support the projet : <a href="http://markitup.jaysalvat.com/">Donate</a> | <a href="http://markitup.jaysalvat.com/">Contact</a></p>
</body>
</html>



please sombody help!!!!!!!!!!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1