views:

236

answers:

2

I have this jquery functions below in external file. So after partial postback jquery is not working. I need to load jquery from server side on partial postback.

can someone show me what I need to call in this code and how to load jquery

jQuery(function ($) { var userAgent = navigator.userAgent.toLowerCase(); var browserVersion = (userAgent.match(/.+(?:rv|webkit|khtml|opera|msie)[\/: ]([\d.]+)/) || [0, '0'])[1]; var isIE6 = (/msie/.test(userAgent) && !/opera/.test(userAgent) && parseInt(browserVersion) < 7 && (!window.XMLHttpRequest || typeof (XMLHttpRequest) === 'function')); var body = $('body'); var currentSettings; var callingSettings; var shouldResize = false; var gallery = {}; var fixFF = false; var contentElt; var contentEltLast; var modal = { started: false, ready: false, dataReady: false, anim: false, animContent: false, loadingShown: false, transition: false, resizing: false, closing: false, error: false, blocker: null, blockerVars: null, full: null, bg: null, loading: null, tmp: null, content: null, wrapper: null, contentWrapper: null, scripts: new Array(), scriptsShown: new Array() }; var resized = { width: false, height: false, windowResizing: false }; var initSettingsSize = { width: null, height: null, windowResizing: true }; var windowResizeTimeout; $.fn.nyroModal = function (settings) { if (!this) return false; return this.each(function () { var me = $(this); if (this.nodeName.toLowerCase() == 'form') { me.unbind('submit.nyroModal').bind('submit.nyroModal', function (e) { if (e.isDefaultPrevented()) return false; if (me.data('nyroModalprocessing')) return true; if (this.enctype == 'multipart/form-data') { processModal($.extend(settings, { from: this })); return true } e.preventDefault(); processModal($.extend(settings, { from: this })); return false }) } else { me.unbind('click.nyroModal').bind('click.nyroModal', function (e) { if (e.isDefaultPrevented()) return false; e.preventDefault(); processModal($.extend(settings, { from: this })); return false }) } }) }; $.fn.nyroModalManual = function (settings) { if (!this.length) processModal(settings); return this.each(function () { processModal($.extend(settings, { from: this })) }) }; $.nyroModalManual = function (settings) { processModal(settings) }; $.nyroModalSettings = function (settings, deep1, deep2) { setCurrentSettings(settings, deep1, deep2); if (!deep1 && modal.started) { if (modal.bg && settings.bgColor) currentSettings.updateBgColor(modal, currentSettings, function () { }); if (modal.contentWrapper && settings.title) setTitle(); if (!modal.error && (settings.windowResizing || (!modal.resizing && (('width' in settings && settings.width == currentSettings.width) || ('height' in settings && settings.height == currentSettings.height))))) { modal.resizing = true; if (modal.contentWrapper) calculateSize(true); if (modal.contentWrapper && modal.contentWrapper.is(':visible') && !modal.animContent) { if (fixFF) modal.content.css({ position: '' }); currentSettings.resize(modal, currentSettings, function () { currentSettings.windowResizing = false; modal.resizing = false; if (fixFF) modal.content.css({ position: 'fixed' }); if ($.isFunction(currentSettings.endResize)) currentSettings.endResize(modal, currentSettings) }) } } } }; $.nyroModalRemove = function () { removeModal() }; $.nyroModalNext = function () { var link = getGalleryLink(1); if (link) return link.nyroModalManual(getCurrentSettingsNew()); return false }; $.nyroModalPrev = function () { var link = getGalleryLink(-1); if (link) return link.nyroModalManual(getCurrentSettingsNew()); return false }; $.fn.nyroModal.settings = { debug: false, blocker: false, windowResize: true, modal: false, type: '', forceType: null, from: '', hash: '', processHandler: null, selIndicator: 'nyroModalSel', formIndicator: 'nyroModal', content: null, bgColor: '#000000', ajax: {}, swf: { wmode: 'transparent' }, width: null, height: null, minWidth: 400, minHeight: 300, resizable: true, autoSizable: true, padding: 25, regexImg: '[^\.]\.(jpg|jpeg|png|tiff|gif|bmp)\s*$', addImageDivTitle: false, defaultImgAlt: 'Image', setWidthImgTitle: true, ltr: true, gallery: null, galleryLinks: '<a href="#" class="nyroModalPrev">Prev</a><a href="#"  class="nyroModalNext">Next</a>', galleryCounts: galleryCounts, galleryLoop: false, zIndexStart: 100, cssOpt: { bg: { position: 'absolute', overflow: 'hidden', top: 0, left: 0, height: '100%', width: '100%' }, wrapper: { position: 'absolute', top: '50%', left: '50%' }, wrapper2: {}, content: {}, loading: { position: 'absolute', top: '50%', left: '50%', marginTop: '-50px', marginLeft: '-50px'} }, wrap: { div: '<div class="wrapper"></div>', ajax: '<div class="wrapper"></div>', form: '<div class="wrapper"></div>', formData: '<div class="wrapper"></div>', image: '<div class="wrapperImg"></div>', swf: '<div class="wrapperSwf"></div>', iframe: '<div class="wrapperIframe"></div>', iframeForm: '<div class="wrapperIframe"></div>', manual: '<div class="wrapper"></div>' }, closeButton: '<a href="#" class="nyroModalClose" id="closeBut" title="close">Close</a>', title: null, titleFromIframe: true, openSelector: '.nyroModal', closeSelector: '.nyroModalClose', contentLoading: '<a href="#" class="nyroModalClose">Cancel</a>', errorClass: 'error', contentError: 'The requested content cannot be loaded.<br />Please try again later.<br /><a href="#" class="nyroModalClose">Close</a>', handleError: null, showBackground: showBackground, hideBackground: hideBackground, endFillContent: null, showContent: showContent, endShowContent: null, beforeHideContent: null, hideContent: hideContent, showTransition: showTransition, hideTransition: hideTransition, showLoading: showLoading, hideLoading: hideLoading, resize: resize, endResize: null, updateBgColor: updateBgColor, endRemove: null }; function processModal(settings) { if (modal.loadingShown || modal.transition || modal.anim) return; debug('processModal'); modal.started = true; callingSettings = $.extend(true, settings); setDefaultCurrentSettings(settings); if (!modal.full) modal.blockerVars = modal.blocker = null; modal.error = false; modal.closing = false; modal.dataReady = false; modal.scripts = new Array(); modal.scriptsShown = new Array(); currentSettings.type = fileType(); if (currentSettings.forceType) { if (!currentSettings.content) currentSettings.from = true; currentSettings.type = currentSettings.forceType; currentSettings.forceType = null } if ($.isFunction(currentSettings.processHandler)) currentSettings.processHandler(currentSettings); var from = currentSettings.from; var url = currentSettings.url; initSettingsSize.width = currentSettings.width; initSettingsSize.height = currentSettings.height; if (currentSettings.type == 'swf') { setCurrentSettings({ overflow: 'visible' }, 'cssOpt', 'content'); currentSettings.content = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="' + currentSettings.width + '" height="' + currentSettings.height + '"><param name="movie" value="' + url + '"></param>'; var tmp = ''; $.each(currentSettings.swf, function (name, val) { currentSettings.content += '<param name="' + name + '" value="' + val + '"></param>'; tmp += ' ' + name + '="' + val + '"' }); currentSettings.content += '<embed src="' + url + '" type="application/x-shockwave-flash" width="' + currentSettings.width + '" height="' + currentSettings.height + '"' + tmp + '></embed></object>' } if (from) { var jFrom = $(from).blur(); if (currentSettings.type == 'form') { var data = $(from).serializeArray(); data.push({ name: currentSettings.formIndicator, value: 1 }); if (currentSettings.selector) data.push({ name: currentSettings.selIndicator, value: currentSettings.selector.substring(1) }); showModal(); $.ajax($.extend({}, currentSettings.ajax, { url: url, data: data, type: jFrom.attr('method') ? jFrom.attr('method') : 'get', success: ajaxLoaded, error: loadingError })); debug('Form Ajax Load: ' + jFrom.attr('action')) } else if (currentSettings.type == 'formData') { initModal(); jFrom.attr('target', 'nyroModalIframe'); jFrom.attr('action', url); jFrom.prepend('<input type="hidden" name="' + currentSettings.formIndicator + '" value="1" />'); if (currentSettings.selector) jFrom.prepend('<input type="hidden" name="' + currentSettings.selIndicator + '" value="' + currentSettings.selector.substring(1) + '" />'); modal.tmp.html('<iframe frameborder="0" hspace="0" name="nyroModalIframe" src="javascript:\'\';"></iframe>'); $('iframe', modal.tmp).css({ width: currentSettings.width, height: currentSettings.height }).error(loadingError).load(formDataLoaded); debug('Form Data Load: ' + jFrom.attr('action')); showModal(); showContentOrLoading() } else if (currentSettings.type == 'image') { debug('Image Load: ' + url); var title = jFrom.attr('title') || currentSettings.defaultImgAlt; initModal(); modal.tmp.html('<img id="nyroModalImg" />').find('img').attr('alt', title); modal.tmp.css({ lineHeight: 0 }); $('img', modal.tmp).error(loadingError).load(function () { debug('Image Loaded: ' + this.src); $(this).unbind('load'); var w = modal.tmp.width(); var h = modal.tmp.height(); modal.tmp.css({ lineHeight: '' }); resized.width = w; resized.height = h; setCurrentSettings({ width: w, height: h, imgWidth: w, imgHeight: h }); initSettingsSize.width = w; initSettingsSize.height = h; setCurrentSettings({ overflow: 'visible' }, 'cssOpt', 'content'); modal.dataReady = true; if (modal.loadingShown || modal.transition) showContentOrLoading() }).attr('src', url); showModal() } else if (currentSettings.type == 'iframeForm') { initModal(); modal.tmp.html('<iframe frameborder="0" hspace="0" src="javascript:\'\';" name="nyroModalIframe" id="nyroModalIframe"></iframe>'); debug('Iframe Form Load: ' + url); $('iframe', modal.tmp).eq(0).css({ width: '100%', height: $.support.boxModel ? '99%' : '100%' }).load(iframeLoaded); modal.dataReady = true; showModal() } else if (currentSettings.type == 'iframe') { initModal(); modal.tmp.html('<iframe frameborder="0" hspace="0" src="javascript:\'\';" name="nyroModalIframe" id="nyroModalIframe"></iframe>'); debug('Iframe Load: ' + url); $('iframe', modal.tmp).eq(0).css({ width: '100%', height: $.support.boxModel ? '99%' : '100%' }).load(iframeLoaded); modal.dataReady = true; showModal() } else if (currentSettings.type) { debug('Content: ' + currentSettings.type); initModal(); modal.tmp.html(currentSettings.content); var w = modal.tmp.width(); var h = modal.tmp.height(); var div = $(currentSettings.type); if (div.length) { setCurrentSettings({ type: 'div' }); w = div.width(); h = div.height(); if (contentElt) contentEltLast = contentElt; contentElt = div; modal.tmp.append(div.contents()) } initSettingsSize.width = w; initSettingsSize.height = h; setCurrentSettings({ width: w, height: h }); if (modal.tmp.html()) modal.dataReady = true; else loadingError(); if (!modal.ready) showModal(); else endHideContent() } else { debug('Ajax Load: ' + url); setCurrentSettings({ type: 'ajax' }); var data = currentSettings.ajax.data || {}; if (currentSettings.selector) { if (typeof data == "string") { data += '&' + currentSettings.selIndicator + '=' + currentSettings.selector.substring(1) } else { data[currentSettings.selIndicator] = currentSettings.selector.substring(1) } } showModal(); $.ajax($.extend(true, currentSettings.ajax, { url: url, success: ajaxLoaded, error: loadingError, data: data })) } } else if (currentSettings.content) { debug('Content: ' + currentSettings.type); setCurrentSettings({ type: 'manual' }); initModal(); modal.tmp.html($('<div/>').html(currentSettings.content).contents()); if (modal.tmp.html()) modal.dataReady = true; else loadingError(); showModal() } else { } } function setDefaultCurrentSettings(settings) { debug('setDefaultCurrentSettings'); currentSettings = $.extend(true, {}, $.fn.nyroModal.settings, settings); setMargin() } function setCurrentSettings(settings, deep1, deep2) { if (modal.started) { if (deep1 && deep2) { $.extend(true, currentSettings[deep1][deep2], settings) } else if (deep1) { $.extend(true, currentSettings[deep1], settings) } else { if (modal.animContent) { if ('width' in settings) { if (!modal.resizing) { settings.setWidth = settings.width; shouldResize = true } delete settings['width'] } if ('height' in settings) { if (!modal.resizing) { settings.setHeight = settings.height; shouldResize = true } delete settings['height'] } } $.extend(true, currentSettings, settings) } } else { if (deep1 && deep2) { $.extend(true, $.fn.nyroModal.settings[deep1][deep2], settings) } else if (deep1) { $.extend(true, $.fn.nyroModal.settings[deep1], settings) } else { $.extend(true, $.fn.nyroModal.settings, settings) } } } function setMarginScroll() { if (isIE6 && !modal.blocker) { if (document.documentElement) { currentSettings.marginScrollLeft = document.documentElement.scrollLeft; currentSettings.marginScrollTop = document.documentElement.scrollTop } else { currentSettings.marginScrollLeft = document.body.scrollLeft; currentSettings.marginScrollTop = document.body.scrollTop } } else { currentSettings.marginScrollLeft = 0; currentSettings.marginScrollTop = 0 } } function setMargin() { setMarginScroll(); currentSettings.marginLeft = -(currentSettings.width + currentSettings.borderW) / 2; currentSettings.marginTop = -(currentSettings.height + currentSettings.borderH) / 2; if (!modal.blocker) { currentSettings.marginLeft += currentSettings.marginScrollLeft; currentSettings.marginTop += currentSettings.marginScrollTop } } function setMarginLoading() { setMarginScroll(); var outer = getOuter(modal.loading); currentSettings.marginTopLoading = -(modal.loading.height() + outer.h.border + outer.h.padding) / 2; currentSettings.marginLeftLoading = -(modal.loading.width() + outer.w.border + outer.w.padding) / 2; if (!modal.blocker) { currentSettings.marginLeftLoading += currentSettings.marginScrollLeft; currentSettings.marginTopLoading += currentSettings.marginScrollTop } } function setTitle() { var title = $('h1#nyroModalTitle', modal.contentWrapper); if (title.length) title.text(currentSettings.title); else modal.contentWrapper.prepend('<h1 id="nyroModalTitle">' + currentSettings.title + '</h1>') } function initModal() { debug('initModal'); if (!modal.full) { if (currentSettings.debug) setCurrentSettings({ color: 'white' }, 'cssOpt', 'bg'); var full = { zIndex: currentSettings.zIndexStart, position: 'fixed', top: 0, left: 0, width: '100%', height: '100%' }; var contain = body; var iframeHideIE = ''; if (currentSettings.blocker) { modal.blocker = contain = $(currentSettings.blocker); var pos = modal.blocker.offset(); var w = modal.blocker.outerWidth(); var h = modal.blocker.outerHeight(); if (isIE6) { setCurrentSettings({ height: '100%', width: '100%', top: 0, left: 0 }, 'cssOpt', 'bg') } modal.blockerVars = { top: pos.top, left: pos.left, width: w, height: h }; var plusTop = (/msie/.test(userAgent) ? 0 : getCurCSS(body.get(0), 'borderTopWidth')); var plusLeft = (/msie/.test(userAgent) ? 0 : getCurCSS(body.get(0), 'borderLeftWidth')); full = { position: 'absolute', top: pos.top + plusTop, left: pos.left + plusLeft, width: w, height: h} } else if (isIE6) { body.css({ marginLeft: 0, marginRight: 0 }); var w = body.width(); var h = $(window).height() + 'px'; if ($(window).height() >= body.outerHeight()) { h = body.outerHeight() + 'px' } else w += 20; w += 'px'; body.css({ width: w, height: h, position: 'static', overflow: 'hidden' }); $('html').css({ overflow: 'hidden' }); setCurrentSettings({ cssOpt: { bg: { position: 'absolute', zIndex: currentSettings.zIndexStart + 1, height: '110%', width: '110%', top: currentSettings.marginScrollTop + 'px', left: currentSettings.marginScrollLeft + 'px' }, wrapper: { zIndex: currentSettings.zIndexStart + 2 }, loading: { zIndex: currentSettings.zIndexStart + 3}} }); iframeHideIE = $('<iframe id="nyroModalIframeHideIe" src="javascript:\'\';"></iframe>').css($.extend({}, currentSettings.cssOpt.bg, { opacity: 0, zIndex: 50, border: 'none' })) } contain.append($('<div id="nyroModalFull"><div id="nyroModalBg"></div><div id="nyroModalWrapper"><div id="nyroModalContent"></div></div><div id="nyrModalTmp"></div><div id="nyroModalLoading"></div></div>').hide()); modal.full = $('#nyroModalFull').css(full).show(); modal.bg = $('#nyroModalBg').css($.extend({ backgroundColor: currentSettings.bgColor }, currentSettings.cssOpt.bg)).before(iframeHideIE); modal.bg.bind('click.nyroModal', clickBg); modal.loading = $('#nyroModalLoading').css(currentSettings.cssOpt.loading).hide(); modal.contentWrapper = $('#nyroModalWrapper').css(currentSettings.cssOpt.wrapper).hide(); modal.content = $('#nyroModalContent'); modal.tmp = $('#nyrModalTmp').hide(); if ($.isFunction($.fn.mousewheel)) { modal.content.mousewheel(function (e, d) { var elt = modal.content.get(0); if ((d > 0 && elt.scrollTop == 0) || (d < 0 && elt.scrollHeight - elt.scrollTop == elt.clientHeight)) { e.preventDefault(); e.stopPropagation() } }) } $(document).bind('keydown.nyroModal', keyHandler); modal.content.css({ width: 'auto', height: 'auto' }); modal.contentWrapper.css({ width: 'auto', height: 'auto' }); if (!currentSettings.blocker && currentSettings.windowResize) { $(window).bind('resize.nyroModal', function () { window.clearTimeout(windowResizeTimeout); windowResizeTimeout = window.setTimeout(windowResizeHandler, 200) }) } } } function windowResizeHandler() { $.nyroModalSettings(initSettingsSize) } function showModal() { debug('showModal'); if (!modal.ready) { initModal(); modal.anim = true; currentSettings.showBackground(modal, currentSettings, endBackground) } else { modal.anim = true; modal.transition = true; currentSettings.showTransition(modal, currentSettings, function () { endHideContent(); modal.anim = false; showContentOrLoading() }) } } function clickBg(e) { if (!currentSettings.modal) removeModal() } function keyHandler(e) { if (e.keyCode == 27) { if (!currentSettings.modal) removeModal() } else if (currentSettings.gallery && modal.ready && modal.dataReady && !modal.anim && !modal.transition) { if (e.keyCode == 39 || e.keyCode == 40) { e.preventDefault(); $.nyroModalNext(); return false } else if (e.keyCode == 37 || e.keyCode == 38) {   }
A: 

If you want to execute some javascript after partial postback, you can follow either of these methods:

  • Assuming you have a in your page you can include a function called pageLoad()

    <script type="text/javascript" language="javascript">
    function pageLoad()
    {
    // JS to execute during full and partial postbacks
    }
    </script>

  • Or check out this link that explains about executing javascript during partial postbacks

http://csharperimage.jeremylikness.com/2009/06/inject-dynamic-javascript-into-aspnet.html

  • Another way is to use the Sys.Application.add_init handler as given below:

    <script type="text/javascript" language="javascript">
    Sys.Application.add_init(appl_init);

    function appl_init() {
    var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
    pgRegMgr.add_beginRequest(StartHandler);
    pgRegMgr.add_endRequest(EndHandler);
    }

    function StartHandler() {
    // your js
    }

    function EndHandler() {
    // your js
    }

    </script>

Hope this helps!

Karthik
A: 

To call this function after partial postback, what u need to do is re-register external js file. The following code does this.

private void RegisterClientStartupScript()
{
    string path = Page.ResolveUrl("~/Script/slider.js");
    ScriptManager sManager = ScriptManager.GetCurrent(this.Page);
    if (sManager != null && sManager.IsInAsyncPostBack)
    {            
        ScriptManager.RegisterClientScriptInclude(
           this.updSpeech, typeof(string),"include-js",
           path); 
         ScriptManager.RegisterStartupScript(this.updSpeech, this.updSpeech.GetType(), "SliderScript",
            "FunctionName();", true); 

    }
    else
    {
        this.Page.ClientScript.RegisterClientScriptInclude("SliderScript", path);
    }
}    

Call this function on every page load i.e outside (!isPostback). This code gets reference to external js file and in case it is a partial postback,it registers it with the scriptmanager. In case it is a normal postback it registers it with clientScript.

EDIT

Try giving the jquery function a name and then call ScriptManager.RegisterStartupScript().see the above code and replace FunctionName() with the name of ur jquery function. In the above code this.updSpeech is the updatepanel.

Rohit
On page load this code works, after partial postback stop working
Gambler