How to open jquery DOM window from my javascript?

Hello,

will someone please help me on javascript and jquery's Dom window.

I am trying to open a Dom window by using jQuery plugin Dom Window: http://swip.codylindley.com/DOMWindowDemo.html

However, I cannot open the Dom window. Would someone please see my html file and java script.

Please see the attached image. If you click the links from the "content" div, the DOM windows does not open.
Please suggest whether it is possible to open DOM window by using the specified DOM window plug in ; if so, what I need to do.

I am attaching the java script, the HTML file, and the screen shot that shows the links in the "content" div.


ajax.html
ajax.js
DomWindowIsNotWorking.jpg
LVL 3
ashley2009Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

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

hieloCommented:
you are dynamically adding this:
<script type="text/javascript">$jq('.absoluteIframeDOMWindow').openDOMWindow({})</script>

BUT at the time you are doing this, the content still does NOT have <a class='absoluteIframeDOMWindow'>, so no function/action is "attached/registered" to/with the links.

What you need to do is to get rid of all that <script>...</script> you are adding and instead execute the plugin code after you have added the links to the content:

...
	document.getElementById('content').innerHTML=contentInfo;


	flag = 1;
	var $jq=jQuery.noConflict();
	$jq('.absoluteIframeDOMWindow').openDOMWindow({ height:400, width:700,positionType:'absolute', positionTop:50, eventType:'click', positionLeft:50, windowSource:'iframe', windowPadding:0, loader:1, loaderImagePath:'animationProcessing.gif',loaderHeight:16, loaderWidth:17});
...

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
ashley2009Author Commented:
Hello,

thank you very much. Your solution worked, and I am not sure how. I am going to try different approaches to understand what I am not getting: going to try different DOM windows tomorrow.

Please note that your solution worked. I can open dom window.

But I do not want to mark as answer now as I need to try different type of DOM windows to see what exactly I am not getting so that I can ask more questions about: how to utilize jquery third party plugin to self made javascript.

Therefore, tomorrow , I might ask questions if I get stuck opening different type of DOM/Modal windows in this thread as I need to be sure what is happening here.


0
hieloCommented:

>>, and I am not sure how
I thought I was clear. Let me try again.

In general (meaning, independent of that specific plugin), is you do this:

<html>
<script>
$(document).ready(function(){
  // this will attempt to find a link RIGHT NOW with class='someLink' and bind/attach a function to it so
  // that when it is clicked it will alert hello. Look closer at the body. It is currently empty. I have NOT yet
  //added the link to it. So the link statement below finds NO link because it doesn't exist yet - I have
  //not added it to the body.
  $('a.someLink').click( function(){alert('hello')});

  //here I am "constructing" a link statement dynamically that I WILL be adding to the body, but up until
  //now I have NOT done so yet.
  var str="<a class='someLink'>...</a>"

  //NOW, this is the part where I am finally adding the link to the body. But by this time, the statements 
  //above already finished executing. to the link will not have the function attached to it. The proper way to do this is  
  //First add the link to the body, THEN execute $('a.someLink').click(....) so that jquery is able to find the link
  //Clear now?
  $('body').append(str);
});
</script>
<body>
</body>
</html>

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

ashley2009Author Commented:
Hello,

I read your last message, and I tried different type of DOM windows of http://swip.codylindley.com/DOMWindowDemo.html.
please help as I cannot open example 8.
I can open open example 6, but example 6 works strangely.

Please see the new javascript file for demonstration. I have tried different ways, but example 8's DOM window does not open at all.

Example 6's DOM window opens, but if I close it, and again if I open it, the innercontent is not there. I am not that interested about example 6 but

I really want to know what I am doing wrong in exAmple 8.
ajax.js
ajax.html
0
hieloCommented:
a. you already executed:
var $jq=jQuery.noConflict();

so you cannot use:
$.openDOMWindow(...)

You have to use $jq
$jq.openDOMWindow(...)

b. you also need to specify the "data source" for that "popup" window. You do this by specifying the option:
windowSourceID:'#example8Content'
$jq('.example8DOMWindow').click(function(){     	
	    //alert("HELLO from Example 8");
   		$jq.openDOMWindow({ 
			loader:1, loaderImagePath:'animationProcessing.gif', loaderHeight:16, loaderWidth:17, windowSourceID:'#example8Content'
		});
		return false; 
  	});

Open in new window

0
ashley2009Author Commented:
Thank you for the solution and all the explanation. It is very helpful. Thank you again.
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
JavaScript

From novice to tech pro — start learning today.