AJAX innerHTML. Change links. Possibly a " or ' problem.

Question

What I want is a hyperlink More when clicked on runs some javascript function and also changes to a hyperlink Less. Heres what I have which doesnt work. It runs the ajaxpage function fine but not moreToLess. I think its my use of " and ' in the javascript.

<script type="text/javascript">
function moreToLess(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=20', 'tagcloud');lessToMore()" >Less</a>';
}
function lessToMore(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()" >More</a>';
}
</script>
<span id=tagLinks ><a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()" >More</a></span>

Answer 1

Yes it is, just escape your single quotes inside of the double quotes that you have in your javascript.. ala \'

<script type="text/javascript">
    function moreToLess(){
        document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>';
    }
    function lessToMore(){
        document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=50\', \'tagcloud\');moreToLess()" >More</a>';
    }
</script>
<span id=tagLinks ><a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()" >More</a></span>

Answer 2

You have to escape the ' characters inside the quote:

'<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>'

Answer 3

I'm not sure if there's anything else wrong, but I think you need to escape your single-quotes that are within other single-quotes:

document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>\';

Answer 4

It is indeed a quote issue, you can escape the ' character with a \ character

<script type="text/javascript">
function moreToLess(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>';
}
function lessToMore(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=50\', \'tagcloud\');moreToLess()" >More</a>';
}
</script>
<span id=tagLinks ><a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()

Answer 5

This kind of confusion is why innerHTML is not always a win. You've got JavaScript embedded in HTML embedded in a JavaScript string literal embedded in more HTML, it's no wonder you're confused.

Here's a simpler version based on toggling the link through DOM methods.

<a id="tagLinks" href="/TagCloud?id=EDI_0009&amp;count=50">more...</a>

<script type="text/javascript">
    var ismore= false;
    document.getElementById('tagLinks').onclick= function() {
        ajaxpage(this.href);
        ismore= !ismore;
        this.href= '/TagCloud?id=EDI_0009&count='+(ismore? 20 : 50);
        this.firstChild.data= ismore? 'less...' : 'more...';
        return false;
    };
</script>

Answer 6

thanx budy it also works for me