JavaScript - Problem Loading Dynamic Ajax Content

I'm working on my portfolio and I want to get content to load into my "middle" div upon clicking on the buttons in the sidebar.

I'm able to get it to load, but I can't figure out how to get the CSS to load. I keep getting errors in the code. Here is the code I'm using: http://www.dynamicdrive.com/dynamici...jaxcontent.htm

Here is what I've got:

Code:

<img src="images/rule.png" id="rule" width="1" height="1" />
  		<a href="javascript:ajaxpage('about.html', 'middle');"><img src="images/about.png" width="195" height="101" alt="about" /></a>
      <img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
  		<a href="javascript:ajaxpage('work.html', 'middle');"><img src="images/work.png" width="195" height="101" alt="work" />
      <img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
		<img src="images/resume.png" width="195" height="101" alt="resume" />
      <img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
		<a href="javascript:ajaxpage('contact.html', 'middle'); loadobjs('contact.css', 'feature.js')"><img src="images/contact.png" width="195" height="101" alt="contact" /></a> 
  <img src="images/rule.png" id="sidebar_rule" width="194" height="1" /></div>

I'm working on the contact page right now, just trying to figure out how to get it to load properly. Here is a screenshot of what it's supposed to look like:

https://skitch.com/jillianadriana/r7...itled-document

I can't get it to load with the custom CSS.

I am using this code... simplified for example

Code:

[
<script type="text/javascript">

function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>



<a onclick="loadContent('#content', 'http://www.website.com/includes/content.php');"


<div id="content"></div>

Works fine if run on http://www.website.com but not on http://www.website.com/home/sitepage. I have spent a few hours and cannot figure it out. Can anyone? Thanks

Hello,

I have a rather complex problem involving ajax and the dynamic loading of text.

Basically, I have a flash player with a video and a series of annotations that the customer would like to appear next to the flash player. These annotations need to dynamically light up and move as the timecode associated with the annotation is passed on the flash player's timecode.

I had a basic static system up and running fine. The problem is that the videos could be 3 hours long and have thousands of annotations - which causes a looonng load time for the page so I would like them to appear dynamically.

At the moment I have tried using the below code to load the first 100 annotations and then when the 100th annotation appears, the next 100 should load up.

The trouble is that it doesn't work! The first 100 annotations cycle through perfectly but then nothing seems to happen when the 100th annotation is read. Please help!

Here's the code....

On the record's html page, I load up the first 100 annotations in the $annotations array in a container called 'media-meta-container' - which appears next to the Flash plaer:
Code:

<div id="media-item" style="width: 858px;">
<div id="media-meta-container" style="width: 302px;">
<ul>
<? $annotate_count = 0; ?>
<? for($i=0;$i<10;$i++): ?>
<? if($annotations[$i]["start"] > 0 && $annotations[$i]["end"] > 0): ?>
<li class="media-meta-li-off" id="annotation_container_<?=$annotate_count?>" onclick="seekPrompt(<?=$annotations[$i]["start"]?>);"><p><?=$annotations[$i]["text"]?></p></li>
<input type="hidden" id="start_<?=$annotate_count?>" value="<?=$annotations[$i]["start"]?>" />
<? $annotate_count++; ?>
<? endif; ?>
<? endfor; ?> 
</ul>
</div> 
<input type="hidden" id="count" value="<?=$annotate_count?>" size="12" />
<input type="hidden" id="start_count" value="0" size="12" />
<input type="hidden" id="start_time" value="0" size="12" />

On an attached javascript file the following function is run every 100ms to update the annotations next to the player:

Code:

function updateTimeCode()
{
	var player = document.FLVClipEditor;
	
	if (player)
	{
		var state = player.getState();
		var time = player.getCurrentTime();
		var start_count = document.getElementById("start_count").value;
		var start_time = document.getElementById("start_time").value;
		
		document.getElementById("annotation_container_" + start_count).className = 'media-meta-li-off';
		var end_count = document.getElementById("count").value;
				
		if(state != "stopped")
		{
			
			
			if(time <= start_time)
			{
				for(k=0;k<start_count;k++)
				{
					var start = document.getElementById("start_" + k).value;
					if(time < start) break;
				}
				
				var start_count = k - 1;
			}
			
			if(start_count > 0) start_count--;
			
			for(i=start_count;i<end_count;i++)
			{
				var start = document.getElementById("start_" + i).value;
				document.getElementById("annotation_container_" + i).className = 'media-meta-li-off';
				if(time < start) break;
			}
			

//IF WE HAVE REACHED THE END OF THE AVAILABLE ANNOTATIONS THEN LOAD UP SOME MORE - THIS IS THE PART I AM HAVING PROBLEMS WITH
//THE FUNCTION FIRES BUT NOTHING HAPPENS
			if(end_count == i)
			{
				var new_end_count = end_count + 50;
				document.getElementById("count").value = new_end_count;
				scroll_annotations(end_count, new_end_count);
			}
			
			
			document.getElementById("annotation_container_" + start_count).className = 'media-meta-li-off';
			document.getElementById("annotation_container_" + i).className = 'media-meta-li-off';
			
			if(i > 0) i--;
			
			if(i - start_count > 3) 
			{
				document.getElementById("start_count").value = i;
				document.getElementById("start_time").value = document.getElementById("start_" + i).value;
			}
			
			var filled = document.getElementById("annotation_container_" + i);
			
			
			if(i == 0)
			{
				var end = document.getElementById("start_0").value;
				if(time > end)
				{
					filled.className = 'media-meta-li-on';
				}
			}
			else
			{
				filled.className = 'media-meta-li-on';
					
			}
			
			document.getElementById("media-meta-container").scrollTop = filled.offsetTop - 412;
			
		}
	}
}

Here is the scroll_annotations() code that is being called when we reach the end of the annotations:

Code:

function scroll_annotations(start, end){
	$.ajax({
		type: "GET",
		url: "/xml/record_annotations.php",
		dataType: "xml",
		data: "id="+id+"&media_urn="+media_urn+"&start="+start+"&end="+end+"",
		success: function(xml) {
			
			$(xml).find('annotation_item').each(function(){
				
				var annotation_count = $(this).attr('id');
				var startTimecode = $(this).find('startTimecode').text();
				var start = $(this).find('start').text();
				var annotate_count = $(this).find('annotate_count').text();
				var text = $(this).find('text').text();
				$('<li class="media-meta-li-off" id="annotation_container_' + annotate_count + '" onclick="seekPrompt(' + start +');"><p>' + text + '</p><p>' + startTimecode + '</p></li><input type="hidden" id="' + annotate_count+ '" value="' + start + '" />').appendTo('ul#annotations-list-items');
				
			});
		}
	});
}

Where record_annotations produces an xml file like this to give the annotations variables:

Code:

<annotations>
−
<annotation_item id="0">
<start>64.760000</start>
<annotate_count>0</annotate_count>
<text> ahnfea </text>
</annotation_item>
−
<annotation_item id="1">
<start>65.360000</start>
<annotate_count>1</annotate_count>
<text> we all seek. Two states for two </text>
</annotation_item>
−
<annotation_item id="2">
<start>65.920000</start>
<annotate_count>2</annotate_count>
<text> people living in peace and security. </text>
</annotation_item>
−
<annotation_item id="3">
<start>70.720000</start>
<annotate_count>3</annotate_count>
<text> The verbal gloves came off at an EU </text>
</annotation_item>
−
<annotation_item id="4">
<start>73.680000</start>
<annotate_count>4</annotate_count>
<text> summit in Brussels as the French </text>
</annotation_item>
</annotations>

Thank you. Let me know if there is any other information you need

Hello there,

new to this forum and starting with a quick question. Normaly I can figure things out myself but I'm a bit stuck on this one.

I have two scripts.

one is for TinyMCE (WYZIWYG editor):

Code:

		tinyMCE.init({
				mode : "textareas",
				theme : "advanced",
				plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

						
				// Theme options - button# indicated the row# only
        theme_advanced_buttons1 : "newdocument,save,|,styleprops,del,ins,attribs,|,visualaid,visualchars,template,pagebreak,|,preview,cleanup,code,print,|,|,help,fullscreen",
        theme_advanced_buttons2 : "insertlayer,absolute,moveforward,movebackward,|,tablecontrols,|,hr,advhr,,charmapemotions,iespell,media,ltr,rtl,anchor,image,nonbreaking,|,insertdate,inserttime",
		theme_advanced_buttons3 : "bold,italic,underline,strikethrough,|,outdent,indent,|,bullist,numlist,|,sub,sup,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons4 : "undo,redo,|,cut,copy,paste,|,pastetext,pasteword,|,search,replace,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,blockquote,cite,|,abbr,acronym,|,link,unlink,|,removeformat",
		content_css : '/CSS/TinyMCE.css',
		theme_advanced_styles : "Test style=header1;",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

		});
		
		function setup() {
			tinyMCE.init({
					mode : "textareas",
					theme : "advanced",
					plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

							
					// Theme options - button# indicated the row# only
			theme_advanced_buttons1 : "newdocument,save,|,styleprops,del,ins,attribs,|,visualaid,visualchars,template,pagebreak,|,preview,cleanup,code,print,|,|,help,fullscreen",
			theme_advanced_buttons2 : "insertlayer,absolute,moveforward,movebackward,|,tablecontrols,|,hr,advhr,,charmapemotions,iespell,media,ltr,rtl,anchor,image,nonbreaking,|,insertdate,inserttime",
			theme_advanced_buttons3 : "bold,italic,underline,strikethrough,|,outdent,indent,|,bullist,numlist,|,sub,sup,|,styleselect,formatselect,fontselect,fontsizeselect",
			theme_advanced_buttons4 : "undo,redo,|,cut,copy,paste,|,pastetext,pasteword,|,search,replace,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,blockquote,cite,|,abbr,acronym,|,link,unlink,|,removeformat",
			content_css : '/CSS/TinyMCE.css',
			theme_advanced_styles : "Test style=header1;",
			theme_advanced_toolbar_location : "top",
			theme_advanced_toolbar_align : "left",
			theme_advanced_statusbar_location : "bottom",
			theme_advanced_resizing : true,

			});
		}

first part loads tinymce when it's there on the page, second part loads it when a button is pushed.

second script is for loading filecontent into a div:

Code:

		function load_this(url) {
			if (window.XMLHttpRequest) { // Non-IE browsers
				req = new XMLHttpRequest();
				req.onreadystatechange = targetDiv;
				try {
					req.open("GET", url, true);
				} catch (e) {
					alert(e);
				}
				req.send(null);
			} else if (window.ActiveXObject) { // IE
				req = new ActiveXObject("Microsoft.XMLHTTP");
				if (req) {
					req.onreadystatechange = targetDiv;
					req.open("GET", url, true);
					req.send();
				}
			}
		}

		function targetDiv() {
			if (req.readyState == 4) { // Complete
				if (req.status == 200) { // OK response
					document.getElementById("main").innerHTML = req.responseText;
				} else {
					alert("Problem: " + req.statusText);
				}
			}
		}

now the problem:

I have this page with div 'main'. an url loads this script, but after loading the dynamic content into the div, the setup() script isn't working:

Code:

		function load_editor(url) {
			load_this(url);
                        setup();
		}

where url=editor.php.

The funny thing is: when I click the button to load the content into the div, the textarea (from editor.php) loads, but the javascript function to start tinymce isn't working!

This is probably because right after loading the div with 'editor.php' the setup() script doens't recognise the freshly loaded content. However, when I place a link in 'editor.php' which calls javascript:setup(); and click it after loading the content, setup() does work.


my question:

How can I make it so, that, when I press a link or button to load the editor.php into a div, the setup() script recognises the fresh code and starts the WYSIWYG editor? Do I have to use state ready or something? And ifso, how do I do this?

Or is there some other way I can do this?

Kind regards and many thanks for your help!

Kevin

Hello all,

I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page.

It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user.

So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it.

Is this easy to do? I am new to javascript so bear with me

Code:

alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#newcontent').children().last().after(data);
                alreadyloading = false;
                nextpage++;
            });
        }
    }
});

The 'new content' is a div which is at the bottom of the page and is where the new content loads to!

Thank you very much