1265

How to programatically add and use elements (dialog box in this case)

Question:

So My first though was, that adding more, and more HTML elements is not a way to go, and I come up with this solution

var Jaxi = { CurrentLocation: '/', showLoginDialog: function () { dojo.place('<div data-dojo-type="dijit.Dialog" style="width:600px;" id="loginDialog"><div id="dialog-content"></div><a href="javascript:Jaxi.CloseDialog()">Close</div>', dojo.body()) dojo.xhrGet({ url: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation, load: function (result) { dojo.byId("dialog-content").innerHTML = result; } }); dojo.ready(function () { dijit.byId("loginDialog").show(); }); }, CloseDialog: function () { dijit.byId("loginDialog").hide(); dojo.destroy("loginDialog"); } };

It's working.. To some degree at least. Dialog open, but no styles are appiled. But moreover I can't close dialog. Question Is how to make it working ?

Answer1:

After you have placed the div in your body, Dojo needs to parse the HTML to "notice" the new widget. When it notices the data-dojo-type attribute it says "Hey, here's a widget, I need to make this into a beautiful Dialog".

showLoginDialog: function () { dojo.place('<div data-dojo-type="dijit.Dialog" ....</div>', dojo.body()); dojo.parser.parse(); ....

Of course, you also have to make sure your body tag has class="claro" (or any other theme you want to use).

That being said, I personally think this is a little messy way to make a dialog box. You are sort of mixing declarative with programmatic. I'm not sure what you mean by "<em>My first though was, that adding more, and more HTML elements is not a way to go</em>", but in my own opinion mixing HTML inside your javascript makes the code difficult to read. You may want to take a look at <a href="http://www.sitepen.com/blog/2010/01/20/managing-widget-templates-in-dojo-1-4/" rel="nofollow">this sitepen article</a> if you want a clean way to separate HTML and Javascript.

Recommend

  • How to make activity not to be covered by the RecentApps?
  • Trying to upload video to facebook using FBConnect for iPhone
  • How to not open multiple windows in WPF
  • Which event fires when i click outside paper-dialog?
  • AngularJS passing data back from mdDialog to parent controller
  • How to remove all of a jQuery UI dialog when it is closed
  • How can I make this modal persistent?
  • passing a default argument to a browserify module
  • HttpClient: disabling chunked encoding
  • How to make Twilio api Post request with the help of AFNetworking?
  • Why am I getting a “405 Method not allowed” error on “Put” operations through a WCF Resful service?
  • Why isn't obj.style.left = “200px”; working in this code?
  • Can't remove headers after they are sent
  • How to convert SOAP response with xsi values to json in WSO2esb
  • Angularjs pass function from Controller to Directive (or call controller function from directive) -
  • Simulate click Geckofx vb,net
  • saving file generated by TCPDF
  • Visual Studio 2010 debugger build correctly - compiler pdb and linker pdb not in synch?
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Play WS (2.2.1): post/put large request
  • Jquery UI tool tip close icon
  • Alert pop up with LWUIT
  • Optimizing database types to compact database (SQLite)
  • HTML download movie download link
  • TFS: Get latest causes slow project reloading
  • Updating server-side rendering client-side
  • Running a C# exe file
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • How to set the response of a form post action to a iframe source?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • How to stop GridView from loading again when I press back button?
  • Reading document lines to the user (python)
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?