html, javascript, ajax

I have 3 html pages.., A.html, B.html and C.html is a pop up window.

On A.html, I have a button "Add Employee" .

When I click on the Add Employee button, I should get the B.html page and C.html ( a pop up window should get loaded automatically), without any button click on B.html.

how do i achieve this, any help greatly appreciated.
This code is opening the pop up window as a new window.. but i need the pop up window to be opened as a modal dialog box.. not as a complete new window.. how do i achieve this
 
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
 
<input name="addemp" id="addemp" type="submit" class="textbutton3" onClick="window.open('EmpInfo.do?fl=true');MM_goToURL('self',XXX.do?value=check');return document.MM_returnValue" value="Add Emp"></td>

Open in new window

sakvkAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Roger BaklundCommented:
Include the content of C.html within B.html (without the <head> part of course). Something like this:
<html>
<head>
<title>modal pop-up</title>
<script type="text/javascript"><!--
function popup() { document.getElementById('C').style.display='block'; }
// -->
</script>
<style>
div#C {
  position:fixed;
  top:2em;
  left:2em;
  width:20em;
  border:solid 2px black;
  color:black;
  background-color:silver;
  display:none;
}
</style>
</head>
<body onload="popup();">
  <h1>This is B.html</h1>
  <div id="C">
    <h1>This is C.html</h1>
    <p>This is the content of page C.html.</p>
    <p>This is the content of page C.html.</p>
    <p>This is the content of page C.html.</p>
    <div style="text-align:center">
      <button onclick="this.parentNode.parentNode.style.display='none';">Close</button>
    </div>
  </div>
  <p>This is the content of page B.html. This is the content of page B.html.</p>
  <p>This is the content of page B.html. This is the content of page B.html.</p>
  <p>This is the content of page B.html. This is the content of page B.html.</p>
  <p>This is the content of page B.html. This is the content of page B.html.</p>
  <p>This is the content of page B.html. This is the content of page B.html.</p>
</body>
</html>

Open in new window

0
sakvkAuthor Commented:
hi,
When I click on A.html, it is taking me to B.html in the background and displaying C.html . But  C.html is opening as a separate url... C:\code\C.html

What I am looking for is, C.html should not be opened as a separate url, but it should be like one dialog box......
0
Roger BaklundCommented:
Isn't that exactly what my example does? You must move the content of C.html into the file B.html.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

sakvkAuthor Commented:
Hi cxr...

am attaching the screen shot... then u wud be able to understand

see the C.html is opened as a new link on the browser...
but i want C.html to open without a new link... just like a dialog box....
urcode.JPG
0
Roger BaklundCommented:
My code does not do that...!? Please post the test code you have used to produce that screendump.
0
sakvkAuthor Commented:
the screenshot which i posted above is with ur code.....

what i am looking for is ..
displayfile.JPG
0
Roger BaklundCommented:
It is the code in A.html that opens the extra window.

Execute (my version of) B.html directly in the browser.

But first, replace "position:fixed" with "postition:absolute". "fixed" does not work in IE, of some reason (I use Firefox).

If you execute my example code (Not A.html!) directly in the browser, there is NO WAY it will open a new window. It does not contain any code to open a window.
0
sakvkAuthor Commented:
yeah.... i made the changes and saw... now i see when i click on B.html.. the C.html comes or seems embedded inside B.html.. but does not look like an overlay.... moreover i whould get that executed when i click on button from A.html
0
Roger BaklundCommented:
Ok, there are multiple issues here, lets take one thing at the time.

1) You must remove the code in A.html that opens C.html. A.html should only open B.html, then B.html will open C.html automatically.

2) You wanted something that looked like a dialog box. There is no dialog box in html, you have to make it look like a dialog box using html and css. In my example I just put in a gray background and a border and a centered close button. Modify this the way you want it to look like.

3) Then you must do ONE OF the following:
A) put the content of C.html into the <div id="C"> within B.html
B) include C.html in B.html by putting an iframe into the <div id="C"> within B.html
0
sakvkAuthor Commented:
hey cxr,

yes... this is working independently.... :)
but i cant embed a huge piece of code into div id=C part.... can i give something like this.. can i pass an url under div id=C


 <div id="C">
    <h1>This is C.html</h1>
    <p>This is the content of page C.html.</p>
    <p>This is the content of page C.html.</p>
    <p>This is the content of page C.html.</p>
    <div style="text-align:center">
      <button onclick="this.parentNode.parentNode.style.display='none';">Close</button>
    </div>
  </div>
 
inside this div, can i pass an url which opens up C.html which is ..as i cannot copy a huge content of data with this div... 

Open in new window

0
Roger BaklundCommented:
Yes, that was the B) option above. Use an iframe:

<div id="C">
<iframe src="C.html" width="100%">
</iframe>
</div>

Open in new window

0
Roger BaklundCommented:
You can of course keep the close button, if you need it:
<div id="C">
  <iframe src="C.html" width="100%">
  </iframe>
  <div style="text-align:center">
    <button onclick="this.parentNode.parentNode.style.display='none';">Close</button>
  </div>
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sakvkAuthor Commented:
hey cxr,

i am struggling to implement this as when i integrate this  into my code.... it embedding the page.. into B.html, is there anyway i can communicate with you.
0
Roger BaklundCommented:
I prefer to communicate here. What is the problem? What do you mean by "it embedding the page"?
0
sakvkAuthor Commented:
its coming inside B.html, and there is a cancel button in C.html which is not functional when it opens inside B.html, but the close button which u have given , using that I am able to close the window.
0
Roger BaklundCommented:
Can't you just remove the cancel button in C.html?
0
sakvkAuthor Commented:
no i cannot remove the button, apart from the button i have text box and other things..... in C.html.

actuallly the entire thing is working when from A.html i am able to go to B.html and from B.html , I click on AddEmp button and it takes me to the dialog box...

i cannot remove the contents of C.html... is there anyway i can do it...
0
Roger BaklundCommented:
I did not suggest to remove ALL content of C.html, only the not-working cancel button... what am I missing?
0
sakvkAuthor Commented:
cant remove them , its user reqt
0
Roger BaklundCommented:
What do you mean with "user reqt"? User requirement? What is required? That the cancel button is in C.html? Please explain.

0
sakvkAuthor Commented:
A, spontaneous reply and help
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

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.