ansaurus

Question

Jquery - Dynamically generate string within HTML code?

Answer 1

+1 A:

It really depends were the number is coming from, but you could do the following:

nextNumber = function() {
  // generate your next number here...
  // wherever it may come from ;-)
  return newNumber;
}

and then

<a href="#" onclick="var i = nextNumber(); $.scrollTo('#' + i + 'jump', 800, {easing:'elasout'}); server sidejavascript:animatedcollapse.toggle(i); $(this).attr('id', i)" id="xxx-toggle">Next</a></div>

Or did I miss the point?

Mef 2010-01-16 20:29:26

The theory makes sense to me. This where the default number comes from: <script type="text/javascript"> animatedcollapse.addDiv('015', 'fade=1,speed=500,hide=1') animatedcollapse.addDiv('016', 'fade=1,speed=500,hide=1') </script>

Damian Kemp 2010-01-18 13:37:39

If you prefer, please view the code at http://damiankemp.com. The 'addDiv' code above looks nasty.

Damian Kemp 2010-01-18 13:40:40

On second glance this looks very promising and the kind of tidy code I had in mind. What code would generate the next number?How could I set a default number?How would it replace id="xxx-toggle"? id="+ i + '-toggle'"?Thanks.

Damian Kemp 2010-01-18 15:28:39

The id gets replaced automatically when clicking, have a second look at my code (you would just have to add the string, I forgot that) ;-) I don't yet now where your IDs are coming from... actually I thought you do :D

Mef 2010-01-18 22:26:22

Thanks for the reply. I want to get ID numbers from the below. How can I get that working?<script type="text/javascript">animatedcollapse.addDiv('015', 'fade=1,speed=500,hide=1')animatedcollapse.addDiv('016', 'fade=1,speed=500,hide=1')animatedcollapse.ontoggle=function($, divobj, state){ if ($('#'+divobj.id+"-toggle").length==1){ $('#'+divobj.id+"-toggle").css('color', (state=='block')? '#FFF' : '#CCC') }}animatedcollapse.init()</script>

Damian Kemp 2010-01-19 01:00:20

*** what would I put in your bit *** <script type="text/javascript">nextNumber = function() { // generate your next number here... // wherever it may come from ;-) return newNumber;}</script>In the body an anchor that will slide to a div: <a href="#" onClick="var i = nextNumber(); $.scrollTo('#' + i + 'jump', 800, {easing:'elasout'}); javascript:animatedcollapse.toggle(i); $(this).attr('id', i)" id="(i); $(this).attr(i)-toggle">Next</a></div>

Damian Kemp 2010-01-19 01:01:46

Apologies for the rubbish layout in the last two comments. Can't seem to change it.

Damian Kemp 2010-01-19 01:03:51

If I understand this right, you chose the IDs yourself, starting with 15? So you would have to do something like `var currentId = 15; function nextId() { return ++currentId; }`.

Mef 2010-01-19 01:20:55

Ok. I've got this script:<script type="text/javascript">nextNumber = function() { var currentId = 15; function nextId() { return ++currentId; } return newNumber;}</script>

Damian Kemp 2010-01-19 02:21:53

and this html: <a href="#" onClick="var i = nextNumber(); $.scrollTo('#' + i + 'jump', 800, {easing:'elasout'}); javascript:animatedcollapse.toggle(i); $(this).attr('id', i)" id="(i); $(this).attr(i)-toggle">Next</a></div>

Damian Kemp 2010-01-19 02:22:30

nothing going on.

Damian Kemp 2010-01-19 02:23:53

MAybe you could just setup a plain new HTML file that contains _only_ the questionable parts of your script including all your JS, including the next-link etc? I will have a look at it... I had a look at your website but it is a bit overloaded for demo purposes :D

Mef 2010-01-19 09:49:19

Answer 2

+1 A:

By adding a class to the line, following can work.

$('.next-class').click(function(){
    curr = $(this).attr('id').split('-')[0];
    next = curr-1;
    $(this).replaceWith($('<a/>',{
        id: new+'-toggle',
        class: 'next-class',
        href: '#',
        text: 'Next',
        click: function(){/*your onclick function goes here written with new value*/}
    }))
    .prepend($('<a/>',{
        id: curr+'-toggle',
        class: 'back-class'
        href: '#',
        text: 'Back',
        click: function(){/*your onclick function goes here written with curr value*/}
    }));
})

Similar thing can be done for back-class also.

abhaga 2010-01-16 20:32:40

i think your code assumes the element ids are numbers. that's not preferred, because it is likely to generate conflicts.

floyd 2010-01-16 20:42:32

I have fixed it to extract numbers out of id values. I didn't understand the conflict part. I presume that 'xxx-toggle' patterns are unique for Next and Back links.

abhaga 2010-01-16 21:36:14

ansaurus

tags:

views:

answers:

Jquery - Dynamically generate string within HTML code?

related questions