I've got a dropdownlist:
<%= Html.DropDownList("ddlNames", new SelectList(Model.NameList, "ID", "Name"))%>
I've got an ActionLink:
<%: Html.ActionLink("edit", "Edit", "Members", new { area = "MembersArea", id = XXX }, null)%>
I want the value of the dropdownlist in the XXX.
So I want to use values from controls on a view in the ActionLink.
Is that possible in a simple manner?
thanks,
Filip
You can't do this because the html helpers execute at the server side while the dropdown value can change at the client side. The only way to achieve it is to use javascript. You could register for the onchange event of the dropdown and modify the value of the href of the anchor:
$(function() {
$('#ddlNames').change(function() {
var value = this.value; // get the selected value
// TODO: modify the value of the anchor
});
});
This is probably not the best solution because the routes are configured on the server side and in order to modify the value of the link you need to do some string manipulation on the client side.
As an alternative you could use a form and a submit button instead of an anchor. This way the selected value of the dropdown will be automatically sent to the server and you don't need any javascript:
<% using (Html.BeginForm("Edit", "Members", new { area = "MembersArea" })) { %>
<%= Html.DropDownListFor(x => x.SelectedName,
new SelectList(Model.NameList, "ID", "Name"))%>
<input type="submit" value="Edit" />
<% } %>
Instead of modifying the value of the anchor every time a relevant dropdown is changed, just modify it once, on click.
Example using Razor:
#Html.DropDownList("DropDownFirstNames", new SelectList(Model.FirstNames, "ID", "Name"))
#Html.DropDownList("DropDownLastNames", new SelectList(Model.LastNames, "ID", "Name"))
#Html.ActionLink("Submit name", "ActionName", "ControllerName", null, new { #id = "SubmitName" })
<script type="text/javascript">
$('#SubmitName').click(function () {
var first = $('#DropDownFirstNames').val();
var last = $('#DropDownLastNames').val();
var path = '#Url.Content("~/ControllerName/ActionName")' + "?firstId=" + first + "+&lastId=" + last
$(this).attr("href", path);
});
</script>
Related
I have tried multiple options that I have found on SO and elsewhere for clearing form inputs, all listed below in the code, but nothing seems to work. Is there anything specific about this form that would determine which one I should use?
<template name="CompanyAdd">
<div>
<form class="form-inline">
<div class="form-group">
{{> inputAutocomplete settings=companySettings id="companyAdd" name="companyAdd" class="input-xlarge" autocomplete="off" placeholder="Add Company"}}
</div>
<button type="submit" class="btn btn-default company-add">Add</button>
</form>
</div>
</template
Template.CompanyAdd.events({
'submit form': function(e) {
e.preventDefault();
var selection = $(e.target).find('[id=companyAdd]').val();
var company = {
ticker: selection
};
if(Companies.findOne({ticker:selection})) {
console.log("Do nothing");
} else {
Meteor.call('companyAdd', company, function(error, result) {
});
}
//event.target.reset();
//e.target.reset();
//target.text.value = '';
//template.find("form").reset();
//document.getElementById("companyAdd").reset();
}
});
Given that you have
var selection = $(e.target).find('[id=companyAdd]').val();
That is the input you want to clear and that - I assume - works, I would do:
var field = $(e.target).find('[id=companyAdd]');
var selection = field.val();
...
field.val('')
Otherwise if you wish to reset all form, go for #JeremyK`s #reset.
Your second attempt:
e.target.reset();
should work fine. If it is not working, check if there are any errors in the console and report back here.
The handler function receives two arguments: event, an object with
information about the event, and template, a template instance for the
template where the handler is defined.
In your code above you define your handler like this:
'submit form': function(e) {
You have named the event argument e, and discarded the template argument.
e is has information about the event
e.target is the form element (The event was defined on 'submit form')
e.target.reset succeeds because reset is a valid function to call on a form.
Briefly, your other attempts failed because:
event.target.reset(); event is not defined or passed in, at least not with the name event (you used e)
target.text.value = ''; target is an undefined variable
template.find("form").reset(); this fails because template is undefined. If you change your handler definition to receive the template variable, this will work (change 'submit form': function(e) to 'submit form': function(e, template)
document.getElementById("companyAdd").reset(); This fails because the element with the id companyAdd is the input element, not the form, so .reset() is undefined. You could change this to document.getElementById("companyAdd").text.value = ''
I have a table of items.
The first column of each row contains a checkbox input as part of a form.
The user can click on these checkboxes and then click submit to do bulk actions such as delete items.
I have setup (using jquery) a situation whereby on clicking the 'Add data' link in a row column, a DIFFERENT form is loaded into a third column in which a user can enter item data.
What i then want to do is use ajax to submit this second form. To do this I am using the following code:
$(document).on('submit',".add_form",function(event)
{
event.preventDefault();
var serial=$(this).serialize();
var domain=$('[name=domain]').val();
$.ajax({
url:"portfolio/transactions/"+domain+"/",
type:"post",
data: {data:serial},
success: function(dat){
$('#transactions_div').html(dat);
}
});
});
This however does NOT work, and I believe this is because html does not allow forms within forms. My assumption is that jQuery follows such standards and is getting confused when a second form is loaded into a div which is contained within another set of tags.
Given this, is what I want to do simply not possible?
THanks
Try this:
$(document).on('submit', ".add_form", function (event) {
event.preventDefault();
var serial = $(this).serializeArray();
var domain = $('[name=domain]').val();
$.ajax({
url: "portfolio/transactions/" + domain + "/",
type: "POST",
data: serial,
success: function (data) {
$('#transactions_div').html(data);
}
});
});
HTML
<form class="add_form">
<form class="secondForm">
<input type="checkbox" />
</form>
<input name="domain" type="text" />
<!-- Replace the submit-Button with a normal button -->
<input type="button" value="Send" id="send"/>
</form>
JS
$(document).on('click', "#send", function () {
var serial = $(".add_form").serialize();
var domain = $('[name=domain]').val();
$.ajax({
url: "portfolio/transactions/" + domain + "/",
type: "post",
data: serial, // serial instead of {data : serial}
success: function (dat) {
$('#transactions_div').html(dat);
}
});
});
During a form compilation i need to be able to insert a value, presenting a list of already used values (usual listbox behavior).
But i also need to be able to enter a new value, so i choosed aui:autocomplete (code below).
By default it allows selection of multiple items separated by the "delimChar" separator.
Is there any way to limit to 1 single value selection (or new value)?
var catArray = new Array();
<%for (String s : categoryList) {%>
catArray.push('<%=s%>');
<%} %>
var autoCompleteCategory = new A.AutoComplete(
{
contentBox: '#<portlet:namespace />contactOptions',
input:'#<portlet:namespace/>category',
dataSource: catArray,
delimChar: ',',
typeAhead: true,
}).render();
Making comment as the answer for better visibility:
You can remove the attribute delimchar: ',' from the following code:
var catArray = new Array();
<%for (String s : categoryList) {%>
catArray.push('<%=s%>');
<%} %>
var autoCompleteCategory = new A.AutoComplete(
{
contentBox: '#<portlet:namespace />contactOptions',
input:'#<portlet:namespace/>category',
dataSource: catArray,
delimChar: ',', // **remove this attribute**
typeAhead: true,
}).render();
I think this should work.
Also clear your browser cache before trying it :)
I have some divs that are generated dynamically with content. I add the content id to the class for the div like so:
<div class="div-1"></div>
<div class="div-3"></div>
<div class="div-6"></div>
<div class="div-8"></div>
How do I select the id for a div because I need it as a param to send via ajax. e.g. I need to get the 1 when I click on the 1st div, 3 when I click on 2nd and so on
var id = $(this).attr('class').replace('div-', '');
Or even simple
var id = this.className.replace('div-', '');
Where this points to the dom element you click on inside the click handler.
//Here instead of document it is better to specify a parent container of all divs
$(document).on('click', '[class^="div-"]', function(){
var id = this.className.replace('div-', '');
});
Try this, and remember changing "div" for your selector:
$(document).on("click", "div", function() {
var class_elem = $(this).attr("class").split("-");
var n = class_elem[1]; // This is your number
});
The correct jQuery syntax is:
$("div").click( function() {
var id = $(this).attr('class').replace('div-', '');
});
So right now I have a partial view that just has a list of possible actions, here is the main portion:
<%= Html.ActionLink("Show", "Show", new { id = dbId, css="/Content/Site.css" }) %> |
<%= Html.ActionLink("Edit", "Edit", new { id = dbId }) %> |
<%= Html.ActionLink("Delete", "Delete", new { id = dbId }, new { #class = "deleteLink" })%>|
<%= Html.ActionLink("Print", "Show", new { id = dbId, css="/Content/Other.css"}) %>
Essentially, there is a Show and and Print option, I decided it would be more convenient to not create a new view for print, and just overload the Show Action by passing an extra parameter that would tell which CSS to display, and then use ViewData to set the CSS for the view.
Is this good practice?
Should I create a new view? They are completely the same except for the CSS.
If the css is the only thing that is different, you could just include the css and set the media type to be picked up when the user prints from the browser, e.g.:
<style media="print" ...