Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How do you take a "hard coded" jquery function and turn it "dynamic"

Posted on 2013-12-13
3
Medium Priority
?
193 Views
Last Modified: 2013-12-13
Hi,

I have a "hard coded" function that works great but I need it to work dynamically since it is dependent on records in a database.

This is what I have so far (thanks to Alexcode) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    $("#toggle_all_dates").on('click', function () {
        var $this = $(this);
        
        if($this.hasClass('showAll')){
            $('#dates_list li div.moredates')
                .not(':visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
        }else{
            $('#dates_list li div.moredates:visible')
                .prev()
                .each(function(idx,item){ toggleDate(item); });
        }
        
        $this.toggleClass('showAll');
        $(this).html($(this).text() == 'Hide all dates' ? 'Show all dates' : 'Hide all dates');
    });    
    
    $("#dates_list li a").on('click', function () {
        toggleDate(this);
    });
    
    function toggleDate(elem){
        var $elem = $(elem);
        $elem.next().slideToggle();
        $elem.html($elem.text() == '[-] Dates' ? '[+] Dates' : '[-] Dates');
    }
})

</script>



<style>
ul#dates_list{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#dates_list a{
    cursor: pointer;
}
ul#dates_list div.moredates {
    display: none;
} 
</style>
</head>

<body>

<a id="toggle_all_dates" class="moredates showAll">Show all dates</a>

<ul id="dates_list">
    <li>
        <a id="moredates_1">[+]Dates</a>
        <div class="moredates" data-collapsed="true">More dates one...</div> 
    </li>
    <li>
        <a id="moredates_2">[+]Dates</a>
        <div class="moredates" data-collapsed="true">More dates two...</div> 
    </li>
    <li>
        <a id="moredates_3">[+]Dates</a>
        <div class="moredates" data-collapsed="true">More dates three...</div>
    </li>
</ul> 
</body>
</html>

Open in new window


Is there a way to so make the 3 id's ( "moredates_1" , "moredates_2" and "moredates_3" have a "dynamic name" so that they would be generated based on a condition from a database.

Thanks!
0
Comment
Question by:smfmetro10
  • 2
3 Comments
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 2000 total points
ID: 39717531
Hi,
question: why do want to assign IDs to these elements?
From the code I see, the id of the element is used nowhere - hence I think you even can ommit the id (but just if there is not more code you have not yet posted).

KR
Rainer
0
 

Author Comment

by:smfmetro10
ID: 39717638
Wow!
 You're right!!
 Is it possible to change the code to work with <td> instead of ul's?

I did a quick swap but didn't seem to get it to work :)
0
 

Author Closing Comment

by:smfmetro10
ID: 39717686
Thanks for "eye" Sometimes I'm too close to the barn to see what color I'm painting it :)
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question