Skip to content

Instantly share code, notes, and snippets.

@jessy1092

jessy1092/Semantic-ui-modal.html

Created May 4, 2015 11:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jessy1092/8e6ee7e888e62f7dfd61 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jessy1092/8e6ee7e888e62f7dfd61 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Semantic-ui-modal.html
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.1/semantic.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react-with-addons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.1/semantic.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id="modal_test" class="ui dimmer modals page"></div>
<script type="text/jsx">
var TestButton = React.createClass({
render: function () {
return (
<div className="ui button" onClick={this._onClick}>Modal Test</div>
);
},
_onClick: function () {
console.log("hello");
$('.modal').modal('show');
}
});
var TestModal = React.createClass({
render: function () {
return (
<div className="ui modal">
<div className="content">
<div className="description"> Test </div>
</div>
</div>
);
}
});
React.render(
<TestModal />,
document.getElementById('modal_test')
);
React.render(
<TestButton />,
document.getElementById('example')
);
</script>
</body>
</html>
@benmathes
Copy link

benmathes commented Sep 15, 2015

Did this work? calling $('.modal').modal('show'); modifies the DOM, and react seems to go apeshit with errors like:

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.2.0.0.1:$caa5685c-463f-34aa-8b28-9cc5a6b9ca3d.1.$6faa9e87-5acb-3abf-be9f-7cd788608a71.0.1.0.1): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID `` ```

@AdamBCo
Copy link

AdamBCo commented Aug 10, 2016

@benmathes did you ever figure that invariant violation out? I'm running into the same problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment