Solved

dialog box, in c# web app

Posted on 2006-07-07
15
411 Views
Last Modified: 2009-12-16
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.?
0
Comment
Question by:watherton
  • 8
  • 7
15 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17059039
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
 

Author Comment

by:watherton
ID: 17059250
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
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17062245
Wayne,

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

Bob
0
 

Author Comment

by:watherton
ID: 17064906
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
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17064934
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
 

Author Comment

by:watherton
ID: 17065386
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
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17067807
Try this:

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

Bob
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:watherton
ID: 17068707
Hi Bob,

get this error this time around:

Microsoft JScript runtime error: Object doesn't support this property or method
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17068947
Mixing up my Javascript :(

   document.getElementById('stopcheck');

Bob
0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 125 total points
ID: 17068949
It would have been:

   document.all.item['stopcheck'];

Bob
0
 

Author Comment

by:watherton
ID: 17069334
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
 

Author Comment

by:watherton
ID: 17069464
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
 

Author Comment

by:watherton
ID: 17069624
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
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17070226
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
 

Author Comment

by:watherton
ID: 17071068
I'll use the example that worked, I see how we get on. Thanks for all your input, especially on a Sunday.

Wayne
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now