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/
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 have a text input and want to focus upon init. But nothing happens when the code is run. Any idea? I am using jquery mobile 1.4.0
<input type="text" name="txb" id="txb" value="" data-clear-btn="true" data-mini="true"/>
<script>
$('#home').on('pageinit', function () {
$('#txb').focus();
Put it in the pageshow event.
$(document).on("pageshow", "#page1", function(){
$('#txb').focus();
});
DEMO
I'm using the jquery ui autocomplete for my jquery-mobile site. It is working without problems, als long as I open the site directly.
If i navigate to the side with ajax navigation it doesn't work.
Edit testable example:
<div data-role="page" data-theme="b" id="main" data-add-back-btn="true class="main"">
<div data-role="content">
<input type="search" name="search" id="search" value="" />
</div>
<script>
$('#main').live('pagecreate',function(event, ui) {
var availableTags = [
"Testone",
"Testtwo",
"Testthree"
];
$( "#search" ).autocomplete({
source: availableTags,
minLength: 2,
});
});
</script>
</div>
I have a jQM site with autocomplete, and hit a similar issue: the ajax call triggered to populate the autocomplete options wasn't always done by the time the page wanted to fire the autocomplete code itself.
I put this down to the nature of the Javascript being triggered (i.e. it's asynchronous, so you take your chances…).
Now, this is a bit of a hack I know, but adding a wee time-out worked for me (you will need to experiment with the time period). In my app I have something like this after my jQM $(document).bind("mobileinit"... code:
<script type="text/javascript">
$(function(){
// Horrible, but necessary
setTimeout(doAutoComplete, 2500);
});
function doAutoComplete(){
$( "#YOUR_FIELD_ID" ).autocomplete({
// Your ac code here…
});
}
</script>
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?
I am tryng to use this: http://jqueryui.com/demos/dialog/#modal-form
I have:
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog();
$("#dialog").dialog('close');
$('.myPop').click(function() {
$("#dialog").dialog('open');
});
});
Which allows me to pop-up on the click of '.myPop' which is just a temp input button in my list which is working:
<button type="button" class="myPop"></button>
My question is - what is the best way to use this pop-up to go to the Edit method of my controller, populate controls and then be able to save back to the model and refresh the list page?
I want to keep with best practice in ASP.Net MVC please.
Am I beetr maybe using this? http://dev.iceburg.net/jquery/jqModal/
Thanks
There's obviously a bunch of ways to do that, but here's how I would solve it. Perform an ajax call before loading the dialog to populate the dialog's contents, show the dialog, than on save close the dialog and refresh the grid. Those are the basics, there's some helper code below. I find it a good practice to return a json result from the save action to determine if the saved was successful, and if not an error message that indicates why it failed to display to the user.
<div id="dialog" title="Basic dialog">
<!-- loaded from ajax call -->
<form id="exampleForm">
<input blah>
<input type="button" onclick="Save()" />
</form>
</div>
<script>
$(function() {
$('.myPop').click(function() {
$.get("editController/loadContents", function(data){
$("#dialog").html(data);
});
$("#dialog").dialog('open');
});
});
function Save(){
$.post("/editController/Edit", $("#exampleForm").serialize(),
function(data){
$("#dialog").dialog('close');
//update grid with ajax call
});
}
</script>