Load on Click Javascript or jquery

Question

I have a page with several different iframes which are delaying my loading time so I'd like them to load only when I click on a separate button.

As I have it set up now, there are "window blocks" and inside each one of these divs there are two siblings, the "app link" and the app "window";

so here's my structure (there are several similar "window blocks" on the same page)

<div class="w-clearfix window-block">
<a class="app-link w-inline-block" data-ix="open-window" href="#" style="transition: all 0.2s ease-in-out 0s;">
<div class="w-clearfix wapps window ui-draggable" data-ix="collapse-on-load" style="transition: color 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s; opacity: 0; transform: translateX(0px) translateY(100%) translateZ(6000px); display: none;">

I'm also using a little jquery to make the windows draggable (it's a very similar situation to a Windows (or MacOS) desktop: shortcuts and windows.

$( function() {
    $( ".window" ).draggable({ handle: ".window-handle" });  
} );

Is it possible to make each sibling window load as I click on the button next to it with a single "line" of code? Or do I have to add one for each class / element? What's that line of code? (I'm sorry if this sounds dumb..)

Is it possible to also unload that div on a second click and then reload again when the button is clicked (for a third time)?

I'm also trying to make each window jump to the top of the screen (move up on Z?) as I click on each window but that's not working, any suggestions?

Thank you very much...

You mean you want to load a iframe into a div when a button is clicked? I dont see a button in your code. — Rajshekar Reddy
– Rajshekar Reddy, Commented Sep 19, 2016 at 11:27
First line talks about iframe and the html has div - which is it? — Jamiec
– Jamiec, Commented Sep 19, 2016 at 11:28
hey, sorry for that, what I would really need is to load a whole div (and its content and iframe) only on click; in this case the "app link" is the button and "w apps" is the window. — Alan Borger
– Alan Borger, Commented Sep 19, 2016 at 11:30
Possible duplicate of jQuery: Loading iframe on click - how to write manageable code? — Rob
– Rob, Commented Sep 19, 2016 at 11:30
You could create the iframes with empty src values, and then use a button to trigger a function like document.GetElementById('IframeID').src="link" to actually load the iframe. Unfortunately, you'd have to do that for each frame separately. — Tijmen
– Tijmen, Commented Sep 19, 2016 at 11:31

user5555929 · Accepted Answer · 2016-09-19 11:30:18Z

0

I think what you need is AJAX. A button click sends a request to the server and writes the response HTML into the window. The W3Schools tutorial is pretty straightforward.

answered Sep 19, 2016 at 11:30

user5555929

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Load on Click Javascript or jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related