I am using Mustache.js to create a template html and show set of tables.
I want to call a function inside this template with a parameter.
Every table generated from through mustache template is having a button on top of it.
I want to write a onclick function for this button.So I need the table name when processing the event.
Can someone give me the correct syntax to pass parameter?
<script id="TableTemplate" type="x-tmpl-mustache">
{{#tableDetails}}
<button type="button" id=Edit_{{tableName}} onclick="editTable({{tableName}})">
{{#tableDetails}}
</script>
function editTable(tableName){
console.log("tableName >>>"+tableName)
}
Thanks.
You are doing it almost right. Just add the quotes.
onclick="editTable('{{tableName}}')"
Related
JavaScript code I am trying to get to call from the HTML.
var ClassList = new Array ["Bio1300","csci12"];
function ClassMenu(ClassList) {
return (ClassList.toString);
};
This is the HTML code I am trying to call the JavaScript function inside of on the load of the page.
<li>
<script type="text/javascript" src="JavaScript InProg.js">
function ClassMenu() {
console.log(ClassList.toString);
}
</script>
</li>
Please help. I have many other functions I am trying to call in this manner that are both arrays and contain mathematical calculations.
There are a few issues with the code snippet you've provided. Firstly, it's considered a best practice to add your <script> tags inside the <head> of the document or at the end of the document when loading JavaScript files. Secondly, your source reference is incorrect. Assuming the JavaScript file InProg.js is at the same directory level as your HTML file, you could change your script link to something like this:
<script src="InProg.js"></script>
Once you've ammended how you're loading the JavaScript file into your page, you can simply make a call to the function inside another <script> tag from anywhere on the page, like so:
<script>ClassMenu(params);</script>
Also, I'd recommend adding the console.log statement to the function you're calling.
Hopefully this helps.
Hi guys I have a a problem I think is a easy one but I don't find the problem. I have a "menu" where I want to send a data to another page when I click one button. So I write a function in js to open a new tab and the send the data. But when I do click, it is like if the function doesn't exist.
<div id="botones">
<input type="button" value="<?=L::misc_export?>" onclick="javascript:pasarDatosParaExportar();" name="boton" />
</div>
<script type="text/javascript">
function pasarDatosParaExportar() {
window.open('calculos.exportar.php?fecha2='+'<?=$_POST['fecha2']?>'+'&hasta='<?=$_POST['hasta']?>'&cuartel='<?=(int)$_GET['cuartel']?>'','_blank');
}
</script>
Remove javascript: from content of your "onclick". It's for <a href="[HERE PUT javascript:]"
If you have link and want to put JS code into "href" parameter, should use it:
click
But you can do the same like this:
<a onclick="alert('success!')">click</a>
You should check the string delimiter characters (') in the parameter to the open function. I guess you probably mean to write something like this
function pasarDatosParaExportar() {
window.open('calculos.exportar.php?fecha2='+'<?=$_POST['fecha2']?>'+'&hasta=<?=$_POST['hasta']?>&cuartel=<?=(int)$_GET['cuartel']?>','_blank');
}
Write the JavaScript code to define the function before its use in the div and above in code because html assumes that this code doesn't exists if it doesn't occur before its use. So just replace the div and script with each other. This should work fine. And there is no need to use javascript: before name of function. yo can use onclick="pasarDatosParaExportar();".
i have an html button inside a php ...
echo"<td width=14% align=center><input type=button value=Export onclick=mybtn3() /></td>";
this button is made inside php. now i want to call this function mybtn3();
i have tried defining this function in head and also in body. but onclick of that button , this function isn't calling. how to call this function and where to define it.
NOTE: in the body phase. there are many if else condition, each if condition produces new table. and at the end of every table i've defined this button. so that table may give new results depending upon the condition but this button will be there at the end of every table. so plz help how to call this button and where to define it.
THank you
`
use the below code, i recommend you to put this script in the header tag of your html document, even though you can put it at other places also, function mybtn3 will be called once you click on that button:
<script>
function mybtn3()
{
//your function code here
}
</script>
To echo text with double quotes, use \", or place it outside of the <?php ?>. Or better yet, use single quotes.
Change to this:
onclick=\"mybtn3()\"
\ works as an escape charachter
I have a javascript variable called locid that I am trying to use as part of a URL by setting the data-url of a div as follows:
data-url='#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?LocationID=locid&AsyncUpdateID=catalogue-view'>
I know I can't just throw the locid in that string as I have done in my sample code but I just put it there to illustrate where I need my javascript variable to be. How can I achieve this??
The problem here is #url.content needs to be run on server, where JavaScript variable is not visible. Write an independent AJAX call to fetch content and than set content in data-url
You cannot use the Javascript variable directly into attribute.
A workaround can be to reorder the parameters of your url and setting the JavaScript variable in script tag.
<button id="myButton" data-url='#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?AsyncUpdateID=catalogue-view'></button>
I have reordered the url parameters here. The location parameter will be set by following script. Place this script just after the button element.
<script>
var button = document.getElementById('myButton');
var url=button.getAttribute('data-url');
url+="&LocationID=" + locid;
button.setAttribute('data-url',url);
</script>
You can put the value in the page using document.write, but you can't write it out inside the tag, you have to write out the entire tag. Example:
<script>
document.write('<div data-url="#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?LocationID=' + locid + '&AsyncUpdateID=catalogue-view">');
</script>
I have a page that is driven by a mustache template (along with javascript and jquery), and I can't figure out how to insert a function into this template. Essentially what I want is to add a link or button to the page that executes a function, "onTaskSelected(taskId)", when the user clicks on it. I've been searching for a way to accomplish this for several days now, and extensive mustache documentation/support/examples are woefully hard to find. Does anyone know how this could be accomplished?
Edit - Here is some of the code that I've tried:
data["B" + task.taskId] = {
changeTask : function(taskId) {
var self = this;
self.onTaskSelected(taskId);
},
taskId : task.taskId
};
Data gets loaded into the mustache template, which has the following within it:
<button onClick="{{#B8.changeTask}}B8.taskId{{/B8.changeTask}}">Change to task 8</button>
I've debugged the code to the point where data gets sent to the template to be converted to html, and B8 has set both changeTask and taskId correctly. However, by the time the html is displayed, the button looks like this:
<button onclick>Change to task 8</button>
Why is the onclick getting zapped, and how can I fix it? It doesn't need to be a button, but I do need a clickable element on the page with that text.
Update: I have since updated my template as follows:
<button onClick="{{#B8}}{{#changeTask}}8{{/changeTask}}{{/B8}}">Change to task 8</button>
Apparently I needed to nest my data templating in order to access the variables inside the "B8" object. However, now the problem I have is that it's trying to execute the "changeTask" function when it creates the html from the template. How can I get it to wait to execute until I click the button?
Finally got it working, but I ended up going a completely different route. Wanted to post it here in case anyone else had the same problem. I formatted the mustache to give the button a name rather than try to insert the onClick method, then I cycled through every button in that section of the DOM using jquery and add an onClick method to the buttons that had the right names.
Edit: Technically I also changed my buttons to links, which I'll show in the code below, but it should also work for buttons as well.
template:
<a name="{{{B8}}}">Change to task 8</a>
jquery (partial example):
$('a[name="' + buttonData[B8].name + '"]').click(function() {
self.onTaskSelected(buttonData[B8].taskId);
});
Hope that is helpful for others.
While your own answer is correct in essence, there is an easier option to select with jQuery:
$(link+'[name|="'+buttonData[B8].name+'"]')
Hope this helps u in the future.
Btw - I am myself still searching for a solution to the original problem...