CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 9 of 9
  1. #1
    Join Date
    Sep 2007
    Posts
    28

    Whats the easiest way

    to insert HTML onto a page on the fly or by request using ajax? Now, I dont mean import an external html file into a div, but I mean, literally import html code (predefined somewhere) and place it on the page. And Id want this to happen infinitely. For example, I want a button on a html page to insert the following: <div>blah</div><div class="ff">ddd</div>etc...

    Now everytime I click this button, it will insert that html into the page.
    Is AJAx my answer or am I looking at the wrong client-side script?

  2. #2
    Join Date
    May 2002
    Posts
    10,943

    Re: Whats the easiest way

    Well, the easiest is to use a <div> tag and alter the innerHTML.

    Code:
    <script type="text/javascript">
    var theInteger = 0;
    function addToDiv(){
      var theDiv = document.getElementById('newContent');
      theDiv.innerHTML += 'Testing...' + theInteger + '<br />';
      theInteger++;
    }
    </script>
    
    <input type="button" value="Add to Div" onclick="addToDiv()" />
    <div id="newContent"></div>
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    Sep 2007
    Posts
    28

    Re: Whats the easiest way

    but if i click on that button three times, will it reproduce the html 3 times or just replace it?

  4. #4
    Join Date
    Sep 2007
    Posts
    28

    Re: Whats the easiest way

    4get it, tested and it works, thanks

  5. #5
    Join Date
    May 2002
    Posts
    10,943

    Re: Whats the easiest way

    You're welcome. Good luck!
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  6. #6
    Join Date
    Sep 2007
    Posts
    28

    Re: Whats the easiest way

    hey, another question. What if the inserted html code is very long... several lines. Ive noticed that the script breaks if I enter html with sveral lines. Is there a way around this?

    thanks

  7. #7
    Join Date
    May 2002
    Posts
    10,943

    Re: Whats the easiest way

    The script won't "break" if you are inserting a lot of HTML. You must be writing your strings wrong. Can you post some code?
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  8. #8
    Join Date
    Sep 2007
    Posts
    28

    Re: Whats the easiest way

    if i do something like this:
    Code:
    <script type="text/javascript">
    var theInteger = 0;
    function addToDiv(){  var theDiv = document.getElementById('newContent');
      theDiv.innerHTML += '<div id="scont">
    						<div class="inner" id="inner">
    							<div class="innertopleft">
    								<div class="innertopright">
    								</div>
    								<div class="flexcroll" id="flexcroll" onmouseover="javascript:insertRemoveP(false)">
    									<div id="dynamic">
    										';
      theInteger++;
    }
    </script>
    it wont work, itll give me an error, but if i place all that code on a single line (backspacing it all), it works fine

    Code:
    <script type="text/javascript">
    var theInteger = 0;
    function addToDiv(){
      var theDiv = document.getElementById('newContent');
      theDiv.innerHTML += '<div id="scont"><div class="inner" id="inner"><div class="innertopleft"><div class="innertopright"></div><div class="flexcroll" id="flexcroll" onmouseover="javascript:insertRemoveP(false)"><div id="dynamic">';
      theInteger++;
    }
    </script>
    btw, for the html code within, i replace all quotations with \"
    Last edited by PeejAvery; September 19th, 2007 at 09:42 PM.

  9. #9
    Join Date
    May 2002
    Posts
    10,943

    Re: Whats the easiest way

    Quote Originally Posted by Kovo88
    it wont work, itll give me an error, but if i place all that code on a single line (backspacing it all), it works fine
    That is because you can't have multi-line variables.

    You have to do something like...
    Code:
    theDiv.innerHTML += '<div>';
    theDiv.innerHTML += '</div>';
    Also, if you are doing this function multiple times, you will have many duplicate IDs for the <div> tags. You will need to use the incrementing variable to make an incrementing ID.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

Posting Permissions

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





Click Here to Expand Forum to Full Width

Featured