Modal not showing up on version 1.4 (and works on 1.3.5)

GoogleCodeExporter commented 9 years ago

I have an issue with SimpleModal:

Version: 1.3.5 - 1.4
jQuery version: 1.4.2
All browsers

This code works on 1.3.5 and not in 1.4

    $("#btnSaveChanges").click(function () {
        openLoading();

        var automaticallyPublish = false;

        var callback = function (results) {
            closeLoading();

            if (results.result == SUCCESS) {
                dialogOk("Hola", "HOla2");
            }
            else {
                dialogOk("Chau", "HOla2");
            }
        };

        $.postAntiForgery('SomeURL', {
            automaticallyPublish: automaticallyPublish
        }, callback);

    });

This works as expected on 1.3.5, but not 1.4
OpenLoading() and CloseLoading() works fine on both versions.
However, DialogOk (another instance of modal) doesn't show up on 1.4.

Original issue reported on code.google.com by Pablo.Le...@gmail.com on 18 Oct 2010 at 5:41

GoogleCodeExporter commented 9 years ago

Can you take a look again in 1.4.1 and let me know if it is still an issue.

Original comment by emartin24 on 5 Nov 2010 at 10:47

Changed state: Accepted
Added labels: ****
Removed labels: ****

GoogleCodeExporter commented 9 years ago

Sure! but on monday, i'm not in work anymore!! I'll take a look and post the 
results here! thanks!

Original comment by Pablo.Le...@gmail.com on 5 Nov 2010 at 10:51

Added labels: ****
Removed labels: ****

GoogleCodeExporter commented 9 years ago

Works for me now!! Thanks for the feedback.

Original comment by Pablo.Le...@gmail.com on 8 Nov 2010 at 2:23

Added labels: ****
Removed labels: ****

GoogleCodeExporter commented 9 years ago

SimpleModal or SimpleModal Contact Form (SMCF)?
SimpleModal
Version of SimpleModal of SMCF (indicate Demo or WordPress plugin)?
1.4 and 1.4.1

Version of jQuery?
1.4.3 and 1.4.4

Browser/OS you are experiencing the problem with?
IE6 FF3.6.12 (these are the only browsers my company uses)

If applicable, please provide a code snippet or link to a website
demonstrating the problem.
First off, I appologize for having to bring IE6 issues to the table, but I HAVE 
to support it.

I was previously using SM 1.4 with jQuery 1.4.2 and everything worked just 
fine.  I then upgraded to 1.4.3 and 1.4.4.  I am using SimpleModal with the 
Ajaxify plugin and on it's own.  With these new releases of jQuery, the modal 
appears to have a height issue in IE6, but it is fine in FF.  All you see is a 
horizontal scroll bar and that is it, or the script causes the browser to run 
slowly and it asks to abort the script (when using this with Ajaxify). I have 
height set to auto.

I then tried SM 1.4.1 with jQuery 1.4.4, and it is the same issue in IE6.  In 
FF I am getting an error that .modal it is not a function when I am passing in 
the iframe and it stops the script when using with Ajaxify plugin.
Here is how I am using SM:
 SM on it's own:

<script type="text/javascript">
$(document).ready(function () {
    $('#seattleTraffic').click(function (e) {
                                         var src = "http://fseairframekmdev.web.boeing.com/pages/seattleTraffic.html";
        $('<div id="seattleTrafficBox" style="height:650px; title="Seattle Traffic"><center><img id="trafficText" class="png" src="_images/Dialog/trafficText.png" width="160" height="18" /><iframe id="innerIframe" src="' + src + '" height="600" width="400" frameborder="0" scrolling="no"></iframe></center></div>').modal({
                                        containerCss: {width:"440px"},
                                        overlayClose: true,                                                                         onOpen: function(dialog) {
                                            dialog.overlay.fadeIn('slow',function(){
                                                dialog.container.slideDown('slow', function(){
                                                    dialog.data.fadeIn('slow');
                                                    });
                                                });
                                        },
                                        onClose: function (dialog) {
                                           dialog.data.fadeOut('slow', function() {
                                                dialog.container.slideUp('slow', function() {
                                                    dialog.overlay.fadeOut('slow', function() {
                                                        $.modal.close();
                                                    });
                                                });
                                            });
                                       }
                                      });
        return false;
    });
    $('#seattleWeather').click(function (e) {
        var src = "http://fseairframekmdev.web.boeing.com/pages/seattleWeather.html";
        $('<div id="seattleWeatherBox" title="Seattle Weather"><center><img id="weatherText" class="png" src="_images/Dialog/weatherText.png" width="160" height="18" /><br/><iframe id="innerIframe2" src="' + src + '" height="270" width="270" frameborder="0" scrolling="no" allowtransparency="yes"></iframe></center></div>').modal({
                                        overlayClose: true,                                     maxWidth: 300,
                                        maxHeight: 300,
                                        onOpen: function(dialog) {
                                            dialog.overlay.fadeIn('slow',function(){
                                                dialog.container.slideDown('slow', function(){
                                                    dialog.data.fadeIn('slow');
                                                    });
                                                });
                                        },
                                        onClose: function (dialog) {
                                           dialog.data.fadeOut('slow', function() {
                                                dialog.container.slideUp('slow', function() {
                                                    dialog.overlay.fadeOut('slow', function() {
                                                        $.modal.close();
                                                    });
                                                });
                                            });
                                       }
                                      });
        return false;
    });
});
</script> 

Here is an example with ajaxify plugin:
   $(document).ready(function(){

                $.AjaxifyDefaults.onStart = function(o){
                      $('<img src="_images/ajax-loader-orange.gif"><div>Please wait while the content loads...</div>').modal({
                        containerCss:{
                        background:'transparent',
                        border: 'none',
                        color:'orange',
                        'font-weight': 'bold',
                        width:'100px',
                        top:'40%',
                        left:'73%',
                        'text-align':'center'
                        },
                        close:false,
                        overlayCss:{background:'#000'},
                        overlay:60,
                        onOpen: function (dialog) {
                            dialog.overlay.fadeIn('fast', function () {
                                dialog.container.slideDown('fast', function () {
                                    dialog.data.fadeIn('fast');
                                });
                            });
                        }
                      });//end of modal
                      };//end of onStart

                    $.AjaxifyDefaults.onComplete = function(o){
                          var dialog = $.modal.impl.d;
                            dialog.data.fadeOut('slow', function () {
                                dialog.container.slideUp('slow', function() {
                                    dialog.overlay.fadeOut('slow', function () {
                                        $.modal.close();
                                    });
                                });
                            });
                      };//end of onComplete'
I really love this plugin, and really need to get it working with jQuery >1.4.2 
with the css() speed boosts.  I know that they changed the data funciton in 
these newer releases, so I would guess that is where the issues is, but I 
cannot figure out what needs changed.
If applicable, please list the other code/libraries/plugins you are trying
to integrate with.

Original comment by austin.g...@gmail.com on 2 Dec 2010 at 5:44

Added labels: ****
Removed labels: ****

GoogleCodeExporter commented 9 years ago

same problem for ie8. i had to add 'same' fix for ie8(liek for ie7 in 1.4.1 
version) also to make plugin work correctly on IE8 browsers.

Original comment by plandem on 1 Feb 2011 at 12:54

Added labels: ****
Removed labels: ****

lw-bobbimartin / simplemodal

Modal not showing up on version 1.4 (and works on 1.3.5) #45