Why does my Iframe lose its content when I execute JavaScript from within the frame to “slide” it's parent div?

I am new to learning js and having a problem with the following:

I have a custom block on my page that looks like this...

<div id="chat">
  <iframe src="/sites/all/libraries/webim/client.php?locale=en"
  height="100%" width="100%">
  </iframe>
</div>

<div class="slider">
<a class="toggleup" href="#">Live Support</a>
</div>

And a function in my script.js file that looks like this...

jQuery(function() {
  jQuery(".toggleup").click(function(){
    jQuery("#chat").slideToggle("slow");
    jQuery(this).toggleClass("toggledown");return false;
  });
});

The issue at hand is that client.php returns 2 variations of a page, both of which contain close buttons that execute:

javascript:window.close();

Which I have changed to:

javascript:window.parent.jQuery('.toggleup').click()

When the JavaScript is executed, the chatbox slides closed as it should, but then all I see is:

[object Object]

where my Iframe content should be.

What am I doing wrong?

Answers


I don't really get what you are trying to do :).

All I can say for now is that using inline tags for scripts is not a good idea, try to enhance the page from inside the script.js. Are you trying to fire the click on the .toggleup with .click()? This won't work since the .click() function registers a handler for the selected object(s) - in this case you are adding an undefined handler as there are no arguments supplied. If you want to trigger the event on the element use .trigger('click'); instead. The [object Object] thingy is the string representation of an object so I think somehow you assign a stringified object to the iframes src.

Thats all I can say for now, if you specify a little more what you want to do I will try to help you :)


The problem was that I had these two elements in my custom block and both needed to be executed for everything to work.

<div id="chat">
  <iframe src="/sites/all/libraries/webim/client.php?locale=en"
  height="100%" width="100%">
  </iframe>
</div>

<div class="slider">
<a class="toggleup" href="#">Live Support</a>
</div>

However when calling the jQuery function like this...

javascript:window.parent.jQuery('.toggleup').click()

instead of clicking the link, the box would close as expected but the div and iframe are never created.

Instead I changed the following line in my custom block from...

<a class="toggleup" href="#">Live Support</a>

to...

<a class="toggleup" href="#" id="chatbtn">Live Support</a>

and called it using

parent.document.getElementById('chatbtn').click();

instead of the previous jQuery code therefore executing everything in my custom block and not just the jQuery for closing the slide.

Hope it helps someone. :


Need Your Help

Use custom objects as the source for Microsoft Reports (.rdlc)

object reporting rdlc

In some instances, I prefer working with custom objects instead of strongly typed datasets and data rows. However, it seems like Microsoft Reporting (included with VS2005) requires strongly typed

hiding and displaying uitoolbar on same button click

iphone uiview hide

I am trying to hide and display a UIView on BarButtonItem click. Priviously i also posted the question regarding same but didnt find any suitable answer. I created UIView manually in IB and just pl...