Making Ajax Side Panel refresh parent page when panel is closed.

[Jvloomin]

Script Title: Ajax Side Panel

Script URL (on DD): http://www.dynamicdrive.com/dynamici...xsidepanel.htm

Hi, I'm really new to java script so have no idea what I'm doing so sorry if I sound really stupid. I managed to get the script to work, and I have a page that is editable using php, and when you click on the edit button the ajax side panel is activated and contains the editing form.

After user clicks submit the form does its thing and the panel stays open, I was just wondering how do I get the parent page to reload when the side panel is closed?

I found some things like this:

window.top.location.href=theLocation;
window.parent.location.href=theLocation;
window.top.location.replace(theLocation);

only problem is I don't know where to put it..please help

[jscheuer1]

Well, the close button isn't on the page inside the iframe, so you don't need any parent or top stuff. Using a text only editor like NotePad, find this inside the ddajaxsidepanel.js file and add the highlighted:

	showhidepanel:function(url, action, type){
		var $ = jQuery, setting = this.setting
		var panelstate =  this.$panelref.data('state')
		var winwidth = $(window).width(), panelwidth = this.$panelref.outerWidth()
		if (panelwidth < parseInt(setting.openamount_minthreshold))
			return true
		if (setting.openamount_maxwidth && setting.openamount_maxwidth > setting.openamount_minthreshold)
			panelwidth = Math.min(panelwidth, parseInt(setting.openamount_maxwidth))
		if (action =="show" && panelstate == "open")
			this.$panelref.animate({left: '+=50'}, function(){
				ddajaxsidepanel.loadcontent(null)
			})
		var finalcss = (action=="show")? {left: winwidth-panelwidth, opacity: 1} : {left: winwidth, opacity: 0}
		this.$panelref.animate(finalcss, setting.fx.dur, (this.$panelref.data('state')=='open')? 'easeOutBack' : setting.fx.easing, function(){
			ddajaxsidepanel.loadcontent(url, type)
		})
		if(action === 'hide'){widow.location.reload();}
		return false
	},

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[Jvloomin]

Well, the close button isn't on the page inside the iframe, so you don't need any parent or top stuff. Using a text only editor like NotePad, find this inside the ddajaxsidepanel.js file and add the highlighted:


if(action === 'hide'){widow.location.reload();}
return false
},

[/CODE]

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Thank you that worked, apart from now if I click anywhere on the page it refreshes, is there anyway to make it only refresh once after the the iframe is hidden?

Unfortunately site isn't online right now so I can't send you a link.

[jscheuer1]

OK, actually that shouldn't have worked. I misspelled window as widow. Maybe you fixed that when you edited the file. Try this:

	ddajaxsidepanel.showhidepanel=function(url, action, type){
		var $ = jQuery, setting = this.setting
		var panelstate =  this.$panelref.data('state')
		var winwidth = $(window).width(), panelwidth = this.$panelref.outerWidth()
		if (panelwidth < parseInt(setting.openamount_minthreshold))
			return true
		if (setting.openamount_maxwidth && setting.openamount_maxwidth > setting.openamount_minthreshold)
			panelwidth = Math.min(panelwidth, parseInt(setting.openamount_maxwidth))
		if (action =="show" && panelstate == "open")
			this.$panelref.animate({left: '+=50'}, function(){
				ddajaxsidepanel.loadcontent(null)
			})
		var finalcss = (action=="show")? {left: winwidth-panelwidth, opacity: 1} : {left: winwidth, opacity: 0}
		this.$panelref.animate(finalcss, setting.fx.dur, (this.$panelref.data('state')=='open')? 'easeOutBack' : setting.fx.easing, function(){
			ddajaxsidepanel.loadcontent(url, type)
		})
		if(action === 'hide' && panelstate === 'open'){window.location.reload();}
		return false
	},

It will still reload on a click to the document, but only if the panel is open, which would close the panel anyway.

[Jvloomin]

Perfect that was just what I was after, thank you very much for your help!