ajax + froalra (js 로드문제)

ajax + froalra (js 로드문제)

QA

ajax + froalra (js 로드문제)

본문



(function() {
    var isLoading = false;
    var currentUrl = window.location.pathname;
    var sidebarLoaded = false;
    var sidebarCache = null;

    if (typeof window.input === 'undefined') {
        window.input = {};
    }

    function loadContent(url, isPopState) {
        if (isLoading || currentUrl === url) return;

        isLoading = true;
        currentUrl = url;

        $.ajax({
            url: url,
            type: 'GET',
            cache: true,
            success: function(response) {
                var $html = $('<div>').html(response);
                var $newContent = $html.find('#content');

                if ($newContent.length) {
                    $('#content').html($newContent.html());

                    $html.find('script').each(function() {
                        var scriptSrc = $(this).attr('src');
                        if (scriptSrc && scriptSrc.indexOf('<') === -1) {
                            if (!$('script[src="' + scriptSrc + '"]').length) {
                                $.getScript(scriptSrc).done(function() {
                                    checkAndInitializeFroalaEditor();
                                }).fail(function(jqxhr, settings, exception) {
                                    console.log('Failed to load ' + scriptSrc);
                                });
                            }
                        } else {
                            var scriptContent = $(this).text();
                            if (scriptContent && scriptContent.indexOf('<') === -1) {
                                $.globalEval(scriptContent);
                            }
                        }
                    });

                    initializeContent();

                    if (!sidebarLoaded) {
                        reloadSidebar();
                    }
                } else {
                    $('#content').html('<p>해당 콘텐츠가 존재하지 않습니다.</p>');
                }
            },
            error: function(xhr, status, error) {
                $('#content').html('<p>콘텐츠를 불러오는 중 오류가 발생했습니다.</p>');
            },
            complete: function() {
                isLoading = false;
            }
        });

        if (!isPopState) {
            window.history.pushState(null, '', url);
        }
    }

    function reloadSidebar() {
        if ($('#sidebar').length) {
            if (sidebarCache) {
                $('#sidebar').html(sidebarCache);
            } else {
                $('#sidebar').load(location.href + ' #sidebar > *', function() {
                    sidebarCache = $('#sidebar').html();
                    sidebarLoaded = true;
                });
            }
        }
    }

    function initializeContent() {
        if (typeof viewImageResize === 'function') {
            viewImageResize();
        }

        if (typeof initializeTheme === 'function') {
            initializeTheme();
        }

        $(document).off('click', 'a.ajax-link').on('click', 'a.ajax-link', function(e) {
            e.preventDefault();
            var url = $(this).attr('href');
            sidebarLoaded = false;
            loadContent(url, false);
        });
    }

    function checkAndInitializeFroalaEditor() {
        if (typeof FroalaEditor !== "undefined" && $('#wr_content').length > 0) {
            initializeFroalaEditor();
        } else {
            // 500ms 후 다시 체크
            setTimeout(checkAndInitializeFroalaEditor, 500);
        }
    }

    function initializeFroalaEditor() {
        if (typeof FroalaEditor !== "undefined" && $('#wr_content').length > 0) {
            new FroalaEditor('#wr_content', {
                language: 'ko',
                heightMin: 300,
            });
        } else {
            console.error("FroalaEditor is not defined or element not found.");
        }
    }

    function loadFroalaEditorScripts() {
        // FroalaEditor CSS
        var froalaCssPath = '/plugin/editor/froala_editor_4.2.0/css/froala_editor.pkgd.css';
        if (!$('link[href="' + froalaCssPath + '"]').length) {
            $('<link>', {
                rel: 'stylesheet',
                type: 'text/css',
                href: froalaCssPath
            }).appendTo('head');
        }

        // Froala custom CSS
        var froalaCustomCssPath = '/plugin/editor/froala_editor_4.2.0/css/sir_custom.css';
        if (!$('link[href="' + froalaCustomCssPath + '"]').length) {
            $('<link>', {
                rel: 'stylesheet',
                type: 'text/css',
                href: froalaCustomCssPath
            }).appendTo('head');
        }

        // FroalaEditor JS
        var froalaJsPath = '/plugin/editor/froala_editor_4.2.0/js/froala_editor.pkgd.min.js';
        if (!$('script[src="' + froalaJsPath + '"]').length) {
            $.getScript(froalaJsPath)
                .done(function() {
                    // FroalaEditor 스크립트가 로드된 후 초기화
                    window.addEventListener('DOMContentLoaded', checkAndInitializeFroalaEditor);
                    window.addEventListener('load', checkAndInitializeFroalaEditor);
                })
                .fail(function() {
                    console.error("Failed to load FroalaEditor script.");
                });
        } else {
            // FroalaEditor 스크립트가 이미 로드된 경우
            window.addEventListener('DOMContentLoaded', checkAndInitializeFroalaEditor);
            window.addEventListener('load', checkAndInitializeFroalaEditor);
        }
    }

    $(document).ready(function() {
        loadContent(window.location.pathname, true);
        initializeContent();
        loadFroalaEditorScripts();

        $(window).on('popstate', function() {
            loadContent(location.pathname, true);
        });
    });
})();


 

https://graycode.io/

test / 1234

 

디자인소스 > 게시물을 클릭하면 댓글 에디터가 비정상 적으로 나오는 ㅜㅜ

ajax로 전체 페이지를 그냥 불러오는 방식인데 새로고침이나 직접 주소로 들어가면 오류가 없는데 이게 무슨 조화일까요 ㅜㅜ

아마도 js파일을 제대로 호출을 못해서 그런것 같은데 고수님들의 따끔한 조언을 부탁드립니다 ㅜ

 

진짜 ajax도 아니고 통째로 그냥 불러오는 방식인데도 쉽지가 않네요 ㅜㅜ

이 질문에 댓글 쓰기 :

답변 5

데이터를 로드 할 때 키 라이선스를 인식하지 못해서 발생하는 문제입니다.

 

키 값을 재로드 하지 마시고, 상단에 배치 하세요 

 

그러니깐 다시 표현해서 script 자체를 재 로드 하지마시라는 뜻입니다.

 

"프로알라 사용자 + 댓글 에디터 + ajax 댓글 사용자입니다."

 

view.comment.skin.php 파일 상단에 로드 파일을 작성하시면 해결 될껍니다.

 

978180634_1724030126.5541.gif​​​​​​

 

 

https://graycode.io/cm_free/1 댓글 잘나오는데요?

thumb-3068548739_1724028639.4489_730x177.png

원래는 이런 모양입니다. 새로고침을 하면 아마 정상으로 나올거예요ㄷㄷㄷ

내용이 그런 내용입니다 ajax로 링크를 해서 들어간 상태라 이런 문제가 있다는 이야기 입니다 ㅡㅜ

답변을 작성하시기 전에 로그인 해주세요.
전체 61,330
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT