I'm having trouble getting values from MBean when my javascript is in an external file.
Example:
<script src='scripts/externaljs.js' type='text/javascript' />
<script>
getString();
<script>
//externaljs.js
function getString(){
var string = "#{testMBean.getName()}";
alert(string);
}
It always returns "#{testMBean.getName()}" instead of the string value.
But if I declare it inside my .xhtml file it returns the proper value.
<script>
var string = "#{testMBean.getName()}";
alert(string);
</script>
Am I doing anything wrong here?
This is because your MBean value is only substituted in your view. If you want your external JavaScript file to see those values you can store them in an array / object, or pass them as arguments.
<script>
var mBeanValues = {
string: "#{testMBean.getName()}"
}
</script>
<script src="external.js></script>
<script>
getString()
</script>
=====
// external.js
function getString() {
alert(mBeanValues.string)
}
OR
<script src="external.js"></script>
<script>
getString("#{testMBean.getName()}")
</script>
=====
// external.js
function getString(string) {
alert(string)
}
Related
I have a set of KPI data I need to pass over to a Javascript file from my ASP.NET project. I thought I could do so using a ViewBag... Here is what is in the controller:
public ActionResult KPI()
{
if (Session["OrganizationID"] == null)
{
return RedirectToAction("Unauthorized", "Home");
}
else
{
int orgId;
int.TryParse(Session["OrganizationID"].ToString(), out orgId);
var user = db.Users.Find(User.Identity.GetUserId());
var organization = user.Organizations.Where(o => o.OrganizationID == orgId).FirstOrDefault();
var reports = db.Reports.ToList();
try
{
var org_reports = (from r in reports
where r.OrganizationID == organization.OrganizationID
select r).ToList();
var kpi = new KPI(org_reports);
var jsonKPI = JsonConvert.SerializeObject(kpi);
ViewBag.orgData = jsonKPI;
}
catch (ArgumentNullException e)
{
return RedirectToAction("Unauthorized", "Home");
}
}
return View();
}
From the View I've tried using hidden values, and also just passing them in as parameters when calling the script:
<input type="hidden" id="orgData" value=#ViewBag.orgData>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="~/Scripts/KPIs.js">
orgData = #ViewBag.orgData;
</script>
I then want to read this value in my JS script and parse it into JSON from the string:
function myFunction(){
var test1 = JSON.parse(document.getElementById('orgData'); // Doesn't work
var test2 = JSON.parse(orgData); // Doesn't work
}
It doesn't appear that any of these methods are working. What is my mistake here?
You should use Html.Raw, to avoid ASP.NET to escape your value:
orgData = #Html.Raw(ViewBag.orgData);
Also, if this is a Json, it is also a valid JS object, so you don't need to parse, it already is a JS Object.
It looks like you forgot the quotes.
<input type="hidden" id="orgData" value=#ViewBag.orgData>
should be
<input type="hidden" id="orgData" value="#ViewBag.orgData">
Also the code inside your script tag will never get executed because the script tag has a src attribute on it. Code inside script tags with src attributes never gets executed.
<script type="text/javascript" src="~/Scripts/KPIs.js">
orgData = #ViewBag.orgData;
</script>
should be changed to
<script type="text/javascript" src="~/Scripts/KPIs.js" />
<script>
orgData = #ViewBag.orgData;
</script>
I solved it! Pass the KPI model through the view and then it's as easy as:
var orgData = #Html.Raw(Json.Encode(Model));
Thanks to all to offered help.
Is it possible to get out the code that is inside a json file? You can have a look at it here: http://www.bryzgalov.directadvert.ru/show.cgi?adp=768&json=4
What is the code or method should I use to put the html code inside any raw div?
I tried to use jsonp, but there is a mistake:
unexpected token <
<script>
function myFunction(data){
var arr = JSON.parse(data);
document.getElementById('advBlock').innerHTML = arr;
}
</script>
<script type="text/javascript" src="http://www.bryzgalov.directadvert.ru/show.cgi?adp=768&json=4&callback=myFunction"></script>
The JSONP data is already a Javascript object, not a JSON string, so you don't need to parse it:
<div id="advBlock"></div>
<script>
function myFunction(data) {
document.getElementById('advBlock').innerHTML = data;
}
</script>
<script src="http://www.bryzgalov.directadvert.ru/show.cgi?adp=768&json=4&callback=myFunction"></script>
<div id="advBlock"></div>
<script src="http://www.bryzgalov.directadvert.ru/show.cgi?adp=768&json=4&callback=myFunction"></script>
<script> function myFunction(data) { document.getElementById('advBlock').innerHTML = data; } </script>
You have to add the script before your function call.
How do I pass a variable to a javascript file?
Here is the call to my js file that I have on my page:
<script src="../js/myfilename.js"></script>
Here is the value that I want to pass into the javascript file:
language_value_xxx = "uk";
Here is the trimmed down javascript file (myfilename.js):
(function (language_value_xxx) {
....
language: language_value_xxx,
....
1.
<script> language_value_xxx = "uk"; </script>
<script src="../js/myfilename.js"></script>
2.
<script data-lang='uk' src="../js/myfilename.js"></script>
// filename.js
var lang = []
.slice
.call(document.querySelectorAll('script'))
.pop()
.dataset
.lang
;
Anyway, this methods are not a good practice at all )
So Im building a set of functions to call inside a page. They all reside inside a file "seeingPlotFunc.js" and I call it and some of the functions inside the body of the html file. There are dome global empty arrays declared at the beginning, but when the functions that update them are called, they still return empty:
relevant code in seeingPlotFunc.js:
var seeingPlot = seeingPlot || {};
seeingPlot.jsondata1 = [];
seeingPlot.initialData = function () {
d3.json(seeingPlot.initialphp1, function(error1, data1) {
// after getting the data it's parsed into array
data1.forEach(function(d){
d.date = seeingPlot.parseDate(d.date);
d.f_tok = +d.f_tok;
seeingPlot.jsondata1.push(d);
})
})
}
and the relevant code in the html file:
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script language="javascript" type="text/javascript"
src="JS/seeingPlotFunc.js"></script>
<script type="text/javascript">
seeingPlot.initialData();
console.log(seeingPlot.jsondata1);
</script>
</body>
and it returns an empty array. If I call it just after pushing all the data into the array it returns the proper value. I've been banging my head with this one for some LONG hours...
I think the function in d3.json gets called asynchronously. So you need wait for a callback function and only then will you get your array.
seeingPlot.initialData = function (OnComplete) {
d3.json(seeingPlot.initialphp1, function(error1, data1) {
// after getting the data it's parsed into array
data1.forEach(function(d){
d.date = seeingPlot.parseDate(d.date);
d.f_tok = +d.f_tok;
seeingPlot.jsondata1.push(d);
})
OnComplete();
})
}
And your HTML
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script language="javascript" type="text/javascript"
src="JS/seeingPlotFunc.js"></script>
<script type="text/javascript">
seeingPlot.initialData(function ()
{
console.log(seeingPlot.jsondata1);
});
</script>
</body>
I need to set a Bean value with one javascript return value.
Something like:
<script type="text/javascript">
function getUserId(){
return 4;
}
</script>
<h:inputText name="lala" value="getUserId()"/>
Thanks
I solved it.
I was using a:jsFunction tag as it follows:
<script type="text/javascript">
function getUserId(){
var user = MyCompany.get_User();
return user;
}
</script>
<a:jsFunction action="#{user.performLogin()}" name="doSiteLogin" >
<a:actionparam name="uid" value="getUserId()"/>
</a:jsFunction>
If you use the property noEscape="true" on the a:actionparam ... it call your javascript code.