How can I get the value of my bean to display from my javascript file?
My bean - dBean.strIssueDate
In the $(document).ready(function() of my jsp, I set the following:
$('#content').data("strIssueDate", "<c:out value="${dBean.strIssueDate}"/>");
My problem is that the date is updated (and it's correctly updated in the database), but I would like to call the value from the javascript file.
The update begins with a checkbox on another jsp page, which updates the data value via a java file, and then triggers the function in the javascript file, which is where my alert is called.
My (incorrect) code in the javascript file (which is not between tags, but just a file consisting of only js:
alert("${dBean.strIssueDate}");
which shows on the alert as ${dBean.strIssueDate}
I've tried removing the double quotes, substituting for single quotes, swapping the $ for a #, but nothing seems to work.
Looks like you are using JQuery and have already set the date on the #content so what about this.
alert($("#content").data("strIssueDate"));
Related
I have asp.net drop down list but I want to load previous classic asp page value into index of the drop down list using Java script.
I can able to take the previous page value with use of Java script.but I am unable set into asp drop down index when page is loaded. Drop down list showing only data from data base not from Java script value.
Protected void page_load()
{
this.BindCountrydropdown();
}
Protected void BindCountrydropdown()
{
/*I have written stored procedure to load values using Data adapter and data table*/
this.ddlCountry.DataTextField=“Countryname”;
this.ddlCountry.DataValueField=“CoubtryID”;
this.ddlCountry.Databind();
}
In .aspx page. Java script:
<script>
function loadpreviouspagevalues()
{
document.getElementById(“ddlCountry”).value=window.opener.parent.document.getElementById(“CountryName”).value;
}
</script>
<body onload =“ loadpreviouspagevalues()”>
<asp:DropDownList ID=“ddlCountry” runat =“server”> </asp:DropDownList>
...
Country name should loaded into ddlCountry index values.
First of all, there are multiple errors just in your javascript function.
function loadpreviouspagevalues(){
document // should not be a capital "D"
.getElementById // No Extra "." should go after this
("ddlCountry").value = window.opener.parent.document.getElementById("CountryName").value;
// I am also skeptical about the inverted commas that you have used here. These are not surely correct
}
Change these and test. Also, when dealing with JavaScript, it is crucial to check browser console to see if any error is there and resolve it accordingly.
I see, you are fetching the value from another page, I would suggest you first validate if the value is properly being returned or not. If it is, then there is the syntactical issue that you need to fix in JavaScript.
What is the best way to pass HTML data to server.
I have a htmlPage which has a div.I want to pass the innerHTML of this div to the server so that I can save it in session and recreate that div later during the edit flow.
I have created a hidden field:
<input type="hidden" name="selectedTemplateHtml" id="selectedTemplateHtml" />
In this hidden field I want to set the HTML of that div and post to server.
Please suggest.
I tried simple passing the html from div using $("#divName").html() but when in edit flow we retrieve the stored value it gives exception since it is not able to store the html in the javascript variable as the HTML spans many lines.
Please suggest.
In my case I am able to post the request with newlines and I am able to get back the html which I had posted but when I try to store it back in a javascript variable due to new line characters and double quotes it gives error
#Alexander
Following code is used to display html in edit flow:
cdHtml="${postAdBean.cdHtml}";
templateId="${postAdBean.templateId}";
$("#"+templateId).html(cdHtml);
It gives exception in browser console on the first line ie.:
cdHtml="${postAdBean.cdHtml}";
This is because it is not able to convert the html returned from server to a javascript string.
Okay I got it to work thus:
From client before setting the html in hidden field I encode it :
selectedTemplateHtml=encodeURIComponent(selectedTemplateHtml);
$("#selectedTemplateHtml").val(selectedTemplateHtml);
This is neccessary to escape certain characters like & in the HTML which may otherwise cause issues.
In java:
String
cdHtml=URLDecoder.decode((request.getParameter("selectedTemplateHtml")),"UTF-8");
cdHtml=cdHtml.replace("\n"," ").replace("\r", " ").replace("\t", " ");
cdHtml=cdHtml.replace("\"", "\\\"");
ie. first i decode the html then replace all the newline characters and escape the double codes. Then i send the html back to browser and it is readily assignable as in javascript without any issues.
With RichFaces it is possible to execute a JavaScript function when a single row is selected (via a click on the row) and passing the selected row number as a parameter like this:
<rich:extendedDataTable
rowKeyVar="row"
onRowClick="executeMeOnRowSelection(#{(row})"...>
I need to migrate this to Primefaces. According to this question Primefaces itself does not provide this functionality, but one can use Primefaces Extensions. However, when I try it like this:
<p:dataTable rowIndexVar="row" selectionMode="single">
<pe:javascript event="rowSelect" execute="executeMeOnRowSelection(#{(row})"/>
...it would seem that Primefaces generates a JavaScript callback that does not get the selected row number, but is always called with the first row number (a look at the generated page reveals a hard coded value for the function parameter of the executeMeOnRowSelection).
Edit: To be more precise, the #{row} variable seems to not be evaluated when used directly under the p:dataTable tag. It is correctly resolved when used inside a p:column tag, but both
<pe:javascript event="rowSelect" execute="executeMeOnRowSelection(#{(row})"/>
and, for that matter,
<p:ajax event="rowSelect" oncomplete="alert(#{row});" />
end up with #{row} being replaced with an empty string (both placed as direct children of the p:dataTable tag).
Is there an error in the way I use the pe tag in combination with p:dataTable? Is there an alternative solution?
I have a form in rails app with a field for choosing a city and saving it's id.
= select_tag 'building[city_id]',
options_for_select(cities.map{|c| [c.name, c.id]}),
onchange: "myFunction();", include_blank: "Choose city"
I want to save a city name in a hidden_field_tag as soon as the user chooses something from a select tag. How do I implement this with Javascript?
I'm very new to Javascript, please don't judge hard.
I suggest doing as little JS as possible. So:
Start by adding the hidden field (with a null value) in your Rails view.
Now you'll need to add Javascript to your pages (you may already have a file at app/assets/javascripts/application.js which is included with all your pages; including JS with your Rails templates is its own question). You'll need two functions, and jQuery will make life a lot easier:
A function which checks the value of the select tag, and updates the value of the hidden tag with the value from the select tag.
A function which runs at page load time which attaches an event listener to the select tag; this will listen for the "change" event on the "select" tag and call our first function when it sees it.
These will look something like this (N.B. this code will almost certainly not work for you without changes):
function setHiddenValue() {
// Get the value from the select tag
var selectValue = $('select#building_city_id').val();
// Set the hidden tag's value to the select tag value we got in the last line
$('input[type=hidden]#city_name').val(selectValue);
}
I'm guessing at the selectors for getting the elements, but Rails is putting IDs on them which you can use.
$(document).ready(function () {
$('select#building_city_id').on('change', setHiddenValue());
}
Obviously this is rough and will not work immediately on being pasted in. You'll want to be sure the selectors match what Rails is putting in your HTML, you'll want to be sure the scripts are getting included in your page and the event listener is being set, you'll need to check that jQuery is present, and you'll want to be sure the setHiddenValue function gets the correct value to put in the hidden form tag. But this is how I'd start out on what you're trying to do; the rest is details which are particular to your page.
I am open to a different way to do this, but what I have seems like it should work from the documentation for RichFaces4 and JSF2.
The user flow is like this:
1) There is a 'Check Out' document link implemented with h:outputLink
2) The user clicks it and gets prompted with a dialog to enter check out comments implemented with rich:popupPanel
3) The user enters comments and clicks 'Continue' Button on the rich:popupPanel implemented with h:link (tried h:commandLink and a4j:commandLink also)
4) A new window pops up with the contents set to the h:link outcome attribute
In my broken case, everything works except when I pass a parameter from h:link
with a4j:param, whose value attribute does not resolve the javascript it points to correctly.
<h:outputLink id="promptForCommentsLink"
onclick="#{rich:component('commentsDlg')}.show();return false;"
value="#"> Check Out </h:outputLink>
<rich:popupPanel id="commentsDlg" modal="true">
<h:inputTextarea id="commentsId"/>
<h:link id="continueLink"
outcome="editorPage" <!-- editor for making changes to document -->
target="_blank" <!-- open in it;s own indow -->
value="Continue Check Out"
onclick="#{rich:component('commentsDlg')}.hide();">
<!-- these params get assignd to backing bean properties -->
<a4j:param name="dataId"
value="#{ithRow.id}" assignTo="#{myController.dataId}"/>
<a4j:param name="checkedOut"
value="true" assignTo="#{myController.checkedOut}"/>
<!-- this one is broken. assigns chars 'document.getElementById('..
to #{myController.checkOutComment} -->
<a4j:param name="checkOutComment"
assignTo="#{myController.checkOutComment}"
noEscape="true"
value="document.getElementById('myForm:dataTable:0:commentsId').value"
/>
</h:link>
</rich:popupPanel>
I was thinking maybe
document.getElementById('myForm:dataTable:0:commentsId').value
didn't point to what I typed into the textarea, but by putting another button on the dlg and pointing it's onclick to the same element id, it did indeed alert me with what it typed.
When I stop on the server side view scoped myController.setCheckOutComment(String s) method, it gets passed the string "document.getElementById('myForm:dataTable:0:commentsId').value"
According to RF4 documentation:
The a4j:param tag can be used with non-Ajax components in addition to Ajax components. This includes components which are working through the GET request, such as the h:link
and
Variables from JavaScript functions can be used for the value attribute. In such an implementation, the noEscape attribute should be set to true. Using noEscape="true", the value attribute can contain any JavaScript expression or JavaScript function invocation, and the result will be sent to the server as the value attribute.
Since I seem to be playing by the jsf/rf4 rules, I thought this would be okay.
One thing to note, if I use a4j:commandLink instead of h:link, it does indeed
send the result of javascript evaluated, however, that breaks the opening in its own window
and a few other issues.
Any thoughts on what might be happening, or even a better way to do this?
You could use a a4j:jsFunction with the parameters you need. Then call that function from the onclick in the h:link tag like setParams(#{ithRow.id}, true). Problem remain that you can't pass the value as a parameter to the javascript function. You could though use 'execute' to save the value of the inputArea to a backing bean and let the backend handle the value.
So yes, I would do it differently. I think you could handle the two other params at the backend and I would use 'execute' to store the value of the inputArea.
MAG,
Milo van der Zee