Archive for the ‘ajax’ Category

top scroll bar

June 4, 2010

take a look at this guy’s site:

// http://www.autofusion.com/development/jwsinv/v0.3/compare_divs.html

wow – I had a bunch of logging data in a datagrid and since it was larger than my page, I had to scroll to the bottom and scroll to the right continuously. Finally my co-worker wondered if we couldn’t put a scroll bar at the top.

Here’s how it works:

1) suppose you have a div with a horizontal scroll bar at the bottom

2) add another div above it with auto scroll on. (make it not too tall so you don’t see the vertical scroll bar) Put another div inside this one – this div will represent the content and will cause the overflow to fire.

3) the javascript function that wires all this up connects the “scroll” events from each scroll bar so that when one is scrolled, the other’s scroll event also gets fired

Here’s the javascript I’m using:

// http://www.autofusion.com/development/jwsinv/v0.3/compare_divs.html
(function() {

var initDualScrollBar = function() {
var oScrollGrid = document.getElementById("ScrollGrid");
var otop_ScrollGrid = document.getElementById("top_ScrollGrid");

var gvWidth = $("#gvResult").width();
if (gvWidth == null) gvWidth = 100;
var divWidth = $("#ScrollGrid").width();
if (divWidth > gvWidth) gvWidth = divWidth;
$("#fakeInteriorGrid").width(gvWidth); // keep the widths the same in two scroll bars

// parallel the scroll events
addEvent(oScrollGrid, "scroll", function(e) {
otop_ScrollGrid.scrollLeft = oScrollGrid.scrollLeft;
});
addEvent(otop_ScrollGrid, "scroll", function(e) {
oScrollGrid.scrollLeft = otop_ScrollGrid.scrollLeft;
});
}

initDualScrollBar();

})();

// *************************************************************************************
// http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
// addEventListener not supported by IE
// these functions used in tstDataInspector to achieve the dual-scrollbar effect
function addEvent( obj, type, fn )
{
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent)
{
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
}

function removeEvent( obj, type, fn )
{
if (obj.removeEventListener)
obj.removeEventListener( type, fn, false );
else if (obj.detachEvent)
{
obj.detachEvent( "on"+type, obj[type+fn] );
obj[type+fn] = null;
obj["e"+type+fn] = null;
}
}
// *************************************************************************************

Advertisements

Ajax problem with <%= in HEAD

January 12, 2010

I included some javascript files into my master file with tags like this:

<script src='' language="javascript" type="text/javascript" >

(the purpose of that is to include the gui.js file from the master file, even though we might open a page in a subdirectory)

PROBLEM – when I added an Ajax control to a child page, I got the dreaded “The Controls collection cannot be modified because the control contains code blocks ”

SIMPLE SOLUTION – a Telerik website said to just move the offending code from the HEAD region into the BODY region, and that worked for me.
http://www.telerik.com/community/forums/aspnet/editor/the-controls-collection-cannot-be-modified-because-the-control-contains-code-blocks-i-e-lt-gt.aspx

Rick Strahl has some great discussion of this:
http://west-wind.com/WebLog/posts/6148.aspx

web service to return html , javascript converts return string

September 18, 2009

I had to make a kind of “quote of the day” web service. Then I changed it so that the returned text could be html formatted instead of just plain text.

That caused a problem for me, because while the html saved in my database looked good (bolds and line feeds etc), when my calling routine got the text out of the web service, it converted all the less than signs to < and the greater than signs to >.

I don’t know if this is a good solution, but here’s what it does:
INPUT STRING:

<?xml version=”1.0″ encoding=”utf-8″?>
<string xmlns=”http://tempuri.org/”>Yabba Dabba Doo.
&lt;br&gt;&lt;br&gt;

&lt;bold&gt;Fred Flintstone&lt;/bold&gt;</string>

OUTPUT STRING:

Yabba Dabba Doo.
<br><br>

<bold>Fred Flintstone</bold>

Here’s the routine:

 


// ---------------------------------------------------
// purpose - does a simple parse of the xml response to get the string we're interested in
function ajaxws_get_response_html(sXML) {
var sResponseText;
var iFirst = sXML.indexOf('org/">') + 6;
var iLast = sXML.indexOf('', iFirst);
sResponseText = sXML;

if (iFirst > 0 && iLast > 0) {
var iLength = iLast - iFirst;
sResponseText = sXML.substr(iFirst, iLength);
}

sResponseText = sResponseText.replace(/</g, '');
return sResponseText;
}

 

Here is where it fits into the set of routines to call a web service from the browser:

 

 

// purpose – ajax like routines to get data from the web service
var xmlhttp = null; // the init function will set this, it is the xml object that calls the server side function

var sReturned_Data;
sReturned_Data = ”;

var url_base = ”;
url_base = ‘ws/wsquotes.asmx/GetQuote’; // syntax for non-soap url
var debugjs;
debugjs = 0; // set the debug variable to 0 to turn off the alert messages
if (debugjs > 3) alert(‘page loaded, ajax_updater’);

// —————————————————
// purpose – try to guarantee that the activex object gets instantiated
// if ajax is not initiated when we call it the first time, then this sub makes sure that it gets initiated
function ajaxws_Init() {
try {
// Mozilla / Safari
xmlhttp = new XMLHttpRequest();
}
catch (e) {
// Explorer
var _ieModelos = new Array(
‘MSXML2.XMLHTTP.5.0’,
‘MSXML2.XMLHTTP.4.0’,
‘MSXML2.XMLHTTP.3.0’,
‘MSXML2.XMLHTTP’,
‘Microsoft.XMLHTTP’);

var success = false;
for (var i = 0; i 0) alert(‘ajaxws_CallWebServiceUpdater – id:’ );
if (debugjs > 0) alert(‘ajaxws_CallWebServiceUpdater – url:’ );

xmlhttp.open(“GET”, url, true);
xmlhttp.onreadystatechange = ajaxws_stateChanged; // http://snippets.dzone.com/tag/xmlhttp
xmlhttp.send(null);
// http://www.devguru.com/technologies/xmldom/QuickRef/obj_httpRequest.html
}

// —————————————————
// purpose – called by ajax event
function ajaxws_stateChanged() {
if (debugjs > 0) alert(‘ajaxws_stateChanged ‘);

if (xmlhttp.readyState == 4 || xmlhttp.readyState == “complete”) {
sReturned_Data = ajaxws_get_response_html(xmlhttp.responseText);
}
}

// —————————————————
// purpose – does a simple parse of the xml response to get the string were interested in
function ajaxws_get_response_text(sXML) {
return sXML;
var sResponseText;
var iFirst = sXML.indexOf(‘/”>’) + 3;
var iLast = sXML.indexOf(‘ 0 && iLast > 0) {
var iLength = iLast – iFirst;
sResponseText = sXML.substr(iFirst, iLength);
}
return sResponseText;
}

// —————————————————
// purpose – does a simple parse of the xml response to get the string we’re interested in
function ajaxws_get_response_html(sXML) {
var sResponseText;
var iFirst = sXML.indexOf(‘org/”>’) + 6;
var iLast = sXML.indexOf(”, iFirst);
sResponseText = sXML;

if (iFirst > 0 && iLast > 0) {
var iLength = iLast – iFirst;
sResponseText = sXML.substr(iFirst, iLength);
}

sResponseText = sResponseText.replace(/</g, ”);
return sResponseText;
}

(more…)