none
Javascript Class Buton Click olayını engelliyor. RRS feed

  • Soru

  • Merhabalar,

    son günlerde başımı şişiren bir olay bu sizden yardım rica ediyorum. Öncelikle yaptığım bir alışveriş sistmidir. Bazı sitelerde sepete ekle dendiğinde sepete kayarak giden ürün resmi olsun istemiştim. araştırarak buldum çokta güzel çalışıyor fakat sepete eklemek için imagebutona tıkladığım zaman eğer javascriptin kullandığı cssClass tanımlıysa sadece sürükleme işlemi yapıyor fakat butonun click olayına girmiyor yani sepete eklemiyor. Aynı anda hem sürükleyip hemde butonun click olayına girmeyi naptıysam beceremedim.

    Js kodları bunlar 

    <script type="text/javascript">
            $(document).ready(function () {
                $('.addProduct').each(function () {
                    var img = $(this).closest('#urun').find('img:first');
                    $(this).click(function () {
                        flyToElement($(img), $('#sepet-dis'));
                        return false;
                    });
    
                });
                $('.removeProduct').each(function () {
                    var img = $(this).closest('#urun').find('img:first');
                    $(this).click(function () {
                        flyFromElement($(img), $('#sepet-dis'));
                        return false;
                    });
                });
            });
    
            function flyToElement(flyer, flyingTo, callBack /*callback is optional*/) {
                var $func = $(this);
    
                var divider = 3;
    
                var flyerClone = $(flyer).clone();
                $(flyerClone).css({
                    position: 'absolute',
                    top: $(flyer).offset().top + "px",
                    left: $(flyer).offset().left + "px",
                    opacity: 1,
                    'z-index': 1000
                });
                $('body').append($(flyerClone));
    
                var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width() / divider) / 2;
                var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height() / divider) / 2;
    
                $(flyerClone).animate({
                    opacity: 0.4,
                    left: gotoX,
                    top: gotoY,
                    width: $(flyer).width() / divider,
                    height: $(flyer).height() / divider
                }, 700,
                        function () {
                            $(flyingTo).fadeOut('fast', function () {
                                $(flyingTo).fadeIn('fast', function () {
                                    $(flyerClone).fadeOut('fast', function () {
                                        $(flyerClone).remove();
                                        if (callBack != null) {
                                            callBack.apply($func);
                                        }
                                    });
                                });
                            });
                        });
            }
    
            function flyFromElement(flyer, flyingTo, callBack /*callback is optional*/) {
                var $func = $(this);
    
                var divider = 3;
    
                var beginAtX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width() / divider) / 2;
                var beginAtY = $(flyingTo).offset().top + ($(flyingTo).width() / 2) - ($(flyer).height() / divider) / 2;
    
                var gotoX = $(flyer).offset().left;
                var gotoY = $(flyer).offset().top;
    
                var flyerClone = $(flyer).clone();
    
                $(flyerClone).css({
                    position: 'absolute',
                    top: beginAtY + "px",
                    left: beginAtX + "px",
                    opacity: 0.4,
                    'z-index': 1000,
                    width: $(flyer).width() / divider,
                    height: $(flyer).height() / divider
                });
                $('body').append($(flyerClone));
    
                $(flyerClone).animate({
                    opacity: 1,
                    left: gotoX,
                    top: gotoY,
                    width: $(flyer).width(),
                    height: $(flyer).height()
                }, 700,
                        function () {
                            $(flyerClone).remove();
                            $(flyer).fadeOut('fast', function () {
                                $(flyer).fadeIn('fast', function () {
                                    if (callBack != null) {
                                        callBack.apply($func);
                                    }
                                });
                            });
                        });
            }
            PageMethods.imgbtn_SepeteEkle_Click();
            </script>

    CssClass="addProduct" söylediğim gibi bunu eklediğimde imagebuton click olayına girmiyor. Fakat sürükleme işlemi çalışıyor. Eklemediğim zaman ise sürüklemiyor doğal olarak. Ne yapabilirim sizce ?

    19 Mayıs 2013 Pazar 13:18

Yanıtlar

  • function ProductAnimater(elm) {
                    var img = $(elm).closest('#urun').find('img:first');                
                    flyToElement($(img), $('#sepet-dis'));
                    return true;
                }

    add product class lı elemanalar için çalıştırdığınız each fonksiyonunu kaldırıp yukardaki gibi bir fonksiyonu tanımlayıp, ilgili butonların clientClick fonksiyonlarına ProductAnimater(this); şeklinde eklerseniz hem animate çalışır hem de postback gerçekleşir. 

    Problem .net tarafından koyulan postback kodunun sizin kodunuz tarafından ezilmesiydi.


    Burak SARICA


    • Düzenleyen Burak SARICA 21 Mayıs 2013 Salı 10:53
    • Yanıt Olarak İşaretleyen Umut Duran 22 Mayıs 2013 Çarşamba 06:56
    21 Mayıs 2013 Salı 10:48
  • Explorer 9da çalışıyor fakat explorer 10da çalışmıyor. sürükleniyor fakat sepete ekleme kodu yani .cs dosyasındaki kod blogu çalışmıyor.
    Master sayfan varsa head kısmında <meta http-equiv="X-UA-Compatible" content="IE=9">  metasını eklersen, ie10, ie9 gibi render eder sayfayı ve hata ile karşılaşmazsın.

    Burak SARICA

    22 Mayıs 2013 Çarşamba 20:33

Tüm Yanıtlar

  • Cevaplarınızı bekliyorum en azından mantık yürütebiliriz :)
    21 Mayıs 2013 Salı 10:26
  • function ProductAnimater(elm) {
                    var img = $(elm).closest('#urun').find('img:first');                
                    flyToElement($(img), $('#sepet-dis'));
                    return true;
                }

    add product class lı elemanalar için çalıştırdığınız each fonksiyonunu kaldırıp yukardaki gibi bir fonksiyonu tanımlayıp, ilgili butonların clientClick fonksiyonlarına ProductAnimater(this); şeklinde eklerseniz hem animate çalışır hem de postback gerçekleşir. 

    Problem .net tarafından koyulan postback kodunun sizin kodunuz tarafından ezilmesiydi.


    Burak SARICA


    • Düzenleyen Burak SARICA 21 Mayıs 2013 Salı 10:53
    • Yanıt Olarak İşaretleyen Umut Duran 22 Mayıs 2013 Çarşamba 06:56
    21 Mayıs 2013 Salı 10:48

  • $(document).ready(function () {
                function ProductAnimater(elm) {
                    var img = $(elm).closest('#urun').find('img:first');
                    flyToElement($(img), $('#sepet-dis'));
                    return true;
                }
                $('.removeProduct').each(function () {
                    var img = $(this).closest('#urun-icerikleri').find('img:first');
                    $(this).click(function () {
                        flyFromElement($(img), $('#sepet-dis'));
                        return false;
                    });
                });
            });


    Fonksiyonu şu şekilde ekledim fakat


    ReferenceError: ProductAnimater is not defined

    ProductAnimater(this)

    bu şekilde bir hata alıyorum konsoldan.



    • Düzenleyen Umut Duran 21 Mayıs 2013 Salı 18:33
    21 Mayıs 2013 Salı 18:33
  • işin garibi

    <script type="text/javascript">
            function ProductAnimater(elm) {
                alert('oldu');
            }
        </script>
    bütün kodları silip sadece bunu yazdığım zaman hem hata veriyo hemde click olayı çalışıyo. Fakat dğer kodlar işin içindeyken yine olmuyor :S Uğraşıyorum bakalım yardımlarınızı bekliyorum.

    21 Mayıs 2013 Salı 19:27
  • Tamamdır hatayı buldum. Benden kaynaklıymış :) #urun yerine #urun-secenekleri olması gerekiyormuş. Burak bey teşekkür ederim size.

    Not: İE problemi var sanırım. Onclick özelliği orada çalışmıyor nedense.


    • Düzenleyen Umut Duran 22 Mayıs 2013 Çarşamba 06:57
    21 Mayıs 2013 Salı 19:50
  • Tamamdır hatayı buldum. Benden kaynaklıymış :) #urun yerine #urun-secenekleri olması gerekiyormuş. Burak bey teşekkür ederim size.

    Not: İE problemi var sanırım. Onclick özelliği orada çalışmıyor nedense.


    IE de problem ne? aspx.cs deki click olayına mı gitmiyor?

    Burak SARICA

    22 Mayıs 2013 Çarşamba 07:03
  • Explorer 9da çalışıyor fakat explorer 10da çalışmıyor. sürükleniyor fakat sepete ekleme kodu yani .cs dosyasındaki kod blogu çalışmıyor.
    • Düzenleyen Umut Duran 22 Mayıs 2013 Çarşamba 19:12
    22 Mayıs 2013 Çarşamba 19:11
  • Explorer 9da çalışıyor fakat explorer 10da çalışmıyor. sürükleniyor fakat sepete ekleme kodu yani .cs dosyasındaki kod blogu çalışmıyor.
    Master sayfan varsa head kısmında <meta http-equiv="X-UA-Compatible" content="IE=9">  metasını eklersen, ie10, ie9 gibi render eder sayfayı ve hata ile karşılaşmazsın.

    Burak SARICA

    22 Mayıs 2013 Çarşamba 20:33
  • Evet vardı denedim ve oldu. Teşekkür ederim çok yardımcı oldun gerçekten :)
    23 Mayıs 2013 Perşembe 21:42