Editing Dialog Boxes

[matthoughton]

I will see what I can do. At the moment it's buried deep within my cms manager which is live. The version I've been using to test with is on my local machine using wamp. I'll stick a test online shortly!

Thanks for your help

[matthoughton]

I've uploaded a version which I've ripped from my CMS manager.

It shows the issue perfectly.

http://e-cms.evolved-it.co.uk/wym_test/wym_test.php

Just try using the Insert Image button and see what happens!


Thanks again

[roundash]

Thanks for putting up the test page - it makes it much easier to see whats going on.

Yes, your error points to line 1471 in your jquery.wymeditor.js file:

Code: Select all

var sUrl = jQuery(wym._options.srcSelector).val();

This is where the url to the image file is selected and the javascript is looking for the srcSelector value and can't find it - hence the zero length string.

If you look at line 485 in the file you'll see the code:

Code: Select all

srcSelector: ".wym_src",

This is telling wymeditor to get the value from an element with a class of wym_src.

If you add this class to your images dropdown element the code should then work.

So line 572 should now read:

Code: Select all

<div id="images" class="wym_src"> </div>

I think that should then fix it.

[matthoughton]

Hi,

Unfortunately that doesn't help. Although now it allows the window to close because a null value is parsed to the javascript.

The select line within my php uses the class 'wym_src' as it does in the original code:

Code: Select all

<select name="wym_src">

The issue I can't seem to get around is that although the user sees the output from the PHP, it doesn't seem to have been embedded into the html. There is effectively no form being sent.


Thanks once again for your assistance

[roundash]

Did you mean class='wym_src' and not name='wym_src'?

If you can upload a zip file containing all the required files for me to recreate your test page (your php files, jquery and jquery.wymeditor files etc), I'll see if I can get it working.

[matthoughton]

Cheers, I've sent you a PM with the source code.

In relation to the above, it does change things slightly, I get a different error instead:

Code: Select all

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.5.30729; .NET CLR 3.0.30618; OfficeLiveConnector.1.3; OfficeLivePatch.0.0)
Timestamp: Mon, 20 Jul 2009 20:36:57 UTC


Message: 'attr(...).attr(...)' is null or not an object
Line: 1476
Char: 9
Code: 0
URI: http://localhost/wym_test/wymeditor/jquery.wymeditor.js


That line relates to this:

Code: Select all

   jQuery("img[@src=" + sStamp + "]", wym._doc.body)

[roundash]

Matt

Sorry for the delay in getting back on this one.

I've sent a PM with a link to some updated files.

Let me know if you get it working.

[matthoughton]

thanks, unfortunately I'm having the same issues!

[rudygotya]

Hey guys, had the same issues, maybe my little snippets help you with coding.

Instead of using a drop down i show em an image preview to select.

I extended the dialogImageHtml string in wymeditor.js with one div container:

Code: Select all

+ "</form>"
+ "<div id='gallery'><h2>Loading images, please wait...</h2></div>"
+ "</body>",

then i modified the snippet from django file browser:

Code: Select all



postInitDialog : function(wym, wdw) {
                        var dialog = jQuery(wdw.document.body);
                        dialog.focus();
                        if (dialog.hasClass('wym_dialog_image')) {
                                var gallery = dialog.find('div#gallery');
                                $.ajax({
                                        type: "GET",
                                        url: "url/to/insert_image.php/",
                                        cache: false,
                                        dataType: "html",
                                        success:
                                                function(data, status)
                                                {
                                                        gallery.html(data);
                                                },
                                        complete:
                                                function (data, status) {
                                                        dialog.find(".imagePreview").click(function() {
                                                                dialog.find("input.wym_src").val($(this).attr("src"));
                                                                dialog.find("input.wym_alt").val($(this).attr("alt"));
                                                                dialog.find("input.wym_title").val($(this).attr("title"));
                                                        })
                                                }
                                });
                        }
                }


and a custom php file could look like:

Code: Select all

<ul id="imageContainer">
<?php
    $files = glob ("../folder/*");
    foreach ($files as $key=>$image) {
        $filename =  preg_replace("#..\/folder\/#imU", "", $image);
        $fileurl = APPLICATION_URL."/folder/".$filename;
        echo '<li><img src ="'.$fileurl.'" id="preview'.$key.'" class="imagePreview" style="max-width200px;max-height:150px;" alt="'.$image.'" title="'.$image.'" /></li>';
    }
?>
</ul>

feel free to extend, hope it is useful.

regards