Динамическая страница / заменить контент и конфликт JQuery - PullRequest
Новая
       3

Динамическая страница / заменить контент и конфликт JQuery

1 голос
/ 29 декабря 2011

Я прочитал несколько постов на SO по схожим темам, но не смог разобрать и заставить мой код функционировать так, как я этого хочу.

Я создаю приложение, в котором содержимое страницы изменяется и заменяется динамически. Это ссылка на плагин, который я использовал (да, я пытался связаться с разработчиком, который запрограммировал скрипт, но безрезультатно). (css-tricks.com/dynamic-page-replacing-content)

Все работает так, как должно, пока я не попытаюсь реализовать отдельный jQuery внутри {div id = "guts"}. Например, я пытаюсь добавить этот скрипт, но он не активируется. На самом деле, никакой другой скрипт jQuery не будет работать в этом DIV. (digitalbush.com/projects/masked-input-plugin)

Кажется, что есть некоторый конфликт, особенно со сценарием hashchange. Я считаю, что это источник. Если я отключу скрипт хэш-обмена / динамической страницы, скрипт ввода с маской будет работать так, как должен.

Вот ссылка на приложение, над которым я работаю. Это при активированной смене хеша. И если вы щелкнете по пунктам меню, оно изменится, как и должно. Однако замаскированный ввод НЕ работает - и он должен быть активен в поле ввода «номер телефона». http://socialbungy.com/newsite/sweeps_temp_facebook/TAB_TEMP1/#enter.php

Если вы удалите хеш-метку в URL-адресе, страница загрузится, и замаскированный ввод в поле номера телефона теперь будет работать должным образом, однако функциональность динамической страницы исчезла. http://socialbungy.com/newsite/sweeps_temp_facebook/TAB_TEMP1/enter.php

Так что я знаю, что это проблема, я просто не могу понять, как предотвратить конфликт. Если вы посмотрите на исходный код страницы /#enter.php, вы заметите исходный код для /index.php, а не /enter.php. Думаю, это тоже фактор. Поэтому сценарий не запускается?

Если вам, ребята (и девчонки?), Нужен мой код, размещенный здесь, это будет много, я буду. Я подумал, что с ссылками было бы легче помочь, чтобы вы могли увидеть структуру.

Что я делаю не так? Кстати, страницы могут быть php, но там нет php-кода.

EDIT: Вот подозрительный плохой код. 

$(function() {
var reloadMask = function reloadMask() {
    $(document).ready(function() {
        $("#phone").mask("(999) 999-9999");
    });
}
var newHash      = "",
    $mainContent = $("#appContent"),
    $pageWrap    = $("#page-wrap"),
    baseHeight   = 0,
    $el;        
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();    
    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    }); 
    $("#buttonWrap").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });    
$(window).bind('hashchange', function(){    
    newHash = window.location.hash.substring(1);        
    if (newHash) {
        $mainContent
            .find("#guts")
            .slideToggle(500, function() {
                $mainContent.hide().load(newHash + " #guts", function() {
                    $mainContent.slideToggle(500, function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });
                    $("nav a").removeClass("current");
                    $("nav a[href="+newHash+"]").addClass("current");                       
                });
            });
    };        
});    
$(window).trigger('hashchange');
reloadMask();

});

Ответы [ 3 ]

0 голосов
/ 29 декабря 2011

Если входная маска - единственная вещь, которая не работает, попробуйте поместить только этот код в тот же файл, что и ваш pageloaderscript (я считаю, что это dynamicpage.js).Вы можете поместить его в любое место, если его нет в функции загрузчика страниц. 

var reloadMask = function reloadMask() {
    $(document).ready(function() {
        $("#phone").mask("(999) 999-9999");
    });
}

Далее добавьте 'reloadMask ();'в последней строке вашего скрипта, после' $ (window) .trigger ('hashchange'); '.

Удачи.

0 голосов
/ 06 января 2012

Я понял это !!Все еще глючит на некоторых скриптах, но это работает.Я добавил комментарии к части скрипта dynamicpage.js ниже.Введите новые скрипты там, и они будут перезапущены при загрузке контента. 

$(window).bind('hashchange', function(){    
    newHash = window.location.hash.substring(1);        
    if (newHash) {
        $mainContent
            .find("#guts")
            .slideToggle(500, function() {
                $mainContent.hide().load(newHash + " #guts", function() {
                    $mainContent.slideToggle(500, function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });
                    $("nav a").removeClass("current");
                    $("nav a[href="+newHash+"]").addClass("current");

                    //RE-FIRE OTHER SCRIPTS HERE

                });
            });
    };
0 голосов
/ 29 декабря 2011

Ваши функции jQuery, вероятно, не будут работать с некоторыми объектами, потому что эти конкретные объекты не были частью содержимого во время загрузки функций.

Попробуйте обернуть эти функции в другую функцию, чтобыэкземпляр: 

var reloadAllFunctions = function reload() {
 // all the important functions
}

И вызовите reloadAllFunctions () после выполнения вызова AJAX [.load ()].

...