I'm trying to create a component that works like a generic container, the difference is that it doesn't inject the inner HTML where the component is defined, but in the bottom of the page. I want to do this, because I would like to use in with the Bootstrap Modal Container.
.. other form fields...
<wo:MyModalContainer linkText = "Click Me" classLink="btn btn-default" id="MyModal">
... logic for another form...
... other form fields...
</wo:form>
I would like the result:
<form action="" method="post">
.. other form fields...
<a href="" class="btn bnt-default" data-toggle="modal" data-target="#MyModal">Click Me</a>
.. other form fields...
</form>
... other page HTML...
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<from action="" method="post">
... logic for another form...
</form>
</div>
</div>
</div>
</body>
That's the idea: the code contained in the container is appended to the bottom of the page (with the appropriate changes), but the form still work inside the component it is defined.
I need to do this, because, if i put the code where the component is defined, the second form is removed, changing the HTML DOM, and the fields in the second form inherit the class "form-horizontal" from the first form.
Is there a way to do this?
Thanks!
--
Daniele Corti
--
I DON'T DoubleClick