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?
 
hieloConnect With a Mentor Commented:
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
 
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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

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

All Courses

From novice to tech pro — start learning today.