Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trying to pur PHP is Javascript and I'm new to Javascript

    I downloaded a javascript file that works GREAT. It shows and hides div's in the code on demand. My problem is that in my code the divs in question are forms that are submitted. The handler for the forms is the same page. So the first time I visit the page all the sections are hidden. I expand a div, add some information and submit. Then the page refreshes and all divs are hidden again. I have to reexpand the div again to continue my work. Not a HUGE deal except when I have a ton of data entry to do.

    So I have a plan. I have created a table in the data base to hold a 1/0 value. I want the javascript that shows the sections to simply check the table. IE if the page is loaded, check the database to see which sections should be hidden and which should be visible.

    I THINK the place to add it is the fuction called "showhide" on line 53 but I'm not sure if that's correct nor do I have any idea how to make it accept the value from the database.

    Whew! I hope I made that clear. Below is the code for the javascript and the code of the webpage in question. Can anyone help?

    Code:
    //** Animated Collapsible DIV v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
    //** May 24th, 08'- Script rewritten and updated to 2.0.
    //** June 4th, 08'- Version 2.01: Bug fix to work with jquery 1.2.6 (which changed the way attr() behaves).
    //** March 5th, 09'- Version 2.2, which adds the following:
    			//1) ontoggle($, divobj, state) event that fires each time a DIV is expanded/collapsed, including when the page 1st loads
    			//2) Ability to expand a DIV via a URL parameter string, ie: index.htm?expanddiv=jason or index.htm?expanddiv=jason,kelly
    
    //** March 9th, 09'- Version 2.2.1: Optimized ontoggle event handler slightly.
    //** July 3rd, 09'- Version 2.4, which adds the following:
    			//1) You can now insert rel="expand[divid] | collapse[divid] | toggle[divid]" inside arbitrary links to act as DIV togglers
    			//2) For image toggler links, you can insert the attributes "data-openimage" and "data-closedimage" to update its image based on the DIV state
    
    var animatedcollapse={
    divholders: {}, //structure: {div.id, div.attrs, div.$divref, div.$togglerimage}
    divgroups: {}, //structure: {groupname.count, groupname.lastactivedivid}
    lastactiveingroup: {}, //structure: {lastactivediv.id}
    preloadimages: [],
    
    show:function(divids){ //public method
    	if (typeof divids=="object"){
    		for (var i=0; i<divids.length; i++)
    			this.showhide(divids[i], "show")
    	}
    	else
    		this.showhide(divids, "show")
    },
    
    hide:function(divids){ //public method
    	if (typeof divids=="object"){
    		for (var i=0; i<divids.length; i++)
    			this.showhide(divids[i], "hide")
    	}
    	else
    		this.showhide(divids, "hide")
    },
    
    toggle:function(divid){ //public method
    	if (typeof divid=="object")
    		divid=divid[0]
    	this.showhide(divid, "toggle")
    },
    
    addDiv:function(divid, attrstring){ //public function
    	this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring})
    	this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object
    		var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
    		return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found
    	}
    	this.currentid=divid //keep track of current div object being manipulated (in the event of chaining)
    	return this
    },
    
    showhide:function(divid, action){
    	var $divref=this.divholders[divid].$divref //reference collapsible DIV
    	if (this.divholders[divid] && $divref.length==1){ //if DIV exists
    		var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
    		if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
    			if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
    				this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
    				this.slideengine(divid, 'show')
    			targetgroup.lastactivedivid=divid //remember last active DIV
    		}
    		else{
    			this.slideengine(divid, action)
    		}
    	}
    },
    
    slideengine:function(divid, action){
    	var $divref=this.divholders[divid].$divref
    	var $togglerimage=this.divholders[divid].$togglerimage
    	if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
    		var animateSetting={height: action}
    		if ($divref.attr('fade'))
    			animateSetting.opacity=action
    		$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){
    			if ($togglerimage){
    				$togglerimage.attr('src', ($divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
    			}
    			if (animatedcollapse.ontoggle){
    				try{
    					animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display'))
    				}
    				catch(e){
    					alert("An error exists inside your \"ontoggle\" function:\n\n"+e+"\n\nAborting execution of function.")
    				}
    			}
    		})
    		return false
    	}
    },
    
    generatemap:function(){
    	var map={}
    	for (var i=0; i<arguments.length; i++){
    		if (arguments[i][1]!=null){ //do not generate name/value pair if value is null
    			map[arguments[i][0]]=arguments[i][1]
    		}
    	}
    	return map
    },
    
    init:function(){
    	var ac=this
    	jQuery(document).ready(function($){
    		animatedcollapse.ontoggle=animatedcollapse.ontoggle || null
    		var urlparamopenids=animatedcollapse.urlparamselect() //Get div ids that should be expanded based on the url (['div1','div2',etc])
    		var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc')
    		var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined
    		if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet)
    			persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids
    		groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted
    		jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object
    			this.$divref=$('#'+this.id)
    			if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){ //if this div carries a user "persist" setting, or belong to a group with at least one div that does
    				var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none'
    			}
    			else{
    				var cssdisplay=this.getAttr('hide')? 'none' : null
    			}
    			if (urlparamopenids[0]=="all" || jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains the single array element "all", or this div's ID
    				cssdisplay='block' //set div to "block", overriding any other setting
    			}
    			else if (urlparamopenids[0]=="none"){
    				cssdisplay='none' //set div to "none", overriding any other setting
    			}
    			this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))
    			this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')]))
    			if (this.getAttr('group')){ //if this DIV has the "group" attr defined
    				var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in
    				targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group
    				if (jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains this div's ID
    					targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded). Overrides other settings
    					targetgroup.overridepersist=1 //Indicate to override persisted div that would have been expanded
    				}
    				if (!targetgroup.lastactivedivid && this.$divref.css('display')!='none' || cssdisplay=="block" && typeof targetgroup.overridepersist=="undefined") //if this DIV was open by default or should be open due to persistence								
    					targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded)
    				this.$divref.css({display:'none'}) //hide any DIV that's part of said group for now
    			}
    		}) //end divholders.each
    		jQuery.each(ac.divgroups, function(){ //loop through each group
    			if (this.lastactivedivid && urlparamopenids[0]!="none") //show last "active" DIV within each group (one that should be expanded), unless url param="none"
    				ac.divholders[this.lastactivedivid].$divref.show()
    		})
    		if (animatedcollapse.ontoggle){
    			jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object and fire ontoggle event
    				animatedcollapse.ontoggle(jQuery, this.$divref.get(0), this.$divref.css('display'))
    			})
    		}
     		//Parse page for links containing rel attribute
    		var $allcontrols=$('a[rel]').filter('[rel^="collapse["], [rel^="expand["], [rel^="toggle["]') //get all elements on page with rel="collapse[]", "expand[]" and "toggle[]"
    		$allcontrols.each(function(){ //loop though each control link
    			this._divids=this.getAttribute('rel').replace(/(^\w+)|(\s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifier[div1,div2,etc]
    			if (this.getElementsByTagName('img').length==1 && ac.divholders[this._divids]){ //if control is an image link that toggles a single DIV (must be one to one to update status image)
    				animatedcollapse.preloadimage(this.getAttribute('data-openimage'), this.getAttribute('data-closedimage')) //preload control images (if defined)
    				$togglerimage=$(this).find('img').eq(0).data('srcs', {open:this.getAttribute('data-openimage'), closed:this.getAttribute('data-closedimage')}) //remember open and closed images' paths
    				ac.divholders[this._divids].$togglerimage=$(this).find('img').eq(0) //save reference to toggler image (to be updated inside slideengine()
    				ac.divholders[this._divids].$togglerimage.attr('src', (ac.divholders[this._divids].$divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
    			}
    			$(this).click(function(){ //assign click behavior to each control link
    				var relattr=this.getAttribute('rel')
    				var divids=(this._divids=="")? [] : this._divids.split(',') //convert 'div1,div2,etc' to array 
    				if (divids.length>0){
    					animatedcollapse[/expand/i.test(relattr)? 'show' : /collapse/i.test(relattr)? 'hide' : 'toggle'](divids) //call corresponding public function
    					return false
    				}
    			}) //end control.click
    		})// end control.each
    
    		$(window).bind('unload', function(){
    			ac.uninit()
    		})
    	}) //end doc.ready()
    },
    
    uninit:function(){
    	var opendivids='', groupswithpersist=''
    	jQuery.each(this.divholders, function(){
    		if (this.$divref.css('display')!='none'){
    			opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'
    		}
    		if (this.getAttr('group') && this.getAttr('persist'))
    			groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
    	})
    	opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')
    	groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')
    	this.setCookie('acopendivids', opendivids)
    	this.setCookie('acgroupswithpersist', groupswithpersist)
    },
    
    getCookie:function(Name){ 
    	var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair
    	if (document.cookie.match(re)) //if cookie found
    		return document.cookie.match(re)[0].split("=")[1] //return its value
    	return null
    },
    
    setCookie:function(name, value, days){
    	if (typeof days!="undefined"){ //if set persistent cookie
    		var expireDate = new Date()
    		expireDate.setDate(expireDate.getDate()+days)
    		document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
    	}
    	else //else if this is a session only cookie
    		document.cookie = name+"="+value+"; path=/"
    },
    
    urlparamselect:function(){
    	window.location.search.match(/expanddiv=([\w\-_,]+)/i) //search for expanddiv=divid or divid1,divid2,etc
    	return (RegExp.$1!="")? RegExp.$1.split(",") : []
    },
    
    preloadimage:function(){
    	var preloadimages=this.preloadimages
    	for (var i=0; i<arguments.length; i++){
    		if (arguments[i] && arguments[i].length>0){
    			preloadimages[preloadimages.length]=new Image()
    			preloadimages[preloadimages.length-1].src=arguments[i]
    		}
    	}
    }
    
    }
    And the code of the page in question:

    Code:
    <head>
    <title>Admininstration</title>
    <link rel="stylesheet" type="text/css" href="./css/epoch_styles.css" />
    
    <!-- Calendar Stuff -->
    <script type="text/javascript" src="./javascript/epoch_classes.js"></script>
    <script type="text/javascript">window.onload = function() {
        var calendar1 = new Epoch('interactiondate','popup',document.getElementById('calendar1_container'),false);
    	var calendar5 = new Epoch('expensedate','popup',document.getElementById('calendar5_container'),false);
    };
    </script>
    <!-- End Calendar Stuff-->
    
    <!--Section Collapse stuff -->
     <!DOCTYPE HTML>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
     <script type="text/javascript" src="./javascript/animatedcollapse.js"></script>
     <script type="text/javascript">
     
     animatedcollapse.addDiv('Clients', 'fade=1')
     animatedcollapse.addDiv('Interactions', 'fade=1')
     animatedcollapse.addDiv('Expenses', 'fade=1')
     
    
     animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
     	//$: Access to jQuery
     	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
     	//state: "block" or "none", depending on state
     }
     
     animatedcollapse.init()
    <!--End Section Collapse Stuff -->
    </script>
    
    
    </head>
    
    
    <a href="javascript:animatedcollapse.toggle('Clients')"><h1>Clients</h1></a> 
    
    <?
    echo'
    <div id="Clients" style="display:none">
    <table>
    	<tr>
    		<td valign="top">';
    			include ('./addclient.php');
    		echo'</td>
    		<td valign="top">';
    			include ('./displayclient.php');
    		echo'</td>
    	</tr>
    </table>
    </div>
    ';
    ?>
    
    <a href="javascript:animatedcollapse.toggle('Interactions')"><h1>Interactions</h1></a> 
    <?
    echo'
    <div id="Interactions" style="display:none">
    <table>
    	<tr>
    		<td valign="top">';
    			include ('./addinteractions.php');
    		echo'</td>
    		<td valign="top">';
    			include ('./displayinteractions.php');
    		echo'</td>
    	</tr>
    </table>
    </div>
    ';
    ?>
    
    <a href="javascript:animatedcollapse.toggle('Expenses')"><h1>Expenses</h1></a>
    <?
    echo'
    <div id="Expenses" style="display:none">
    <table>
    	<tr>
    		<td valign="top">';
    			include ('./addexpenses.php');
    		echo'</td>
    		<td valign="top">';
    			include ('./displayexpenses.php');
    		echo'</td>
    	</tr>
    </table>';
    mysql_close(); // Close the database connection
    ?>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,225
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    No, the place to do this would be part of the init() function.

    Have it *call* the showhide() function as appropriate.

    But other than that, you probably have the right idea. You could do it more simply if you only wanted one <div> to be opened up each time you return to the page, but if you might need several open then your concept makes sense.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Resolved this by using JQuery, which works with a lot less code and its sexier! JQuery is opening up a whole new world to me.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •