Display HTML form inside another html page through Javascript

Question

I have two separate html files. The first one is the main page.

The second one is the properties panel that needs to appear on the right of the canvas of the above page whenever a tool is dropped on the canvas from the toolbox on the left.

I was doing this earlier having the properties panel form as part of the same html page as the mail page( first image).

But since there are going to be various other forms/ property panels, I thought of extracting it to a different html form and calling them to be displayed in this position(right side) from my jsGold.js file.

The file structure is as follows:

The StreamProperty.html holds the Properties Panel form in the following form

<head>
<link rel="stylesheet" type="text/css" href="../../CSS/style.css">
<link rel="stylesheet" type="text/css" href="../../CSS/propertybox.css">
</head>
<body>

<div style="float: left">
    <h1 class="toolbox-titlex" id="tth">Properties Panel</h1>
    <form class="panel"  id="lot">
        <label>Stream Type:</label>
        <div class="panel-switch">
            <input type="radio" name="TypeGen" value="G" id="type_g" class="panel-switch-input" checked>
            <label for="type_g" class="panel-switch-label">Import</label>
            <input type="radio" name="TypeGen" value="A" id="type_a" class="panel-switch-input">
            <label for="type_a" class="panel-switch-label">Export</label>
            <input type="radio" name="TypeGen" value="B" id="type_b" class="panel-switch-input">
            <label for="type_b" class="panel-switch-label">Temporary</label>
        </div>
        <input type="text" class="panel-input-streamName" placeholder="Stream Name">
        <input type="text" class="panel-input-streamDef" placeholder="Stream Definition">
        <input type="button" value="Save" class="panel-button">
        <input type="reset" value="Reset" class="panel-button-reset">
        <input type="button" value="Cancel" class="panel-button-cancel">
    </form>
</div>
</body>

And I need to display this form through the JavaScript in the following place. Since there is no button click involved, but just a jsPlumb drop, I wasn't sure as how to get this done.

jsGold.js

$("#container").droppable({
      accept: '.project, .query',
      containment: 'container',
      /**
       *
       * @param e --> original event object fired/ normalized by jQuery
       * @param ui --> object that contains additional info added by jQuery depending on which interaction was used
       * @helper clone
       */
      drop: function(e, ui) {
          var dropElem = ui.draggable.attr('class');
          alert('drop element: ' + dropElem);
          droppedElement = ui.helper.clone();
          //jsPlumb doesn't support jQuery cloneUI method.
          //So once the icon is dragged and dropped on the canvas, the clone UI class will be removed
          ui.helper.remove();
          $(droppedElement).removeAttr("class");
          // repaint --> Recompute and position all the connections
          jsPlumb.repaint(ui.helper);
          //Add the 'pro' class which has the same styling as the 'project' class but differs in functionality
          //This avoids the duplication of another project class when one project class is being dragged and dropped
          if (dropElem == "project ui-draggable") {
            var newAgent = $('<div>').attr('id', i).addClass('pro');
            //Reset Property fields
            $("#lot")[0].reset();
            //Display the Properties panel when the element is Clicked
            $(".toolbox-titlex").show();
            $(".panel").show();
          } else {
            var newAgent = $('<div>').attr('id', i).addClass('que');
            alert("que added");
          }

          //Reset Property fields
          $("#lot")[0].reset();

Instead of the following line in the above file I need an alternative to do this

//Display the Properties panel when the element is Clicked
$(".toolbox-titlex").show();
$(".panel").show();

Does this relate to the jsPlumb functionality or purely sticks to Javascript? — Nayantara Jeyaraj
– Nayantara Jeyaraj, Commented Jun 10, 2016 at 8:13

Ananta Prasad · Accepted Answer · 2016-06-10 08:18:09Z

1

You can use frame tag to show one html form inside another html

<!DOCTYPE html>
<html>

<frameset cols="100%">
  <frame src="form_a.htm">
</frameset>

</html>

http://quandaflow.com/

answered Jun 10, 2016 at 8:18

Ananta Prasad

3,8683 gold badges26 silver badges36 bronze badges

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

5 Comments

Nayantara Jeyaraj Over a year ago

Yes. But how do I display it from within the js file. ?

Ananta Prasad Over a year ago

You can do this by using js script to inject frame tag with data.

Nayantara Jeyaraj Over a year ago

In my earlier version, where the property form was within the main page, I used the display: none property in css to hide the properties panel at the beginning and then inside my js file, after dropping the element on the canvas, I called the .show() function to display it. So similar to that, how can I do this with two forms?

Nayantara Jeyaraj Over a year ago

I just got this bit as well- $("#includedContent").load("Stream/StreamProperty.html"); This works fine as well

Ananta Prasad Over a year ago

great , nice to hear that

Collectives™ on Stack Overflow

Display HTML form inside another html page through Javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related