Solved

dialog box, in c# web app

Posted on 2006-07-07
15
418 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 

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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to combine and minify CSS and JS files 5 37
How Close unsubmited attempts 10 43
Triple line in an alert message 4 20
Compute age Html 2 24
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

756 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