How to run an html file on button click multiple times

[hamalaw]

Hi,
i want to have a button that runs a file that opens a box to add images, so i was able to do that. however i want to be able to add a second image when i click the button again, but that doesnt work.
code:

<button type='button' id='addTextButton'>Add a Text Box</button>
<br>
<button type='button' id='addImageButton'>Add an Image</button>
<br>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/upload_script.js"></script>
<script>
    $(document).ready(function(){
        $("#addImageButton").click(function(){
            $("#imgsandtxt").load("functions/uploadimageview.html");
            });
        $("#addTextButton").click(function(){
            $("#imgsandtxt").load("functions/addTextView.html");    
        });    
    });
    </script>

    <div id='imgsandtxt'></div>

I think the problem is because of the div since thats where my html is going and when i click the button again it replaces the old html with the new one instead of making a new one. i guess what im asking is how do i make it make a new div and put the html into that whenever i click the button

[ErnieAlex]

Well, you can use the InsertAfter() function. But, I have never used it. it basically needs to know the place to put the image after. So you might need to get tricky on handling where the “selector” is. Or, just insert it every time after a set DIV and the most recent would show up at the top. That should work. Loosely like:

$(document).ready(function() {
$("#addImageButton").click(function() {
$(“functions/uploadimageview.html”).insertAfter("#imgsandtxt");
});
$("#addTextButton").click(function(){
$(“functions/addTextView.html”).insertAfter("#imgsandtxt");
});
});

Not sure this is correct, not tested, but, you can review the docs on the insertAfter() function to get more info on it. Good luck!

[hamalaw]

i wasnt able to make it work with insertAfter

[ErnieAlex]

As we say all the time on this site, text means nothing, show us the code! Ha!

Trim down to a test file with just the few buttons and some dummy text to insert along with the JQuery and post it here inside the </> tags. Then, we might be able to get it to work for you. The sample I gave you was just off the top of my head from a sample I found online. Might need some adjusting. Also, include the lines for the JQuery library you used so we can match that too in our tests.

[hamalaw]

i was finally able to solve this using .append

<script>
    $(document).ready(function(){
        totalImages=0;
        totalTextBoxs=0;
        $("#addImageButton").click(function(){
            totalImages++;
            divID='image_'+totalImages;
            appendString = '<div id="'+divID+'"></div>';
            $("#container").append(appendString);
            divIDforLoad = '#'+divID;
            $(divIDforLoad).load("php/uploadimageview.php");
            });
        $("#addTextButton").click(function(){
            totalTextBoxs++;
            divIDText='TextBox_'+totalTextBoxs;
            appendStringTextBox = '<div id="'+divIDText+'"></div>';
            $("#container").append(appendStringTextBox);
            divIDforLoadTextBox='#'+divIDText;
            $(divIDforLoadTextBox).load("php/addTextView.php");    
        });    
    });
</script>

    <div id="container"></div>

[ErnieAlex]

Great! Glad to hear you solved it. And, thanks for showing the code in case someone else wants to do this process.