|
JavaScript - Dynamic Ajax Loading Of Variables
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 Similar TutorialsI'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. Right, I've been searching for a few days now and i'm looking for a AJAX/JQuery script where i can load external content in to a div. I've seen a few site's that have it, and im after it so when i click the page link it loads it in the address bar like this http://www.google.co.uk/#content/index.php or what ever. Thanks. 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 When performing an Ajax request I want to change the submit button into a loading image and then swop it back again when the Ajax request is complete. I don't want a loading image anywhere else as on mobile phones it can't always be seen due to small screen size. I have grabbed the event (which references the form, is that right?) and I have something like this: Code: <button type="submit" name="name_can_vary">Search</button> event.name_can_vary.style.visibility = 'hidden'; //(obviously this isn't complete code but no doubt explains what I am talking about) ..which would hide the button and works exactly as I want to this point, but of course it does;t return when Ajax has completed or show the loading image. Ideally, instead of just hiding the button I want JavaScript to swop the button for the loading image. I suppose I could have extra HTML on every page that is made visible with the loading image but I would rather have JS do everything from here (saves editing all pages with submit buttons on). Thanks for any help. Hey, Were I am stuck is with the jquery I have a form that is done in a form class and when an option is selected from the dynamically populated drop down menu I would like it to fill in the text boxes so they can be edited. I currently have: getfeed.php - the page that is connected to the javascript Code: <?php
include('class/class.form.php');
include('class/class.users.php');
$iID = trim($_GET['extension']);
if(!$iID) die('No User Data found.');
$getValues = new Extension();
$user_info = $getValues->getUsersInformation($iID);
$sip_info = $getValues->getSipInformation($iID);
//print_r($user_info);
//print_r($sip_info);
$array = $getValues->getUsersInformation($iID);
echo '<br /><br />-- end of query --';
The Javascript Code:
if(document.id('LoadExtension') && document.id('ExtensionResponse')) { // id of select box
var sel = document.id('LoadExtension'); // ser select box as var.
sel.addEvent('change', function(chg) { // add change event to select box.
if(sel.getSelected().get('value') != '') { // on change if selected value is not empty.
new Request.HTML({
url : 'http://Domain.co.nz/Air/includes/getFeed.php?extension='+ sel.getSelected().get('value'),
onRequest: function() {
document.id('ExtensionResponse').set('html', 'loading...');
},
onComplete: function(r1, r2, html, js) {
document.id('ExtensionResponse').set('html', html);
}
}).send();
}
});
}
At the moment it does not load any data(I somehow need to get the $iID sent from the index.php but the drop down menu is a count array would I take it from this?) and is in a separate div below the form. I want to pass the "divId' function so that i can grab functions dynamically into the server where "success" is. this possible? I know the current setup is not (because " d.divId " isn't a variable) Code: function run(times,divId)
{
$(function()
{
var client_id = $('#client_id').attr('value');
$.ajax(
{
url:'http://urlhere.com',
data:{c:client_id},
timeout:99999999999999,
dataType:'jsonp',
jsonp:'callback',
jsonpCallback:'jsonpCallback',
error:function()
{
if (times==1)
{
run(2);
}
else
{
$('#'+divId).html('Error')
}
},
success:function(d)
{
$('#'+divId).html('$'+d.divId);
}
});
}
I have plenty of information in my database now, and I'm thinking of making a double-frame style webpage that can pull content from the db. but the AJAX code I have is sometimes very slow. It might be my server though. Could anyone shed some light on how the following website populates the right side frame with help content? http://vb.mvps.org/hardcore/ if you double click on the file on the left, the content immediately appears on the right. I'm guessing that it doesn't come from a database, because of pages like this: http://vb.mvps.org/hardcore/html/int...elibraries.htm that same content can be seen by one of those help chapters too. So, there's a complete file for the link. Could someone tell me how exactly this works? Hi, I am making a widget to work on any site, that means not my site, so I have no control of what other libraries are used on the page. Thats why I am loading my own jQuery libraries dynamically and then execute my own code. An issue I have that some sites are loading fine and all is working as expected, but some sites are executing the code 2 times. I have made a page dump and put on my own server, so I can replicate the issue better. GOOD: here is a page that works OK: (see the button that says: send these contact details and map to your mobile.) Code: http://test.plustest.info/suffolk/contact.html BAD: here is the page that shows the button I am trying to load 2 times: Code: http://test.plustest.info/cream.html As you can see the button appears 2 times, which is wrong... Even it shows 2 times, the popup appears just ok when you click on the button. Would anyone be able to check what can be wrong here? the code is in the: Code: <div id="now_send_it_wrapper"> so its easier to find. Any help would be much appreciated. Thanks, Vladas hi friends, I am looking for a solution to display the records of a dynamically selected mysql table using ajax,jsp & js combinations. any sites showing some example thnx in advance. I am developing a site that adds multiple dynamic buttons. I would be ideal if the event these buttons trigger could pass a 'variable' (the passed variable is constant with respect to each button). My attempt... myButton.setAttribute("onClick", "myFunction(" + myVar +")"); ...doesn't seem to work. Can anyone help out? 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 Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks Hi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong Hi everyone, I am having trouble getting a loading bar to appear from my javascript. I have the following code in place Code: $(document).ready(function(){
$(window).scroll(function(){
var h = $('#footer').height();
var y = $(window).scrollTop();
if( y > (h*0) && y < (h*1.0) ){
$('#loading').fadeIn("slow");
$('#loading').delay(10000).fadeOut();
$("#portfolios").delay(1000).fadeIn("slow");
}
});
})
I have it so when the user reacher the 'footer' div of the page, new posts appear which are contained in the 'portfolios' container div. They appear fine but no loading bar appears... The loading bar 'gif' is in the 'loading div id'. There is a 'display:none;' in the css on the loading div and the portfolios div. Any reason why the 'loading' div doesn't display but the portfolios does? I want the loading gif to show whilst the 'portfolios' is loading basically when the user hits the bottom of the page. Any help would be appreciated! Thank you! Hi there, Firstly my title may be a bit misleading as I don't i'm not sure how to do it. My situation is that I have a small piece of javascript that 'cycles' through a bunch of URL's (the URL's are reports produced by SSRS). The problem is that each time the javascript loads a new URL it has to generate the report, so I have a few seconds where the screen says 'Generating Report'. What I would like is a system that never displays the Generating Report, instead I would like to maybe pre-load the next report so it is ready to show instantly. Does anyone have any idea how to do this? Any help would be greatly appreciated. Cheers, Tom. Hi I am currently doing a photography site. I would like to do a 'portfolio' page, but would like to pre-load the images so that they appear on-screen faster. Do I need to connect code to <body onload>? I'm not sure where to put this question. I'mworking with something called OSClass which is a classified section php program. It has a plugin to make payments to paypal. but I need it to work in a new window, and the link won't do so. Don't suppose anybody sees an issue here? It seems to me that just adding target=_new to this would work. but it doesn't. Still opens the page in the same window. Code: <div class="buttons">
<div class="right"><a id="button-confirm" class="button" onclick="$('#payment_<?php echo $r; ?>').submit();" target="_new"><span><img src='<?php echo paypal_path(); ?>paypal.gif' border='0' /></span></a></div>
</div>
I have nearly successfully implemented a gallery using Backbox: http://www.javascriptkit.com/script/...ox/index.shtml However, when I test it in IE (7 & 8), it looks like it's invoking the javascripts and loading the large image from the thumbnail link, but then it just hangs up on the loading waiting to get the image. Does anyone know how to fix this? Thanks. |
|||||||