Solved

html, javascript, ajax

Posted on 2008-10-30
21
159 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
  • 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
 

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
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

 
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 …
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)

707 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

12 Experts available now in Live!

Get 1:1 Help Now