Extra Form
PHP PHP 7.0
CMS XpressEngine

<script>
var val=0;

jQuery(document).ready(function($) {

    $('#pr_select_geo').on('click', function() {
        $(this).addClass('act');

        var geoSuccess = function(position) {
            getWeather(JSON.stringify(dfs_xy_conv('toXY', position.coords.latitude, position.coords.longitude)));
        };
        var geoError = function(error) {
            $('#pr_select_geo').removeClass('act');
            selLocation();
        };

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(geoSuccess, geoError, {timeout: 5000});
        } else {
            $('#pr_select_geo').removeClass('act');
            selLocation();
        };
    });

    $('.txt_desc').on('mouseenter mouseleave click', function(e) {
        if (e.type === 'mouseenter') {
            $(this).html($(this).data('msg')).css('color', '#0092ff');
        }
        else if (e.type === 'mouseleave') {
            $(this).html($(this).data('loc')).css('color', '');
        }
        else {
            selLocation();
        }
    });

    $('.dust_type0').on('click', function() {
        $('.aqi_detail').slideToggle(400);
    });

    $('#pr_select_close').on('click', function() {
        $('.pr_select_region').hide();
        $('.pr_dsp_weather').fadeIn(1500);
    });

    $('#pr_select_pre').on('click', function() {
        var rgncd = $(this).data('rgncd').toString();
        getWeather(rgncd);
        if(rgncd.length == 1) {
            $('#pr_select_pre').hide();
        } else if(rgncd.length == 2) {
            $(this).data('rgncd', '0');
        }
    });

    $('#pr_region_list').on('click', '.pr_rgn_item', function() {
        var rgncd = $(this).data('rgncd').toString();
        
        if(rgncd.length == 2) {
            $('#pr_select_pre').data('rgncd', '0');
        } else if(rgncd.length == 5) {
            $('#pr_select_pre').data('rgncd', rgncd.substring(0, 2));
        } else if(rgncd.length == 8) {
            $('#pr_select_pre').data('rgncd', rgncd.substring(0, 5));
        }

        $('#pr_select_pre').show();
        getWeather(rgncd);
    });

    var selLocation = function() {
        $('.pr_dsp_weather').hide();
        $('#pr_select_pre').hide();
        $('.pr_select_region').fadeIn('slow');
        getWeather('0');
    };

    function getWeather(rgncd) {
        $.ajax({
            url: './widgets/pr_weather_v2/getWeather.php',
            global: false,
            type: 'POST',
            dataType: 'json',
            data: {
                loc: rgncd
            },
            beforeSend: function() {
                $('.pr_spinner').show();
            },
            success: function(result) {
                $('.pr_spinner').hide();
                
                if(result && result.success) {
                    if(result.type == 'list') {
                        var rgnList = new Map();
                        var arrayObj = result.data.split('|');
                        arrayObj.forEach(function(obj) {
                            var arrayStr = obj.split(':');
                            rgnList.set(arrayStr[0], arrayStr[1]);
                        });
                        var html = '';
                        rgnList.forEach(function(val, idx) {
                            html += '<li class="pr_rgn_item" data-rgncd="'+idx+'">'+val+'</li>';
                        });
                        $('#pr_region_list').html(html);
                    } else if(result.type == 'html') {
                        if(result.isgeo) {
                            $('#pr_select_geo').removeClass('act').addClass('on');
                        } 
                        else {
                            $('#pr_select_geo').removeClass('on');
                        };

                        $('#ico_wl').removeClass().addClass('ico_wl').addClass(result.data.weather.class);
                        $('.txt_weather').html(result.data.weather.txt);
                        $('.txt_temp').html(result.data.weather.temp+'<span class="txt_unit">℃</span>');
                        $('.txt_desc').html(result.region+', '+result.data.weather.time+' 현재').data('loc', result.region+', '+result.data.weather.time+' 현재');                        
                        $('.humidity_type0').html(result.data.weather.humidity);
                        $('.wind_type0').html(result.data.weather.wind);
                        $('.dust_type0').html(result.data.aqi.level).css('color', result.data.aqi.bgcolor);
                        $('.aqi_detail').css('background-color', result.data.aqi.bgcolor).css('color', result.data.aqi.color);
                        $('.aqi_detail .data_provide a').css('color', result.data.aqi.color);
                        $('.aqi_detail dt').html('<span>미세먼지</span>'+result.data.aqi.pm10+' ㎍/㎥<br/><span>초미세먼지</span>'+result.data.aqi.pm25+' ㎍/㎥');
                        $('.aqi_detail_time').html(result.data.aqi.time+' 현재, ');

                        $('.pr_select_region').hide();
                        $('.pr_dsp_weather').fadeIn(1500);
                        $('#pr_select_pre').data('rgncd', '0');
                    }
                }
                else {
                    $('#pr_select_geo').removeClass('act');
                    $('.txt_desc').html(result.emsg).data('loc', result.emsg);
                }
            },
            error: function(result) {
                $('#pr_select_geo').removeClass('act');
                console.log(result.responseText);
            },
        });
    }

<!--@if($widget_info->trace)-->
    $('#pr_select_geo').trigger('click');
<!--@elseif($widget_info->req_load)-->
    getWeather('Load');
<!--@end-->

});

</script>

 

 

 

정확히 말하면 날씨 위젯입니다.

 

비로그인 시 슈퍼캐시가 작동되어 빠르게 웹페이지 이용이 가능합니다. 그런데 날씨 위젯에서 날씨 갱신 후 슈퍼캐시도 함께 갱신이 필요해서 혹시 저 스크립트 속에 슈퍼캐시를 갱신하는 것을 추가해 줄 수 있나요??

  • profile
    슈퍼캐시는 서버단에서 작동하는 것이므로 js에서 뭔 짓을 해도 영향을 받지 않습니다.
  • profile profile
    흠... 날씨를 새로 받아와도 전체화면캐시가 갱신될때까지 약간 출력에 애로가 있내요. 로그인 시에는 ajax로 가져온 후 새로고침 한번이면 정상화 되는데요...

    전체화면캐시 만료 시점에 날씨를 가져오는 작업을 하게 될 경우 약간 원치않는 상태가 다음 전체화면캐시 갱신이 되기 전까지 유지되서....

    메인페이지를 전체화면 캐시를 포기하지는 못하겠고 비회원에게 가끔 발생될 상황이라 그냥 이대로 유지하고 있습니다.
  • profile profile
    날씨 정보를 html 소스에 포함시키지 말고 무조건 ajax로 불러오도록 하면 됩니다만, 그러려면 위젯을 많이 뜯어고쳐야겠지요. 매번 ajax 요청을 하게 되면 서버 부하에 영향을 줄 수도 있고요.
  • profile profile
    매번 요청하지는 않게 되어있어요. 캐시유지시간이 있어서 30분마다 혹은 위치를 바꾸거나 등의 이벤트가 있을때 합니다.

    위젯을 고칠 수는 없으니 그냥 조금 불편함은 감수해야겠네요. 전체화면 캐시는 포기못해요~