dialog box, in c# web app

hi experts,

I have the following js page

function createDialog()
{
  var body = document.getElementsByTagName("body")[0];
  var pageDimensions = getPageDimensions();
  var viewportSize = getViewportSize();

  if (viewportSize[1] > pageDimensions[1])
  {
    pageDimensions[1] = viewportSize[1];
  }

  var dropSheet = document.createElement("div");

  dropSheet.setAttribute("id", "dropSheet");
  dropSheet.style.position = "absolute";
  dropSheet.style.left = "0";
  dropSheet.style.top = "0";
  dropSheet.style.width = pageDimensions[0] + "px";
  dropSheet.style.height = pageDimensions[1] + "px";
  body.appendChild(dropSheet);

  try
  {
    var dialog = document.createElement("div");
    dialog.className = "customDialog";
    dialog.style.visibility = "hidden";
    dialog.style.position = "absolute";

    var dialogTitle = document.createElement("h1");
    dialogTitle.appendChild(document.createTextNode("Stopping a Card Holder"));
    dialog.appendChild(dialogTitle);

    var dialogMessage = document.createElement("p");
    dialogMessage.appendChild(document.createTextNode("Are you sure you want to stop this card holder?"));
    dialog.appendChild(dialogMessage);

    var dialogButton1 = document.createElement("input");
    dialogButton1.setAttribute("type", "button");
    dialogButton1.setAttribute("value", "Yes");
    attachEventListener(dialogButton1, "click", dialogClick, false);
    dialog.appendChild(dialogButton1);


    var dialogButton3 = document.createElement("input");
    dialogButton3.setAttribute("type", "button");
    dialogButton3.setAttribute("value", "Cancel");
    attachEventListener(dialogButton3, "click", dialogClick, false);
    dialog.appendChild(dialogButton3);

    body.appendChild(dialog);

    var scrollingPosition = getScrollingPosition();

    dialog.style.left = scrollingPosition[0] + parseInt(viewportSize[0] / 2) - parseInt(dialog.offsetWidth / 2) + "px";
    dialog.style.top = scrollingPosition[1] + parseInt(viewportSize[1] / 2) - parseInt(dialog.offsetHeight / 2) + "px";
    dialog.style.visibility = "visible";

    dialogButton1.focus();
  }
  catch(error)
  {
    dropSheet.parentNode.removeChild(dropSheet);

    return true;
  }

    return false;
}

function dialogClick(event)
{
  if (typeof event == "undefined")
  {
    event = window.event;
  }

  var target = getEventTarget(event);

  while (target.nodeName.toLowerCase() != "input")
  {
    target = target.parentNode;
  }

  var value = target.getAttribute("value");

  if (value == "Cancel")
  {
    var dialog = target;

    while (dialog.className != "customDialog")
    {
      dialog = dialog.parentNode;
    }

    closeDialog(dialog);
  }
  else
  {
       window.location.href = "EditCardHolder.aspx?action=" + value;
   
  }

  return true;
}

function closeDialog(dialog)
{
  var dropSheet = document.getElementById("dropSheet");

  dropSheet.parentNode.removeChild(dropSheet);
  dialog.parentNode.removeChild(dialog);

  return true;
}

function addLoadListener(fn)
{
  if (typeof window.addEventListener != 'undefined')
  {
    window.addEventListener('load', fn, false);
  }
  else if (typeof document.addEventListener != 'undefined')
  {
    document.addEventListener('load', fn, false);
  }
  else if (typeof window.attachEvent != 'undefined')
  {
    window.attachEvent('onload', fn);
  }
  else
  {
    var oldfn = window.onload;
    if (typeof window.onload != 'function')
    {
      window.onload = fn;
    }
    else
    {
      window.onload = function()
      {
        oldfn();
        fn();
      };
    }
  }
}

function attachEventListener(target, eventType, functionRef, capture)
{
  if (typeof target.addEventListener != "undefined")
  {
    target.addEventListener(eventType, functionRef, capture);
  }
  else if (typeof target.attachEvent != "undefined")
  {
    target.attachEvent("on" + eventType, functionRef);
  }
  else
  {
    eventType = "on" + eventType;

    if (typeof target[eventType] == "function")
    {
      var oldListener = target[eventType];

      target[eventType] = function()
      {
        oldListener();

        return functionRef();
      }
    }
    else
    {
      target[eventType] = functionRef;
    }
  }

  return true;
}

function getEventTarget(event)
{
  var targetElement = null;

  if (typeof event.target != "undefined")
  {
    targetElement = event.target;
  }
  else
  {
    targetElement = event.srcElement;
  }

  while (targetElement.nodeType == 3 && targetElement.parentNode != null)
  {
    targetElement = targetElement.parentNode;
  }

  return targetElement;
}

function getScrollingPosition()
{
  //array for X and Y scroll position
  var position = [0, 0];

  //if the window.pageYOffset property is supported
  if (typeof window.pageYOffset != 'undefined')
  {
    //store position values
    position = [
        window.pageXOffset,
        window.pageYOffset
    ];
  }

  //if the documentElement.scrollTop property is supported
  //and the value is greater than zero
  if (typeof document.documentElement.scrollTop != 'undefined'
      && document.documentElement.scrollTop > 0)
  {
    //store position values
    position = [
        document.documentElement.scrollLeft,
        document.documentElement.scrollTop
    ];
  }

  //if the body.scrollTop property is supported
  else if(typeof document.body.scrollTop != 'undefined')
  {
    //store position values
    position = [
        document.body.scrollLeft,
        document.body.scrollTop
    ];
  }

  //return the array
  return position;
}

function getViewportSize()
{
  var size = [0,0];

  if (typeof window.innerWidth != 'undefined')
  {
    size = [
        window.innerWidth,
        window.innerHeight
    ];
  }
  else if (typeof document.documentElement != 'undefined'
      && typeof document.documentElement.clientWidth != 'undefined'
      && document.documentElement.clientWidth != 0)
  {
    size = [
        document.documentElement.clientWidth,
        document.documentElement.clientHeight
    ];
  }
  else
  {
    size = [
        document.getElementsByTagName('body')[0].clientWidth,
        document.getElementsByTagName('body')[0].clientHeight
    ];
  }

  return size;
}

function getPageDimensions()
{
  var body = document.getElementsByTagName("body")[0];
  var bodyOffsetWidth = 0;
  var bodyOffsetHeight = 0;
  var bodyScrollWidth = 0;
  var bodyScrollHeight = 0;
  var pageDimensions = [0, 0];

  if (typeof document.documentElement != "undefined" &&
      typeof document.documentElement.scrollWidth != "undefined")
  {
    pageDimensions[0] = document.documentElement.scrollWidth;
    pageDimensions[1] = document.documentElement.scrollHeight;
  }

  bodyOffsetWidth = body.offsetWidth;
  bodyOffsetHeight = body.offsetHeight;
  bodyScrollWidth = body.scrollWidth;
  bodyScrollHeight = body.scrollHeight;

  if (bodyOffsetWidth > pageDimensions[0])
  {
    pageDimensions[0] = bodyOffsetWidth;
  }

  if (bodyOffsetHeight > pageDimensions[1])
  {
    pageDimensions[1] = bodyOffsetHeight;
  }

  if (bodyScrollWidth > pageDimensions[0])
  {
    pageDimensions[0] = bodyScrollWidth;
  }

  if (bodyScrollHeight > pageDimensions[1])
  {
    pageDimensions[1] = bodyScrollHeight;
  }

  return pageDimensions;
}

that is called from my asp.net c# 2.0 page with the following link:

<a id="chkStoppCardHolder" href="#" onclick="javascript:createDialog();return false;">stop customer</a>

All works fine however, when I click on yes, the form is posted back and all form field values are lost, for example, the page displays a customers details, name, address etc, click on stop customer should populate a hidden field on the form and preserve all the values, but because the click event (yes) of the dialog is creating a window.location.href the page is acting as if it was the first time it is loaded.

Is there a way of sending the response back to the same page and populating a hidden form field.?
wathertonAsked:
Who is Participating?
 
Bob LearnedConnect With a Mentor Commented:
It would have been:

   document.all.item['stopcheck'];

Bob
0
 
Bob LearnedCommented:
Does the action need to be assigned to an anchor?  Can it be associated with something else, like an HTML button that doesn't post-back?

Bob
0
 
wathertonAuthor Commented:
hello again Bob,

I just need the value captured, obviously cancel works fine, but if the user select yes then the event fires off a response.redirect as such and loads the form with a query string value.

If clicking yes set anything on the form without causing a post back (sorry redirect) then I would be happy.

Cheers
Wayne
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Bob LearnedCommented:
Wayne,

I can't quite see where Response.Redirect is supposed to happen.

Bob
0
 
wathertonAuthor Commented:
sorry Bob,

when I click on Yes, the code falls through to js script and executes this line:
window.location.href = "EditCardHolder.aspx?action=" + value;

this in effect reloads the page and I loose all my field information. Is there any way of replacing this piece of code with some code that will send the action to a hidden field.

Wayne
0
 
Bob LearnedCommented:
If you have defined a hidden input element, then it should be something like this:

    var hidden = document.forms[0].hiddenID;
    hidden.value = 'action=' + value;

Bob
0
 
wathertonAuthor Commented:
hi bob,

thanks for the reply, popped in the code, when I click on yes i get the following error

Microsoft JScript runtime error: 'undefined' is null or not an object

I have this in my aspx page:
<input type="text" id="stopcheck" runat="server" />
                <a id="chkStoppCardHolder" href="#" onclick="javascript:createDialog();return false;">stop card holder</a>

and then this in the js:

function dialogClick(event)
{
  if (typeof event == "undefined")
  {
    event = window.event;
  }

  var target = getEventTarget(event);

  while (target.nodeName.toLowerCase() != "input")
  {
    target = target.parentNode;
  }

  var value = target.getAttribute("value");

  if (value == "Cancel")
  {
    var dialog = target;

    while (dialog.className != "customDialog")
    {
      dialog = dialog.parentNode;
    }

    closeDialog(dialog);
  }
  else
  {
     // window.location.href = "EditCardHolder.aspx?action=" + value;
     var hidden = document.forms[0].stopcheck;
    hidden.value = 'action=' + value;
   
  }

  return true;
}

0
 
Bob LearnedCommented:
Try this:

 var hidden = document.all.getElementById('stopcheck');

Bob
0
 
wathertonAuthor Commented:
Hi Bob,

get this error this time around:

Microsoft JScript runtime error: Object doesn't support this property or method
0
 
Bob LearnedCommented:
Mixing up my Javascript :(

   document.getElementById('stopcheck');

Bob
0
 
wathertonAuthor Commented:
Bob, you are earning your points tonight my friend :-0)


falls over on the other line now:

Microsoft JScript runtime error: 'undefined' is null or not an object

on this line:

hidden.value = 'action=' + value;
0
 
wathertonAuthor Commented:
not sure if this has anything to do with, but I did googled the error and it brought up some suggestions about the form having to be set a runat=server. Well my form is based on a masterpage, which does have it's form attribute set to runat=server, however because it is a masterpage it may be behaving somewhat indifferent.

Wayne
0
 
wathertonAuthor Commented:
ok getting somewhere, well sort of any way.

I placed a input control with an id of test in the MasterPage, then in the js code did the following:

var hidden = document.forms[0]["test"];
    hidden.value = value;

this worked, so i guess the java script can not see the elements that are part of a form that has been constructed from a masterpage---- strange.

Wayne
0
 
Bob LearnedCommented:
Wayne,

I haven't done all that much work with Javascript and accessing variables when working with master pages.  The test would be, how many forms are there for the document element?  Maybe it is document.forms[1], but I really don't know.

Bob
0
 
wathertonAuthor Commented:
I'll use the example that worked, I see how we get on. Thanks for all your input, especially on a Sunday.

Wayne
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.