AJS.bind("init.rte", function() { var macroName = 'awlk-confluence-integration-macro'; // 1. create dialog to add macro var dialog = new AJS.Dialog({ width: 800, height: 600, id: "awlk-macro-dialog", closeOnOutsideClick: true }); //Add Stuff dialog.addHeader("Insert Anwendungslandkarte"); dialog.addPanel("Liste aller Elemente", "<table><tr bgcolor='#ACD1E9'><th>Key</th><th>Discription</th><th>State</th></tr><td >$item.name</th><td>$item.type</th><td>$item.state</th></tr></table>", "panel-body"); dialog.addPanel("Searchfield", "<p><input id='searchField' type='text'><hr>", "panel-body"); //hide dialog dialog.addCancel("Cancel", function() { dialog.hide(); }); // 2. add macro to editor dialog.addSubmit("Insert Macro", function() { var currentParams = {}; currentParams["searchFieldInput"] = document.getElementById('searchField').value; currentParams["arg2"] = "that"; // 3. get current selection in editor var selection = AJS.Rte.getEditor().selection.getNode(); var macro = { name: macroName, params: currentParams, defaultParameterValue: "", body : "" }; // 4. convert macro and insert in DOM tinymce.plugins.Autoconvert.convertMacroToDom(macro, function(data, textStatus, jqXHR ) { AJS.$(selection).html(data + "<p><br/></p>"); }, function(jqXHR, textStatus, errorThrown ) { AJS.log("error converting macro to DOM"); }); dialog.hide(); }); // 5. bind event to open macro browser AJS.MacroBrowser.setMacroJsOverride(macroName, {opener: function(macro) { // open custom dialog dialog.show(); tinymce.confluence.macrobrowser.macroBrowserComplete({name: macroName, "bodyHtml": undefined, "params": {}}); }}); });
currently i made my new panel by using the html tags withing the javascript:
dialog.addPanel("Liste aller Elemente", "<table><tr bgcolor='#ACD1E9'><th>Key</th><th>Discription</th><th>State</th></tr><td >$item.name</th><td>$item.type</th><td>$item.state</th></tr></table>", "panel-body"); dialog.addPanel("Searchfield", "<p><input id='searchField' type='text'><hr>", "panel-body");
What i want to know is, can i reference to .html or .vm instead of enter the html tags directly in the javascript?
If it is possible how should i do this?
I want to display a bit more then a searchfield and a tableheader.
Somehting like this:
dialog.addPanel("Liste aller Elemente", "macrobrowser_panel1.vm", "panel-body"); dialog.addPanel("Searchfield", "macrobrowser_panel2.vm", "panel-body");
Mayby @Joe Clark [Atlassian] or @Nic Brough -Adaptavist- or @Adrien Ragot 2 can tell me.
Best Regards,
J.D.
Community moderators have prevented the ability to post new answers.
No, velocity files are rendered on the server, so the contents of a velocity template is not accessible to a JavaScript function executing on the client.
If you want to templatize HTML in your JavaScript code, you should consider writing a Google Closure ("Soy") Template: https://developer.atlassian.com/display/CONFDEV/Writing+Soy+Templates+in+Your+Plugin
I really appreciate your help, thank you. I will try that. Best regards J.D.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Can i give the soy template a list of names from a db, for later using with a javascript?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
How can i call up my soy instead of dialog.addPanel?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I'll answer your comment questions in another answer, so that I can use formatting (Ok @Norman Abramovitz - now I see your point! )
To your first question: The soy template is executed and rendered in the client's browser, so like your JavaScript code, it cannot interact with any code or templates on the server directly (or the database). You need to decide how you are going to transport the values in the database from the server to the client. You will probably need to do something like building a REST API to retrieve the values, and then make an AJAX call when the dialog is loaded to retrieve them. That's quite an involved process - I think this tutorial might help guide you: https://developer.atlassian.com/display/DOCS/Developing+a+REST+Service+Plugin
To your second question: You can invoke a soy template by calling it by it's namespace and template name. It returns a String which is the HTML content. So for example, if you have a template like this:
{namespace my.example.templates} /* * @param name */ {template .sayHello} Hello {$name}! {/template}
You could call it in JavaScript like this:
var dialog = AJS.Dialog(); var panelContent = my.example.templates.sayHello({name: "Joseph"}); dialog.addPanel("Panel Title", panelContent, "panel-class");
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
why do i need the rest api? the db returns values in the macro already to display them on a page.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
shouldnt be an ajax call enough to get that data? (just started reading about ajax)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
can´t i load in a list of names into an html form / servlet and retrieve that list from there?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState==4 && xmlhttp.status==200){ ajaxgetstring = xmlhttp.responseText; } }; xmlhttp.open("GET","macrobrowser_panel.vm",false); xmlhttp.send(); var autoselect = "<form class='aui'>" + "<select id='select2-example' multiple> " + ajaxgetstring + "</select></form>"; dialog.addPanel("B", autoselect, "panel-body");
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Ah yeah, if the values are already on the page via the macro, then the REST API wouldn't be necessary.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Mh, i cant get the ajax call working. (Like i said, im new to ajax and dont have that much javascript experience). My call looks like this atm var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET","reqURL",true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState==4 && xmlhttp.status==200){ ajaxstring = xmlhttp.responseText; } else { alert('Something is wrong with AJAX call!!'); } }; xmlhttp.send(); Servlet: @Override public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException { ArrayList<String> searchList = new ArrayList<String>(); searchList.add("A"); searchList.add("B"); searchList.add("C"); searchList.add("D"); response.setContentType("text/html"); // Set content type of the response so that jQuery knows what it can expect. response.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); //<option value='$item'>$item</option> for(String name : searchList){ // Write response body. out.println("<option value='" + name + "'>" + name + "</option>"); } }
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
reqURL = json.txt [ { "name": "Bernd" }, { "name": "Alf" }, { "name": "Gerd" }, { "name": "Janick" } ]
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Use the jquery "Get" function (http://api.jquery.com/jquery.get/) instead of using XMLHttpRequest object directly - it's much easier. var reqUrl = AJS.contextPath + "/plugins/servlet/myservlet/" AJS.$.get(reqUrl, function(data) { alert("The request worked. The request body is:" + data); });
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Yep thanks, that a lot better way :) Forgot that JQuery is inbuild.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I think i have to make the ajaxrequest async, because the data comes in to slow. (after the addPanel). How can i change them dynamic, how can i chance the html in the panel dynamic? Thanks for you help, by now
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
AJAX requests in JQuery are asynchronous by default. So in your success handler, you will need to change the code so that instead creating the dialog panel, you instead use a JQuery selector to find the panel and update its content.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I think i have to use this: (descipted in the aui doc) gotoPanel pageObject , panelIDorObject goes to a specific panel in the dialog hierarchy dialog.gotoPanel(page, 3); and to select my dropdown and my searchfield one of these: http://api.jquery.com/category/selectors/ can i use "document.getElementById('searchField')" to update them?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Okay, i made it: dialog.getPanel(id); document.getElementById("select-name").innerHTML = addAutoSelectNamesOption; My problem now is that the params seems not get to my execute method.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
dialog.addSubmit("Insert Macro", function() { var currentParams = {}; // dialog.getPanel(2); currentParams["searchFieldInput"] = document.getElementById('select-name').value; alert(currentParams["searchFieldInput"]); //works alert(document.getElementById('select-name').value); //works // 3. get current selection in editor var selection = AJS.Rte.getEditor().selection.getNode(); var macro = { name: macroName, params: currentParams, defaultParameterValue: "", body : "" }; // 4. convert macro and insert in DOM tinymce.plugins.Autoconvert.convertMacroToDom(macro, function(data, textStatus, jqXHR ) { AJS.$(selection).html(data + "<p><br/></p>"); }, function(jqXHR, textStatus, errorThrown ) { AJS.log("error converting macro to DOM"); }); dialog.hide(); });
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Okay an atls-mvn clean install helped me out :) Thank you for your patience and help :)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Again, thank you for your big help :)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.