open-xml-templating / docxtemplater

Generate docx, pptx, and xlsx from templates (Word, Powerpoint and Excel documents), from Node.js or the browser. Demo: https://www.docxtemplater.com/demo. #docx #office #generator #templating #report #json #generate #generation #template #create #pptx #docx #xlsx #react #vuejs #angularjs #browser #typescript #image #html #table #chart
https://www.docxtemplater.com
Other
3k stars 344 forks source link

Changing the button value #34

Closed sm1990 closed 10 years ago

sm1990 commented 10 years ago

I'm trying to print an invoice and a credit note using docxtemplater. Both buttons should appear in the same page, where one button says "invoice" and the other "credit". I tried modifying the js file, but the value of the button will always be either "invoice" or "credit". Can't display both at the same time.Both buttons print the correct documents. It's just the value of the buttons that can't be changed. Can you please help me with this. Thanks

edi9999 commented 10 years ago

Hi,

I'm sorry but I don't really understand what your questions is about.

You are speaking of "invoice" and "credit" buttons. Where are those buttons ? On the HTML page ? Can you please send your code ?

By "value" of the buttons, do you mean what is written on the button ?

sm1990 commented 10 years ago

HTML code

<!doctype html>

Billing ``` ``` ```

Print Invoice



Print credit note

===end of html code====

main1.js

DocUtils.loadDoc("image.png",{docx:false})

function textAreaAdjust(o) { o.style.height = "1px"; o.style.height = (25+o.scrollHeight)+"px"; }

window.onload= function () {

var textAreaList= document.getElementsByTagName('textarea');

for (var i = textAreaList.length - 1; i >= 0; i--) { textAreaAdjust(textAreaList[i]) var executeButton=document.createElement('button') executeButton.className = "execute"; executeButton.innerHTML="Invoice"; textAreaList[i].parentNode.insertBefore(executeButton, textAreaList[i].nextSibling);

// var viewRawButton=document.createElement('button') // viewRawButton.className = "raw"; // viewRawButton.innerHTML="View Initial Document"; // textAreaList[i].parentNode.insertBefore(viewRawButton, textAreaList[i].nextSibling); };

var executeButtonList= document.getElementsByClassName('execute');

for (var i = 0; i < executeButtonList.length; i++) { executeButtonList[i].onclick=function() { childs=(this.parentNode.childNodes)

    for (var j = 0; j < childs.length; j++) {
        if(childs[j].tagName=='TEXTAREA')
        {
            console.log(childs[j].value)    
            eval(childs[j].value)
        }
    };
}

};

var viewRawButtonList= document.getElementsByClassName('raw');

for (var i = 0; i < viewRawButtonList.length; i++) { viewRawButtonList[i].onclick=function() { childs=(this.parentNode.childNodes)

    for (var j = 0; j < childs.length; j++) {
        if(childs[j].tagName=='TEXTAREA')
        {
            raw=(childs[j].getAttribute("raw"))
            var doc=new DocxGen(docXData[raw])
            doc.output()
        }
    }
}

}

}

====end of main1.js code====

My problem is, I want the button under print invoice to appear as "invoice" while the button under print credit note in the html page to appear as "Credit note" instead of "invoice" as shown in the image.

git

When I change the main1.js, whatever I type there applies to both buttons. I gave the text area in html an id & changed "getElementsByTagName" in the js to "getElementById". It didn't work. Also,the code doesn't work if you put the textarea within form tags.Can you please help me with this.

Thanks

edi9999 commented 10 years ago

This is not really a DocxTemplater specific question, but you should try this:

Instead of the line:

executeButton.innerHTML="Invoice";

try:

executeButton.innerHTML= (i==0) ? "Invoice" : "Credit";

sm1990 commented 10 years ago

Thanks, I'll try that.

sm1990 commented 10 years ago

Thanks, it worked. :)

edi9999 commented 10 years ago

Great :-)

sm1990 commented 10 years ago

Sorry to bother you again, but there is a bug. :-( The 1st time I tried to print both documents it worked properly in chrome. I tested it in firefox, on both occasions(invoice/credit) it prints the 1st template(invoice). I tested the same page in chrome again. This time, on both occasions(invoice/credit) it prints the 2nd template(credit). I tested the same page with a different id in chrome again. it worked properly. My chrome saves browser history. But firefox doesn't. can you please help me with this. Thanks

edi9999 commented 10 years ago

Hi, I guess this is because you've changed the HTML template.

The <textarea> and <button> need to be isolated inside a common tag:

something like this:

<div>
   <textarea/>
   <button/>
</div>
sm1990 commented 10 years ago

Thanks for helping me multiple times. It worked. :-)

edi9999 commented 10 years ago

No problem, that's what's great about open-source :-)