I am declaring variable in the click of a link in MVC. Assigning it the value of the "li" text I want to access this variable in my Html page. Or we can say outside the script.
Here is the code snippet.I just want the value of name variable to be accessed on the page.
<script type="text/javascript">
$("a.commentLink").live("click", function () {
var name = $(this).closest("li").text();
});
</script>
Thanks in advance.
Place it in an element within your form, e.g.
<form>
<input type="hidden" id="name" name="name" />
And then in code:
var name = $(this).closest("li").text();
$("#name").val(name);
mainPage.jsp: Your Script page
<script type="text/javascript">
$("a.commentLink").live("click", function () {
var name = $(this).closest("li").text();
enqueue("demoPage.jsp?nameParam="+name,respAjax);
});
function respAjax(){
// You can submit or do something or leave it as it is //
}
</script>
Demo.jsp ----: here you can set value to a Session variable so that you access any
were in project or set to a URL parameter
String name = request.getParameter("nameParam");
response.sendRedirect("mainPage.jsp")
session.setAttribute("name",name);`enter code here`
OR
response.sendRedirect("mainPage.jsp?namPar="+name)
enqueue function can be accessed from ajax file --
For Ajax File : How can I convert a JavaScript variable to a Java variable?
Related
I'm trying to add an onChange event to the Kendo DatePicker and noticed that there is not an easy way to go about doing this, unfortunately.
I was able to add an override by using jQuery but I can only get this to work if I know the name of the DatePicker. I'm providing an example of this below for reference.
<!-- [ begin ] invoke onChange event -->
<script type="text/javascript">
$(document).ready(function () {
function onChanger() {
alert("Change :: " + kendo.toString(this.value(), 'd')); // show the value
document.forms['submitForm'].submit(); // submit the form
}
$("#datepicker").kendoDatePicker({
change: onChanger
});
});
</script>
<input id="datepicker" name="datepickers" />
<!-- [ end ] invoke onChange event -->
The problem is I'm looping through items which dynamically are building these DatePickers.
So my code looks like this:
#(Html.Kendo().DatePicker()
.Name("AllTeachersObjectives_" + rec.CalendarGroupID)
.Value(rec.AllTeachersObjectives)
.Max(DateTime.Now.AddYears(10))
.Events(e => e.Change("startChange"))
)
How can I dynamically invoke the onChange event from using a name of a DatePicker that is dynamic?
Any help would be greatly appreciated!
TIA
I am trying to use jquery datepicker in my project, but I want to show it when the user in editing mode. When I use it without if statement, it works perfect, but when I put in if statement, it does not render. How can I solve this?
This is the part of my template
{{#if editing_duedate}}
<input class="datepicker" name="date">
{{else}}
<div class="row text-center">
<div class="eventduedate">
{{duedate}}
</div>
</div>
{{/if}}
This where I render datepicker
Template.assignmenttodositem.rendered = function() {
$('.datepicker').datepicker();
};
This is my template events
Template.assignmenttodositem.events({
......
'dblclick .eventduedate':function(evt,tmpl){
evt.preventDefault();
Session.set('editingduedate', this._id);
}
..........
This is where I check if statement
Template.assignmenttodositem.editing_duedate = function () {
return Session.equals('editingduedate', this._id);
};
Rendered is executed only once, when template is rendered.
In that time else part is not put to HTML so .datepicker cannot be found.
You need to check whether editinduedate variable is updated and then create datePicker component.
Template.assignmenttodositem.rendered = function() {
var self = this;
this.autorun(function(){
if(Session.equals("editingduedate", self.data._id )){
$('.datepicker').datepicker();
}
})
};
HTML
<template name="assignmenttodositem">
{{#if editing_duedate}}
{{> datepicker}}
{{else}}
...
{{/if}}
</template>
<template name="datepicker">
<input class="datepicker" name="date">
</template>
JS
Template.datepicker.rendered=function(){
this.$('.datepicker').datepicker();
};
The rendered callback is executed only once when your template instance is inserted in the DOM : triggering the datepicker initialization in the enclosing template containing the #if statement is not going to work because when it is executed, we are in the else state so the input is not there yet.
To solve this problem simply, just move the datepicker in its own template (this has always been considered a good design pattern in programming anyway, whenever you can, decompose your main task in smaller easier solvable tasks), this way its rendered callback will get executed at appropriate time.
Put the datepicker in it's own template. Then initialize the datepicker in template.datepicker.rendered . If you forget the 'this' context, it will not work. Make sure your template.datepicker.rendered includes the following
this.$('#datepicker').datepicker();
where #datepiker refers to id='datepicker' of the datepicker in html.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to send multiple arguments to jQuery click function?
I want to pass multiple arguments to a Jquery function. Below is the Javascript sample code. I want to convert this javascript function to a jquery function. How can I pass that arguments into a jquery onclick event?
<a onclick="showState('state_name','state_id')">ADD STATE </a>
function showState(state_name,state_id){
openbox_state(state_name,state_id);
}
Perhaps I'd use datasets here:
HTML:
<a data-state_name="state_name" data-state_id="state_id" >ADD STATE</a>
JS:
$(function() {
...
$('a[data-state_id]').click(function() {
var $this = $(this);
showState($this.data('state_name'), $this.data('state_id'));
return false;
});
...
});
You actually don't have to jwrap the clicked object, as you can get the attribute values with either dataset API (if you have the luxury of not supporting IE9-, though) or simple getAttribute method. Yet I found this syntax more clean and readable.
The correct way is:
ADD STATE
<script type="text/javascript">
$(document).ready(function(event) {
event.preventDefault();
$('#myanchor').on('click', function() {
openbox_state( $(this).data('nm') , $(this).data('id'));
});
});
</script>
Your Jquery Code:
<script language="javascript" type="text/javascript">
var state_name=$('#txtName').val();
var state_id=$('#txtid').val();
$(document).ready(function () {
$('a').click(function(){
showState(state_name,state_id);
});
});
function showState(state_name,state_id){
openbox_state(state_name,state_id);
}
</script>
Your HTML:
ADD STATE
<input type="text" id="txtName" value="Tom Cruse" />
<input type="text" id="txtid" value="1" />
this jquery take the values from inputs, by using their id and use them as parameters to call the method.
If what you need is to pass additional data to be used in the event handler, jQuery click event binder supports this already. But in order to use it you have to bind the event handler through code instead of inline binding.
$(function(){
$('#id').click({additional : "data"},function(){ // handler code});
});
Check documentation: http://api.jquery.com/click/
I know this may have something to do with the phase each one comes in at.
If I do this.
<ui:repeat id="repeatChart" varStatus="loop" value="#{viewLines.jflotChartList}" var="jflotChart">
<p:panel>
<jflot:chart height="300" width="925" dataModel="#{jflotChart.dataSet}" dataModel2="#{jflotChart.dataSet2}"
xmin="#{jflotChart.startDateString}"
xmax="#{jflotChart.endDateString}"
shadeAreaStart ="#{jflotChart.shadeAreaStart}"
shadeAreaEnd ="#{jflotChart.shadeAreaEnd}"
lineMark="#{jflotChart.wrapSpec.benchmark}" yMin="#{jflotChart.yMin}" yMax="#{jflotChart.yMax}" />
</p:panel>
<br />
</ui:repeat>
My code will not work. Debugging the javascript shows that the same id is generated for every iteration. I've tried putting loop.index to create an id and that gives me an error saying that id can't be blank.
If I exchange the ui:repeat for a c:forEach it works fine. Debugging the javascript shows that a new id is created for each iteration.
Here is my backing code(some of it).
<div id="#{cc.id}_flot_placeholder" style="width:#{cc.attrs.width}px;height:#{cc.attrs.height}px;">
<script type="text/javascript">
//<![CDATA[
$(function () {
var placeholder = $("##{cc.id}_flot_placeholder");
var overviewPlaceholder = $("##{cc.id}_flot_overview");
The id needs to be different so the javascript can render to the correct div. I've tried explicitly defining an id attribute and then passing that as the id in the client code. Like I said before that doesn't work. Thanks for any help.
**EDIT**
Here is my problem. I can't use the clientId in the div tag because of the colon character obviously. I have modified it in javascript but how would I get that value to the div. I can't get the div tag by id because I need to generate the id. I can't seem to do a document.write() either. I'm stuck at this point.
<composite:implementation>
<div id="#{cc.clientId}_flot_placeholder" style="width:400px;height:400px;">
<script type="text/javascript">
//<![CDATA[
$(function () {
var clientIdOld = '#{cc.clientId}';
var clientId = clientIdOld.replace(':', '_');
var placeholder = $('#'+clientId+'_flot_placeholder');
var overviewPlaceholder = $('#'+clientId+'_flot_overview');
I did a quick test on local environment (Mojarra 2.0.4 on Tomcat 7.0.11). Using #{cc.clientId} gives you an unique ID back everytime.
<ui:repeat value="#{bean.items}" var="item">
<cc:test />
</ui:repeat>
with
<cc:implementation>
<div id="#{cc.clientId}_foo">foo</div>
</cc:implementation>
Here's the generated HTML source:
<div id="j_idt6:0:j_idt7_foo">foo</div>
<div id="j_idt6:1:j_idt7_foo">foo</div>
<div id="j_idt6:2:j_idt7_foo">foo</div>
This should be sufficient for your functional requirement. You might only want to escape the default separator : or to replace it by a custom separator since it's a reserved character in CSS selectors.
Update: so you want to escape it, you should then replace : by \: and not by _.
var clientId = clientIdOld.replace(/:/g, '\\:');
(the /:/g is a regex which ensures that all occurrences will be replaced and the double slash is just to escape the slash itself in JS strings, like as you normally do in Java strings)
I am trying to install the jQuery UI autocomplete on my website. I have it up and working but I want it to automatically submit the search form when someone clicks on an option. The default behavior seems to be that it just fills out the form with the selected item and then the user must click the submit button. I want it to just automatically redirect like Google. I'm running PHP 5.+ and MYSQL 5+ and jquery.1.4.2 and jqueryui.1.8.6.
Here is the javascript:
<script>
$(function() {
$( "#query" ).autocomplete({
source: "/scripts/autocomplete_handler.php",
minLength: 2,
select: function(event, ui) {
$('#query').val(ui.item);
$("#results").text(ui.item); // for testing purposes
$('#search_form').submit();
}
});
});
</script>
Here is the form:
<form name="search_form" id="search_form" action="search.php" method="get">
<input type="text" name="query" id="query" />
<input type="submit" value="Search" />
</form>
<code id="results"></code>
As you can see, I am trying to change the value of the input field "query" using $('#query').val(ui.item). The problem is that when I select an autocomplete option $_GET['query'] becomes [object Object]. i.e. My website searches for the string "[object Object]" instead of the value that I clicked.
At the bottom of the form there is a code tag with id "results". I also can't get this to populate with the text(ui.item). If anyone could help it would be much appreciated, I'm sure I'm not the only one who wants this type of Google like functionality in their autocomplete, but I can't find any examples anywhere.
Try this in your select function:
$('#query').val(ui.item.value);