Archive for the ‘javascript’ Category

move a div

June 28, 2017

with position

xpos = xpos + x;
ypos = ypos + y;

$(".inner").parent().css({ position: 'relative' });
$(".inner").css({ left: xpos + 'px', top: ypos + 'px', position: 'absolute' });

console.log('AFTER x:' + $('.inner').position().left + ' y:' + $('.inner').position().top);

with offset

console.log('BEFORE x:' + $('.inner').position().left + ' y:' + $('.inner').position().top);

xpos = xpos + x;
ypos = ypos + y;

$(".inner:last").offset({top: ypos,left: xpos});
console.log('AFTER x:' + $('.inner').position().left + ' y:' + $('.inner').position().top);

fix all submit buttons at one swell foop

May 25, 2011

The problem: my users are apparently getting clicky on me and causing multiple additions of data for us. When the application was first developed, we did not bounce-protect the buttons, because it was not a credit-card related application, and we didn’t think about it.

Techniquest you’ll learn:
1) a number of jQuery tricks
2) perhaps more deeply how Asp.Net form submit works (how it passes “event” to the server). We provide a bullet proof function to create the necessary hidden variables and add them to the DOM even if you don’t have any controls set to AutoPostback.

How to try this yourself:
ASPX and in-line Javascript
screen capture of my html
safeSubmit.js file
* we bind a javascript click event to every submit button in the current page (we’re thinking to plug this into our master page to fix the entire project)
* set_event_hidden_vars – creates EVENTTARGET and EVENTCOMMAND if they don’t already exist
* safe_submit – disables the button and communicates with the user. We put a delay in before the submit because otherwise the user wouldn’t see any of our cosmetic changes to the button.

// purpose - select all the submit buttons, and then bind a safe submit function to them
function bindEvents() {
// get an array of inputs of type submit
var btnArray = $(':submit');

for (var i = 0; i < btnArray.length; i++) {
var btn = btnArray[i];
//use jQuery to get the btn, then call bind
if (btn != null) $(btn).bind("click", safe_submit); // this syntax runs, but it doesn't pass the the this object
}

}

// purpose - if the asp.net hidden vars that simulate events are present, use them.
// otherwise, create them with the correct values
function set_event_hidden_vars(btn) {
var hdn = document.getElementById('__EVENTTARGET');
if (hdn == null) {
var shdn = '';
shdn = shdn.replace('qqq', btn.id);
var h = $(shdn);
$(document.forms[0]).append(h); // my pages are submitting from form[0]
//$('form').append(h);

var scmd = '';
var c = $(scmd);
$(document.forms[0]).append(c);
//$('form').append(c);
}
else hdn.value = btn.id;

}

// purpose - general routine to submit a button but to disable it so we don't get double clicks
function safe_submit(p) {
if (bShowAlerts > 0) alert('safe_submit');
if (p == null) {
alert('p is null');
return false;
}
var btnArray = $(this);
var btn = btnArray[0];
if (btn != null) {
// show the user that the button has changed
// $(btn).hide('slow'); // this worked
//$(btn).css("background-color", "green");
$(btn).css("border-color", "white");
$(btn).css("foreground-color", "white");
$(btn).val("Please wait a bit ...");
btn.disabled = true;

if (bShowAlerts > 0) alert('safe_submit ' + btn.id)

// the hidden vars communicate with the server
set_event_hidden_vars(btn)

setTimeout(submit_after_delay, 500);

}
else {
alert('the button was null');
return false;
}

}

function submit_after_delay() {
document.forms[0].submit();
}

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;
}
}
// *************************************************************************************

GridView – Edit command won’t work, Javascript work around

January 28, 2010

I was using the gridview option AutoGenerateEditButton=”true” .

It used to work for the gridview in question. Today I had an issue, and believe I saw a post that is similar to my situation where gridview itself had an issue

msft reply-2007

The behavior I saw is illustrated by the following images. When I mouse over the generated links, at the base of the page I can see the javascript function that would be called. (note that the update command is missing).

edit

update

cancel

My workaround is to perform the same doPostBack function call as the generated links performed.

Here is the code:

JAVASCRIPT

var gvUniqueId; // we need the ctl00$ControlPlaceHolder1$gvQueries string for the gridview
gvUniqueId = '<%=gvQueries.UniqueID %> ' ;
var cmd;

function handle_gvUpdate(rowid) {

cmd = 'Update$' + rowid;

__doPostBack(gvUniqueId, cmd);

}

function handle_gvEdit(rowid) {

cmd = 'Edit$' + rowid;

__doPostBack(gvUniqueId, cmd);

}

function handle_gvCancel(rowid) {

cmd = 'Cancel$' + rowid;

__doPostBack(gvUniqueId, cmd);

}

ASPX PAGE

<asp:GridView ID="gvQueries" runat="server"NOTA BENE: if you have problems pasting any of this code, contact me and I’ll send you the exact script. It’s difficult for me to paste asp.net code into wordpress.

AutoGenerateColumns=”False”

AutoGenerateEditButton=”false”

AutoGenerateDeleteButton=”True”

DataSourceID=”odsQueries”

DataKeyNames=”queryid”

EnableViewState=”False”>

<Columns>

<asp:HyperLinkField DataNavigateUrlFields=”QueryID”

DataNavigateUrlFormatString=”frmQueriesDisplay.aspx?QueryID={0}”

DataTextField=”QueryID” DataTextFormatString=”view” Text=”View”

Target=”_blank” />

<asp:TemplateField HeaderText=”Edit” >

<EditItemTemplate>

<a href=’javascript:handle_gvCancel(<%# Container.DataItemIndex %>)’>Cancel</a>

<a href=’javascript:handle_gvUpdate(<%# Container.DataItemIndex %>)’>Update</a>

</EditItemTemplate>

<ItemTemplate>

<a href=’javascript:handle_gvEdit(<%# Container.DataItemIndex %>)’>Edit</a>

</ItemTemplate>

</asp:TemplateField>

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…)