Advanced Search

Results 1 to 7 of 7

Thread: Show hide div from xml row id

  1. #1
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Show hide div from xml row id

    I have a div with an id of innerHTML that I have populated with {description} from my xml file that I am trying to show/hide. The problem that I am running into is that I can get the first one to close but the other six close the first because they do not recognize each as a new div id due to the xml repeat. I have read many different tutorials on how to do this with one or many seperate div id names through an array. I however can not find something to inlighten me on how to do this with the dataset repeat. Could someone please give me a hand. Here is a link to the page I am working with if it helps http://agiworldwide.ajsfullhouse.com/industry.cfm if you click on the Read More link you will see what I am trying to do.

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    There is some issues in your way of assigning the "id" value for different HTML elements. You have used the same kind of "id" again and again in the same page, which created the issue.

    I've made some changes for your page that are following:

    I have changed one of your existing function and added an event in your page

    Code:
    //Codex modified the function
    function effectSlide(targetElement, duration, from, to, toggle, obj){
    	Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
    	
    	if(obj && obj.innerHTML.toLowerCase() === 'read more'){
    			obj.innerHTML = 'Collase';
    	}else if(obj){
    			obj.innerHTML = 'Read More';
    	}
    }
    
    
    //Codex added the window's onload event.
    window.onload = function(){
    	effectSlide('innerHTML1', 1000, '100%', '0%', true);
    	effectSlide('innerHTML2', 1000, '100%', '0%', true);
    	effectSlide('innerHTML3', 1000, '100%', '0%', true);
    	effectSlide('innerHTML4', 1000, '100%', '0%', true);
    }
    Changed the following markup sections:

    (a) First section

    Code:
    <div id="read_more1">
    		              
    		              <a href="#" onclick="effectSlide('innerHTML1', 1000, '100%', '0%', true, this);">Read More</a>
    		          </div>
    		            <br class="clearfloat">
    		            </div>
    				        <br class="clearfloat">
    		          </div>
    			        <div id="innerHTML1">
    			          <div id="myInnerHTML1">
    As one of the primary industry focal points of AGI Worldwide, Inc. we
    have built substantial expertise and successful experiences with a wide
    range of Retail clients. Our approach to specialization within the
    retail industry creates an environment in which we maintain deep
    knowledge and capability within the domain. This allows us to offer our
    clients best in breed solutions second to none. </div></div>
    (b) Second section

    Code:
    <div id="read_more2">
    		              
    		              <a href="#" onclick="effectSlide('innerHTML2', 1000, '100%', '0%', true,this)">Read More</a>
    		          </div>
    <div id="innerHTML2">
    			          <div id="myInnerHTML2"> <p>This
    unique environment calls for Warehouse Management Solution to
    effectively handle both areas as well as the transition between them.</p>
    		<p>The
    capability to handle these unique requirements combined with the
    standard quality and efficiency features of the core WMS enable AGI to
    meet the diverse and challenging needs of manufactures at a value
    centric cost.</p>
    		<p><strong>Key Features:</strong></p>
    		 <ul>
    		 <li>Raw Materials and Finished goods classification and handling.</li>
    		 <li>Extensive Lot, Serial, Temperature, Hazmat, and other characteristic capabilities</li>
    		 <li>Transitional process for Raw Materials backfill and Finished goods creation.</li>
    		 <li>Drop Ship and Make To Order Processing</li>
    		 <li>Highly Flexible Allocation and Release options</li>
    		 <li>Wide
    Range of Pick Processes including pick to tote, pick to carton, case,
    pallet, multi Order, Summary, Bulk, Zone, and Priority</li>
    		 <li>UCC and ASN compliance</li>
    		 <li>Value Added Services Support</li>
    		 <li>Highly configurable QA inbound and outbound processes</li>
    		 </ul>
    </div></div>
    (c) Third section

    Code:
    <div id="read_more3">
    		              
    		              <a href="#" onclick="effectSlide('innerHTML3', 1000, '100%', '0%', true,this)">Read More</a>
    		          </div>
    <div id="innerHTML3">
    			          <div id="myInnerHTML3"> 
    		<p>AGI
    Worldwide has the background and expertise to maximize your investment
    and value in a technology solution and the industry know how to ensure </p>
    		<p>The
    AGI WMS with 3PL is the right solution for warehouse fulfillment
    operations and managing your distribution centers or multi-warehouses.
    Automated EDI, XML, and ASCII file options are available for
    communications to the outside world, as well as built-in automated
    email functions. There is a fully integrated Parcel Shipping option
    that allows for parcel shipping (UPS, FedEx, Airborne, USPS, LTL, etc.)
    and packing verification. The AGI WMS is 100% WEB based and allows web
    interface for your 3PL clients.</p>
    		<p><strong>Features:</strong></p>
    		<ul>
    			<li>Product Ownership by Customer</li>
    			<li>Multi Warehouse Management</li>
    			<li>Bin Locator Enhancements by Customer</li>
    			<li>Customer Preferences (Carriers, Reporting, Shared Data, Frequency)</li>
    			<li>Task Workflows based on Customer &amp; His Product's Requirement</li>
    			<li>Contract Billing that is robust.</li>
    			<li>Computations &amp; entry of manual tasks, automated tasks, &amp; storage.</li>
    			<li>EDI &amp; XML data transactions to/from customer &amp; his trading partners</li>
    			<li>Visibility of Customers Inventory, Inbound/Outbound Shipments.</li>
    			<li>Visibility of Customers Inventory to His Customer</li>
    			<li>Web based Order Entry System</li>
    			<li>Transportation Management System for Planning, Routing, Parcel, LTL, TL</li>
    			<li>Standard Interfaces to small to midsize ERP players</li>
    		</ul>
    		<p><strong>Accurate, Automated Customer Billing</strong><br>
    At the end of each billing period, storage and/or handling fees can be
    automatically calculated and presented to either your existing
    invoicing system, or our optional Invoicing Module. Either way, your
    customers are provided with detailed information about everything that
    has transpired with their inventory during the billing period. Weights
    handled, pallets received, storage space held, products shipped, items
    moved, and much more are all billable entities and can be calculated
    based on the rates you establish for each customer.</p>
    		<p><strong>Supply Chain Visibility</strong><br>
    The AGI WMS provides a real-time connection from the warehouse floor to
    your business host. From there, this information can be made available
    to your customers, suppliers, or anyone else in the supply chain
    through a variety of ways including XML, EDI, e-mail and/or fax
    communications. Furthermore, a standard internet connection can be used
    for a password protected viewing of inventory availability, order
    entry, order editing, and order status inquiries. In addition, you can
    administer various levels of client users to even allow certain client
    users to administer themselves - all via the web interface.</p>
    		  
    		</div></div>
    (d) Fourth section

    Code:
    <div id="read_more4">
    		              
    		              <a href="#" onclick="effectSlide('innerHTML4', 1000, '100%', '0%', true,this)">Read More</a>
    		          </div>
    <div id="innerHTML4">
    			          <div id="myInnerHTML4"> <p>Strict
    retail compliance is also a significant factor for apparel distributors
    and manufactures in the areas of appropriate labeling, ASN transmittal,
    and alignment with specified shipping windows common to this industry.</p>
    		<p>Combined
    with the typical requirements for order processing and picking speed,
    high quality accuracy of shipments, and flexibility for varying
    customer demands AGIís Warehouse Management Solution for Apparel
    delivers a perfect fit solution at a value centric cost.</p>
    		<p><strong>Key Features:</strong></p>
    		<ul>
    			<li>Wide range of SKU characteristics including Style, Size, Color, Cut, Lot, GOH, and Dimension</li>
    			<li>Demand Replenishment and Optimal Slotting</li>
    			<li>Drop Ship and Make To Order Processing</li>
    			<li>Highly Flexible Allocation and Release options</li>
    			<li>Wide Range of Pick Processes including pick to tote, pick to carton, pallet, multi Order, Summary, Bulk, Zone, and Priority</li>
    			<li>UCC and ASN compliance</li>
    			<li>Value Added Services Support</li>
    			<li>Highly configurable QA inbound and outbound processes</li>
    		</ul> 
    		</div></div>
    I hope you can find the changes I've made (highlighted ones) and if you make this much changes it will start to work as you want.

    hope this helps.

  3. The Following User Says Thank You to codeexploiter For This Useful Post:

    ajsfullhouse (08-28-2008)

  4. #3
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    That would work if I was using static information to populate the page I could use an something like what you have posted.

    But on my end it looks like this before the page loads.

    <div id="innerHTML">
    <div id="myInnerHTML">{description}</div>
    </div>

    which is the being pulled from a xml datasource that has the following filling the information on the page with a total of seven records.

    {picture}
    {name}
    {summary}
    and then {description}

    My issue is how to get the rowID from the data set to incorporate into the innerHTML div so that when you click on each Read More button it knows that I am working with that innerHTML{rowID} and opens the correct record. I have seen many different ways to do this with static information but I have not seen anyone say how this is possible with the use of XML.

    Thank you for the help codeexploiter I have change the code many times to try and get this to work but I can't figure it out.

  5. #4
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    What I am saying is you have some items like the following multiple times once your page loads

    Code:
    <div id="innerHTML">
    <div id="myInnerHTML">{description}</div>
    </div>
    I mean HTML elements with an already existing "id" value, which should not be there. Though your page will load fine but the code that works using the "id" of an HTML element will always get only one HTML element everytime. I hope what I've mentioned. You have to make the "id" value unique everytime you use it on different HTML elements.

    If you look at your XML you are getting the information through an AJAX call whose result is the information about different item. What you do is get that information into proper div/span elements in your case. If you look at the div/span elements in which you used to insert those data they have same "id" , different sections has the same "id" and that has to be changed.

  6. #5
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    But that is where I am running into the problem is how do I give eash div a different id

  7. #6
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Quote Originally Posted by ajsfullhouse View Post
    But that is where I am running into the problem is how do I give eash div a different id
    Why it is not possible. If your HTML element markup is statically developed then it is very simple like use a different "id" for each items.

    If it is dynamically generated using scripts then you have to use a logic through which you can have unique "id" value for each item.

    As I mentioned earlier even if you give incorrect markup the browser will display the page as if nothing happend. That doesn't mean that you page is technically correct, which is not. In case of JS execution it will start showing the errors one by one.

  8. #7
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    What was the solution provided to the above problem? I'm having a similar issue where I have XSLT generating a table from a long list of products in a XML file which I want a DIVs to appear in the middle of the page which are generated from each of the XML products.

    I can generate one popup but the others won't appear on click, only the first shows up for each of the links. I know it has to do with the way the DIV is called out, but I'm not sure how to make it work with XSL and XML.

Bookmarks

Posting Permissions

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