i have the following code:
<p:barChart id="bar" extender="extBar"
value="#{primeBean.findBarModel('simpleBarChart')}" />
<script>
function ext() {
}
</script>
Will be renderized the values:
[
[[5,1], [1,2], [3,3], [4,4]],
[[4,1], [7,2], [1,3], [2,4]]
]
How can i get the category/serie value inside ext function ? Is there an element that i can get these values inside ext ?
Yes and it's very easy. Add a widgetVar attribute to your <p:barChart this way :
<p:barChart widgetVar="myWidget" ... />
The you can access the data in javascript using myWidget.cfg.data. You'll get an array of array that you can read using regular js.
You can test it online in the showcase, open a javascript console if your browser has one and type : widget_basic.cfg.data
Related
I'm new to vue.js, before this i'm using jquery or js for my project, i'm working on a project that require me to append HTML element dynamically on button click, and at the same time bind the input value to model, similar to:
$(".button").click(function() {
$("#target").append("<input type='hidden' name='data' v-model='inputModel' value='1'/>");
});
But i need this in Vue.js ways.
Here is my code:
data() {
return {
programmeBanner: [],
dropzoneOptions: {
...
...
init: function () {
this.on("success", function(file, response) {
file.previewElement.id = response;
// this is the part that i want to append the html input into
// the .dz-preview is the target that i want to append
$(".dz-preview[id='"+response+"']").append("<input type='hidden' name='"+fileInputName+"[]' v-model='programmeBanner' class='"+fileInputName+"' value='"+response+"'/>");
});
},
...
Here is a sample that i want to achieve, this is in Jquery, i need it in Vue.js
https://jsfiddle.net/041xnfzu/
Hmm I think you're mixing all kinds of code here :)
First off, you shouldn't use jquery inside VueJS. I think that your setup is a little off. You shouldn't define a whole object with functions and event listeners in your vue data object.
That's what Vue components are for, define methods in your methods property and data in you data property.
Thanks to your jsfiddle example, I have this pure vuejs example for you on codepen: https://codepen.io/bergur/pen/vwRJVx
VueJS code:
new Vue({
el: '#demo',
name: 'Adding html',
data() {
return {
inputs: []
}
},
methods: {
addInput() {
this.inputs.push(this.inputs.length+1)
}
},
computed: {
buttonText() {
return this.showInput ? 'Hide input' : 'Show input'
}
}
})
HTML template
<div id="demo">
<button #click="addInput">Add input</button>
<div v-for="(input, index) in inputs">
<input name="data" v-model="inputs[index]" />
</div>
<p>
First value: {{ inputs[0] }}<br />
Second value: {{ inputs[1] }}
</p>
</div>
Here's a walkthrough of the code.
We create a data property called inputs, that is an array.
We create a method called addInput and all that does is to push a new item into the inputs array
In the template we loop with v-for through our inputs array and render a input for each item in our inputs data property.
We then use v-model to bind each input to its corresponding place in the inputs array.
You can try to change the input value and see that the template updates the value.
So input[0] holds the value for the first input, input[1] holds the value for the second input and so on.
If you want only one element to be appended to component, then you should use v-if
https://v2.vuejs.org/v2/guide/conditional.html#v-if
If you want to append multiple elements, like todo list, you should use v-for
https://v2.vuejs.org/v2/guide/#Conditionals-and-Loops
I try to dynamically change value of its variable. Once onclick (Change Ticket ID ) button then execute onClickSendEmail and variable value should be change of tickedId.
Its unable to update with newTickedId. I tried while create variable using #defining and individual calling by function also.
So, Basically I got stuck. how it will be solve.
#(sender: String)
<!--#{var tickedId = "tickedId"}-->
#defining(sender.contains("#")) {isEmail =>
#main((if(isEmail) "Email" else "Chat") + " Messages - " + sender) {
...
...
...
<div>
<a onclick="onClickSendEmail();return false;">
Change Ticket ID
</a>
</div>
#defining("getTicketId()") { tickedId =>
#views.html.common.form.panel("Reply",controllers.routes.ChatMessageController.sendEmail(tickedId,sender),"Send"){
<textarea id="emailArea" cols="100" rows="4" name="emailArea"></textarea>
}
<script type="text/javascript">
function onClickSendEmail() {
tickedId= "NewUpdatedTicketId";
}
function getTicketId() {
return "NewUpdatedTicketId";
}
</script>
}
}
}
You should not mix Twirl templating with Javascript. It's a bad approach.
The role for Twirl is to render HTML blocks. You can define conditions and variables here in order to dynamically change the HTML output. While with Javascript you can modify this rendered HTML output without reloading the page.
There are cases where you need to use a Twirl variable in Javascript, then you can do something like:
#(chartData: Html)
<script>
let jsData = #twirlData; // where twirlData is an existing variable
console.log(jsData)
</script>
Here's a link where you can read more.
I am new at MVC and I want to show an alert message from the Controller tempdata as bootbox alert message
How can it be done? Please somebody help me with an example
Say you have TempData["Message"]
In your view assign it to some hiddenField as below
#{
var message=TempData["Message"] as string;
}
<input type="hidden" value="#message" id="hdnMessage"/>
Now write a document.ready function and check if the hidden field has value and if yes show your message as below:
$(document).ready(function(){
if($("#hdnMessage").val()!="")
{
var msg=$("#hdnMessage").val();
bootbox.alert(msg);
$("#hdnMessage").val('');//empty the value so that it won't show everytime
}
});
Assuming a <script> tag is used in the view, you can directly inject the value from TempData into JavaScript. Something like this would work:
#if(TempData.ContainsKey("Message"))
{
<script>
$(function(){
bootbox.alert('#TempData["Message"]');
});
</script>
}
This won't work in a .js file, as those aren't parsed by the Razor engine.
You could put this in a partial view, or include it somewhere in _Layout, or simply use it in the view you're currently working in. The only important bit it to remember that it needs to be rendered after jQuery, bootstrap.js, and bootbox.js.
I am attempting to use jQuery autocomplete to pass values to my controller. Autocomplete doesn't seem to work with apex:inputField so I am forced to use an html input. The problem is I can't seem to be able to properly get the value inside the input.
The auto complete is working and will populate with values test value,Test 2
I have a string variable hidden {get; set;} in my controller. I want to grab whatever is entered in the input with Id apiName and save that in my controller variable called hidden
<apex:page standardController="Object__c" extensions="ctrl">
<script src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
<script type="text/javascript">
//Create a new variable j$ just to avoid any conflicts with other libraries which may be using $.
var j$ = jQuery.noConflict();
//Capture the list of countries in a Array.
var myVar = ['test value','Test 2'];
//on Document ready
j$(document).ready(function(){
j$("#apiName").autocomplete({
source : myVar
});
});
</script>
<script type="text/javascript">
function setHidden() {
var hiddenRep = document.getElementById('theHiddenInput');
hiddenRep.value = document.getElementById('apiName').value;
}
</script>
<apex:form >
<apex:pageBlock >
<apex:pageBlockButtons location="top">
<apex:commandButton value="Save" action="{!save}" onclick="setHidden();"/>
</apex:pageBlockButtons>
<apex:pageblockSection >
<input id="apiName"/>
<apex:inputHidden value="{!hiddenValue}" id="theHiddenInput"/>
</apex:pageblockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
To refer to a Visualforce component in JavaScript , you must specify a value for the id attribute for that component. A DOM ID is constructed from a combination of the id attribute of the component and the id attributes of all components that contain the element.
You can work in two ways:
1) Each component in a Visualforce page has its own Id attribute. When the page is rendered, this attribute is used to generate the Document Object Model (DOM) ID. Use $Component.Path.to.Id in JavaScript to reference a specific component on a page, where Path.to.Id is a component hierarchy specifier for the component being referenced.
function setHidden() {
var hiddenRep = document.getElementById('{!$Component.theHiddenInput}');
hiddenRep.value = document.getElementById('apiName').value;
}
2) by jquery Contains selector.
function setHidden() {
j$('[Id*='theHiddenInput']').first().val( document.getElementById('apiName').value)
}
I already had this solved. What worked in the end is this
function setHidden() {
j$("[id*='theHiddenInput']").val(j$("[id*='apiName']").val());
}
I have an input file within a ng-repeat in my angularJS app. I need to pass the $index variable to the onchange attribute. I'm using onchange and not ng-change because I need the uploaded object (see this post)
In the following code I get 'Uncaught ReferenceError: $index is not defined'
Jade code sample:
div.input-group(ng-repeat='filename in filenames track by $index')
input(type='file', onchange="angular.element(this).scope().file_changed(this.files, **$index**)")
In the onchange attribute, the scope is only accessible via angular.element(this).scope(). That's the method you use to call the file_changed() function, and you should use the same in order to have access to the $index attribute:
<input type="file" onchange="angular.element(this).scope().file_changed(this.files, angular.element(this).scope().$index)" />
Notice that this is becoming pretty long! A solution is to simply pass the DOM element to the function, and obtain all the informations from it:
<input type="file" onchange="angular.element(this).scope().file_changed(this)" />
$scope.file_changed = function (element) {
var index = angular.element(element).scope().$index;
var files = element.files;
// …
};