Solved

dialog box, in c# web app

Posted on 2006-07-07
15
408 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
Comment Utility
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
Comment Utility
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
Comment Utility
Wayne,

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

Bob
0
 

Author Comment

by:watherton
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Try this:

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

Bob
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

Author Comment

by:watherton
Comment Utility
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
Comment Utility
Mixing up my Javascript :(

   document.getElementById('stopcheck');

Bob
0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 125 total points
Comment Utility
It would have been:

   document.all.item['stopcheck'];

Bob
0
 

Author Comment

by:watherton
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

771 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

13 Experts available now in Live!

Get 1:1 Help Now