Foren / Cotonti / Extensions / Support / jQuery modals in plugins

Hodges
#1 23. April 2013, 20:02

Members

Hi guys,

I want to include a jquery modal window in my plugin, but I'm struggling to make it work as it's my first time playing with js in siena.

Using this demo & source here: http://jqueryui.com/dialog/#modal this is what I've done so far:

  • Copied all js and css files used in the example code to my server (themes/[theme]/js).
  • Inserted the following code into themes/[theme]/[theme].rc.php:
cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/jquery-ui.css');
cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/jquery-1.9.1.js');
cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/jquery-ui.js');

cot_rc_add_embed('modalexample','
	$(function() {
    $( "#dialog-modal" ).dialog({
      height: 140,
      modal: true
    });
  });
  ');
  • Inserted the following lines into my plugin:
$plugin_body .= '<div id="dialog-modal" title="Basic modal dialog">
  <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
 
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>';

But no window is loaded and the divs just render ordinarily. Any help on how to achieve this simple javascript trick would be greatly appreciated!

Thank you.
Dayver
#2 23. April 2013, 21:50

Team
Thanked: 178 mal

Why?

cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/jquery-1.9.1.js');

Siena alredy have jquery lib

Pavlo Tkachenko aka Dayver
Hodges
#3 24. April 2013, 07:08

Members

Sorry I forgot to mention I first tried running the code without the cot_rc_add_file lines but it didn't work. This has got to be really simple! I don't understand why I can get this working in a standalone HTML file but not in this setup!
lukgoh
#4 24. April 2013, 09:17

Members
Thanked: 12 mal

You could try of removing this: 

cot_rc_add_embed('modalexample','
    $(function() {
    $( "#dialog-modal" ).dialog({
      height: 140,
      modal: true
    });
  });
  ');

And just including it directly in the plugin. 

Also $plugin_body isn't needed anymore, I suggest looking at more recent plugins and seeing how they are coded. 
Hodges
#5 24. April 2013, 13:57

Members

Hi lukgoh,

Thanks for your two cents. Including the javascript directly in the plugin (<script> inside <body> tags) still does nothing.

And although $plugin_body "isn't needed anymore", it is still a fast way of incorporating html into the plugin. I believe the method you're alluding to that "more recent plugins" use is separate tpl files(?), however, this particular plugin is an old genoa plugin I'm forking, and I haven't yet had the time to move the html out of the php files.

If anyone could help me incorporate a working jquery modal into a plugin I'd be immensely grateful!!!

Added 27 minutes later:

Ok I've figured it out:

  1. Looked at one of the scripts cotonti includes by default: <script type="text/javascript" src="js/jquery.min.js"></script>
  2. Inside jquery.min.js is reference to jqModal
  3. Googling jqModal reveals: http://dev.iceburg.net/jquery/jqModal/
  4. Applying 'example 1' code (which calls the *.jqm function of jqModal) to my plugin WORKS!

God damn-it I wish this stuff was documented. All I've read on these forums is that cotonti uses plain old 'vanilla' jQuery. However, 'jqModal is a plugin for jQuery'.

Perhaps the cotonti developers would like to update the documentation to state all the js functions available to plugin developers how to use them (or links offsite with demos and instructions).

Dieser Beitrag wurde von Hodges (am 24. April 2013, 14:24, vor 10 Jahre) bearbeitet