why if i try to load the gojs diagram with html page inside jquery ui modal dialog, the diagram wasn’t show. but if i try to open the page usually, the diagram successfully loaded. anyone can help me.? 
If the diagram is inside of an HTML element that gets resized (Which is possible if the modal is invisible, and then becomes visible, which is probably the case), then once the DOM element is shown or finished resizing, you must call myDiagram.requestUpdate();
See more info here: http://gojs.net/latest/intro/resizing.html
If that isn’t the issue, we may need to see the code.
thx for your reply. but in your link above, the diagram was still shown. in my case, the diagram wasn’t show. the page was blank.
here is some code:
for div element:
here is the jquery command :
$("#input").dialog({
autoOpen: false,
position: ‘center’ ,
title: ‘Transformation’,
draggable: false,
width : 800,
height : 700,
resizable : true,
modal : true,
});
$("#input").dialog(‘open’);
and this is the piece of the diagram code inside input_1.html
<span =“Apple-tab-span” style=“white-space:pre”>
fInputTemplate =
makeObj(go.Panel, “TableRow”, // This panel is a row in the containing Table
new go.Binding(“portId”,“id”), // binding
{
background: “transparent” , // so this port’s background can be picked by mouse
fromSpot: go.Spot.Right, // links only go from the right side to the left side
toSpot: go.Spot.Left,
cursor: “pointer”,
fromLinkable: true,toLinkable: false // allow drawing links (from or to) this port
},
makeObj(go.TextBlock,
{
alignment: go.Spot.Left,
width: 12,
height: 12,
column: 0,
margin: new go.Margin(0, 4) // ori . //font: “13px sans-serif” // ori
},
new go.Binding(“text”,“id”).makeTwoWay()
),
makeObj(go.TextBlock,
{
alignment: go.Spot.Left,
margin: new go.Margin(0, 4),
column: 1,
font: “bold 14px sans-serif”
},
new go.Binding(“text”,“name”).makeTwoWay()
),
makeObj(go.TextBlock,
{
alignment: go.Spot.Left,
margin: new go.Margin(0, 4),
column: 2,
font: “13px sans-serif”
},
new go.Binding(“text”,“typedata”).makeTwoWay()
)
);
I took a page and added this:
$("#input").dialog({
autoOpen: false,
position: 'center' ,
title: 'Transformation',
draggable: false,
width : 800,
height : 700,
resizable : true,
modal : true,
});
$("#input").dialog('open');
And this:
Then, I copied the minimal.html sample and saved it as input_1.html.
It seemed to work just fine:
Something else must be the problem here. Have you tried to debug/look at the console onboth the main page and your iframe?
Does your iframe HTML page reference the GoJS script?
is this error the possible thing.?
<span role=“presentation” =" -errorMessage hasBreakSwitch "><div role=“listitem” ="errorTitle focusRow subLogRow "><span ="errorMessage ">ReferenceError: go is not defined<div role=“presentation” ="errorTrace “><span =” “><div role=“listitem” =“errorSource errorSource-show focusRow subLogRow “><table =” " cellpadding=“0” cellspacing=“0”><t =” “><tr =” “><td =” “><span role=”” aria-=“false” title=“Break On Error” ="errorBreak a11yFocus “><td =” "><a ="errorSource a11yFocus "><pre title=“myDiagram = makeObjgo.Diagram, “myDiagram”,” ="errorSourceCode ">myDiagram = makeObj(go.Diagram, “myDiagram”,
but if the error was the problem, why if i open the page without modal form, the diagram can be shown.
ReferenceError: go is not defined
It sounds like you have a reference to go.js on your main page but you do not have one on your iframe page (input_1.html)
i think i’ve been include it.
do you mean like this.?
Yes, that seems correct. You’ll have to debug on both frames to figure out the issue from there.
may i see your code for modal above .? i want to compare it with mine.
Download site.zip here: http://gojs.net/latest/doc/download.html
And go into the samples folder and open up htmlInteraction.html (I picked that file because it already uses jQuery UI). I made this change to the HTML
And I added this bolded part to the JavaScript:
$(function() {
$("#paletteDraggable").draggable({handle: "#paletteDraggableHandle"}).resizable({
// After resizing, perform another layout to fit everything in the palette's viewport
stop: function(){ myPalette.layoutDiagram(true); }
});
$("#infoDraggable").draggable({handle: "#infoDraggableHandle"});
//here is the jquery command :
$(“#input”).dialog({
autoOpen: false,
position: ‘center’ ,
title: ‘Transformation’,
draggable: false,
width : 800,
height : 700,
resizable : true,
modal : true,
});
$(“#input”).dialog(‘open’);
});
Those were the only changes I made. It loads up the minimal.html sample (its in the same directory) as the iframe modal popup.
well ok i’ll try this one. thx for your help. may i know your email or skype please.? maybe i can ask you more later. if i have some problem with gojs.
excuse me sir. i have try your code and it works well. but in my case that doesn’t work
error :
<span role=“presentation” =" -errorMessage hasBreakSwitch "><div role=“listitem” ="errorTitle focusRow subLogRow "><span ="errorMessage ">TypeError: opener is null<div role=“presentation” ="errorTrace “><span =” “><div role=“listitem” =“errorSource errorSource-syntax focusRow subLogRow “><table =” " cellpadding=“0” cellspacing=“0”><t =” “><tr =” “><td =” “><span role=”” aria-=“false” title=“Break On Error” ="errorBreak a11yFocus “><td =” "><a ="errorSource a11yFocus "><pre title="var idNode = …_property_factory.idNode.value; // result example : “Each_1"” ="errorSourceCode ">var idNode = opener.document.form_property_factory.idNode.value;<pre title="var idNode = …_property_factory.idNode.value; // result example : “Each_1"” ="errorSourceCode ">
if i try to open the page manually. the function work well. but if i use modal form i have error message above.
I don’t know what “opener” is here. That’s not GoJS or sample code. I really can’t debug your (or someone else’s) code for you.
well i try to use gojs and backbonejs in my case. but i really confused with this thing. if i open the page from modal dialog, the diagram can’t be shown.
well i think i must try another way. thx for your help anyway 
I’m aware that it’s an old topic, but I think the error could be as simple as the $ identifier being used both for jQuery and GoJS.
All of the GoJS samples use $ = go.GraphObject.make; for conciseness, except the htmlInteraction one, where the identifier is GO to avoid conflict with $ being the default jQuery identifier.
If a developer isn’t aware of that, s/he might encouter this kind of strange behavior when working with both GoJS and jQuery.
That’s a good guess.
When we started this project in 2010, we were expecting that jQuery would be obsolete within a few years. That has actually happened, but there are still a lot of uses of jQuery in the world today. Including a lot of unnecessary uses. http://youmightnotneedjquery.com/