Solved

html, javascript, ajax

Posted on 2008-10-30
21
166 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:sakvk
[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
  • 11
  • 10
21 Comments
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 22846798
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
 

Author Comment

by:sakvk
ID: 22850063
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
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 22850299
Isn't that exactly what my example does? You must move the content of C.html into the file B.html.
0
Technology Partners: 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:sakvk
ID: 22852465
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
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 22852640
My code does not do that...!? Please post the test code you have used to produce that screendump.
0
 

Author Comment

by:sakvk
ID: 22853794
the screenshot which i posted above is with ur code.....

what i am looking for is ..
displayfile.JPG
0
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 22853937
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
 

Author Comment

by:sakvk
ID: 22854085
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
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 22854261
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
 

Author Comment

by:sakvk
ID: 22857066
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
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 22857100
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
 
LVL 39

Accepted Solution

by:
Roger Baklund earned 500 total points
ID: 22857117
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
 

Author Comment

by:sakvk
ID: 22858151
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
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 22858330
I prefer to communicate here. What is the problem? What do you mean by "it embedding the page"?
0
 

Author Comment

by:sakvk
ID: 22858490
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
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 22858533
Can't you just remove the cancel button in C.html?
0
 

Author Comment

by:sakvk
ID: 22859076
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
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 22859174
I did not suggest to remove ALL content of C.html, only the not-working cancel button... what am I missing?
0
 

Author Comment

by:sakvk
ID: 22860408
cant remove them , its user reqt
0
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 22860870
What do you mean with "user reqt"? User requirement? What is required? That the cancel button is in C.html? Please explain.

0
 

Author Closing Comment

by:sakvk
ID: 31511897
A, spontaneous reply and help
0

Featured Post

Technology Partners: 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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google Tag Manager - Add Trigger Using Div class 22 95
Use Mid in Html 6 33
CSS - how to make button/link change to black on hover? 2 34
html5 1 42
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

739 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