simple html value for nested form - ruby-on-rails-3

I'm using rails, and backbone with handlebars, and I have a nested form.
I am trying to create a user, and the user can supply a url.
So I have a user model and a url model
I thought I could do something like this
<form id="new_user">
<label name="username" >username</label>
<input type="text" name="username" />
<label name="url" >url</label>
<input type="text" class="nested urls_attributes" name="url" />
</form>
----------------------update -----------------------------------------
as this is something that will be seldomly used, I've updated my backbone view to create the correct json when I submit the form, so now on submit form, I create the first json, then add the nested object.
var form_json = MyApp.Helpers.Serialize_Form($('form#user_form inputs').not('.nested'));
form_json['urls_attributes']=MyApp.Helpers.Serialze_Form($('form#user_form inputs.nested'));
this creates the json in the format of
{username: "test", urls_attributes: {url:"http://test"}}
So when I pass that to my controller, I expected that the url would be created when the user is created.
Unfortunately, that doesn't seem to be happening, and I have no errors. The user gets created, but not the nested model of urls.
Any idea why this is happening?
-----------how I make the json----------------------
I convert my form into a json object with
serialize_objects: function(inputs){
//this takes form inputs and creates a json string of them
var o = {};
$.map(inputs, function(t) {
if (o[t.name] !== undefined) {
if (!o[t.name].push) {
o[t.name] = [o[t.name]];
}
o[t.name].push(t.value || '');
} else {
o[t.name] = t.value || '';
}
});
return o;
}
I can't use jquery serializeArray because I'm using jqMobi which doesn't implement serializeArray. But that shouldn't matter for this question.

Related

Render form after method completion in VueJS

I am facing a problem with my page with VueJS. It's a page for different translations of the website. It has a dropdown on the top for the language selection that once switched will update the fields with the current language.
The problem starts when it loads, because my form is like this:
<form id="trForm">
...
<input type="text" name="header_title" class="form-control" v-model="translations.header.header_title" />
...
</form>
It's trying to access these attributes before the method returns any data, but somehow it will still show the data once it is complete, but it becomes troublesome when I try to switch the language, it won't because of this problem and also, if I do the following:
<form id="trForm">
...
<input type="text" name="header_title" v-if="translations.header" class="form-control" v-model="translations.header.header_title" />
...
</form>
on each field, those that aren't populated will display no field at all for a new input value. I tried something like translations.features || '', but no success.
I also tried to put on the parent block a condition that if the loading is false will display the form, but since the page is loaded first than the method is executed, it will always be false for the first microsecond.
methods: {
fetchTranslations(e) {
let vm = this;
vm.loaded = false;
$.get('/ajax/admin/translations', { 'locale': e }).done((data) => {
if (data.success) {
vm.translations = JSON.parse(data.translations.translation);
vm.loaded = true;
} else {
toastr.error('Something went wrong');
}
});
},
Please, what do I do? It'd be good to show the form after there is data.
Introduce a new variable, e.g. loaded that defaults to false
Use this variable as a v-if condition on the form
In the callback of your data fetch, set loaded to true.

aurelia-validation with custom element

I created an input form with aurelia-validation plugin which worked perfectly.
Now I created a custom element to replace the input type textbox.
I'm trying to validate the new custom element value, by setting the value attribute with the "validate" keyword - but the custom element input value isn't validated.
It seems like the Validation Controller is not binded to the custom element.
The bindings array of the Validation Controller doesn't contains the custom element.
Maybe this is related to the actions that should trigger the validation (blur\focus out), so I added dispatching of blur event, but it still doesn't work. As mentioned - it worked perfectly when it was a regular element.
Here is the relevant code (un-needed code was removed):
custom element template:
<template>
<label>
${title}<input name.bind="fieldName"
title.bind="title" focusout.trigger="focusoutAction()" />
</label>
</template>
custom element relevant viewmodel code:
#bindable onFocusout;
...
bind(bindingContext) {
var input = this.element.getElementsByTagName("input")[0];
input.type = this.customType || "text";
input.placeholder = this.placeHolder || "";
//input.value.bind = bindingContext.registration.firstName & validate;
}
...
focusoutAction() {
var customEvent = new CustomEvent("blur");
this.element.dispatchEvent(customEvent);
this.onFocusout();
}
Relevant container(parent) view code:
<form-input name="firstName" id="firstName" title="First Name" bind-
value="registration.firstName & validate" field-name="firstName" on-
focusout.call="validateInput()" />
And the relevant viewmodel code:
ValidationRules
.ensure(r => r.firstName).displayName('first
name').required().withMessage(`\${$displayName} cannot be blank`)
.satisfiesRule('FirstNameValidation')
.ensure(r => r.lastName).displayName('last
name').required().withMessage(`\${$displayName} cannot be blank`)
.satisfiesRule('LastNameValidation')
validateInput() { this.getValidationError(event.target.name); }
getValidationError(propertyName) {
let error = this.getValidationFirstError(propertyName);
....
}
getValidationFirstError(propertyName)
{
if (this.controllerToValidate.errors !== null &&
this.controllerToValidate.errors.length > 0) //This is 0 !!!!!
}

RIOT.JS: Showing an element depending on input value

I would like to do something like this:
<input type="text" value={ value1 } >
<input if={ value1 != ''} type="text">
So, adding to DOM the second input when the first input has any value different than empty. I know 2-way data binding is not supported by Riot.js
I have tried to do the following:
<input ref="first" type="text" >
<input if={ this.refs.first.value != '' } type="text">
But it does not work.
You are correct, Riot does not do 2-way data binding for reasons I'll leave to the reader to research. It's fascinating stuff, but in my opinion, most web development can be made drastically simpler by following a few simple patterns. Riot is great for this reason. Simply put, the tag is just markup with event listeners that can update the tag.
<my-tag>
<input name='username' type='text' onKeyup={ checkVal } value={ opts.val }>
<input if={ usernameEntered } name='password' type='password'>
<script>
this.checkVal = (event) => {
this.usernameEntered = event.target.value !== ''
// this.update() is implicitly called in event listeners
}
</script>
</my-tag>
In your case (I don't know your exact use case), you may want to populate the first input element with a value passed into the tag (opts.val). Then we can assign some variable (usernameEntered) in an event listener (checkVal) and update the tag.
See Riot JS Guide for more detailed examples

Pass data from view to controller method

I need to use the name of the current view in a method in my controller
I am able to get the name with the code below in my view.
I will like to pass this #ViewData["pageName"] to my MakeChange action result
in my controller. Each time I step through the MakeChange method all I get
is "object reference not set to an instance of an object"
How can I pass data from my view to controller method ?
#ViewData["pageName"] = #Path.GetFileName(Server.MapPath(VirtualPath))
public ActionResult MakeChange(string lang)
{
string getPageName = ViewData["pageName"].ToString();
return RedirectToAction(getPageName, "Home");
}
You can't pass data from view to controller using ViewData. You can use ViewData to pass data from Controller to your view.
To achieve what you want, you can do as follows:
<input type='hidden' name='lang' value='#Path.GetFileName(Server.MapPath(VirtualPath))' />
<input type='submit' value='send'>
Ps: you should put the input's inside a form tag.
Path.GetFileName(Server.MapPath(VirtualPath)) will give you the razor view name with extension (Ex : index.cshtml). You can not use that with RedirectToAction method as RedirectToAction method is looking for an action method name. You need to trim down the file extension part before using it.
To send this to the controller action, you can keep the value inside a hidden field inside your form. When user posts the form, it will be available in your HttpPost action method. You need to make sure that there is a parameter which has same name as the hidden field's name value.
#using (Html.BeginForm())
{
<input type="text" name="lang" value="English" />
<input type="hidden" name="pageName"
value="#Path.GetFileName(Server.MapPath(VirtualPath))" />
<input id="BtnAdd" type="submit" value="Save" />
}
So your action method will be
public ActionResult MakeChange(string lang,string pageName)
{
var viewName=pageName;
//Get rid of the extension.
viewName = viewName.Replace(".cshtml","");
return RedirectToAction(viewName , "Home");
}
Even if you are doing an ajax post, it will still work, just serialize your form and send it
$("#BtnAdd").click(function(e){
e.preventDefault();
var _this = $(this);
$.post("#Url.Action("MakeChange","Home")",_this.closest("form").serialize(),
function(response){
//do something with response
});
});
There are more clean ways of getting the view name without the file extension trimming approach we did. Take a look at this answer.

How to Set value for Hidden field in Razr MVC

In my application I need to pass some values from one page(page A to Page B) to another page.
For this I am using Session variables(I cannot use Tempdata as it doesn't work on loadbalancing).
In Page A I am setting the Session Variable.
In Page B I need to retrieve the above Session variable.
For this I am using a Hidden field in Page B.
I dont know how to set the Session Variable to Hidden Field in Page B.
Page A
[HttpPost]
public JsonResult GetFileName(string updatedfileName, string orgfileName)
{
Session["OrgFileName"] = orgfileName;
Session["UpdatedFileName"] = updatedfileName;
var result = myService.getFile(updatedfileName, orgfileName);
return Json(result, JsonRequestBehavior.AllowGet);
}
Page B
<div style="display:none" >
<input type="hidden" value="" id="hdnfilename" />
</div>
In the controller of "Page B", set a ViewBag.MyValueto your session variable and apply it to the hidden's value.
Controller
ViewBag.MyValue = Session["MYVALUE"];
View
<input type="hidden" value="#ViewBag.MyValue" id="hdnfilename" />
If you need to get a session variable from JavaScript, you will need to develop an action that will return the session variable and consume it with JavaScript/jQuery, like this:
// Controller code
[HttpGet]
public JsonResult GetSessionVarValue(string key)
{
return Json(new { key = key, value = Session[key] }, JsonRequestBehavior.AllowGet);
}
// JavaScript code
var mySessionValue;
$.getJSON("/GetSessionVarValue", "MYKEY", function(data) {
mySessionValue = data.value;
});
You may take care with Session variables in load balance, too. The best way to secure store session variables is changing the state of session mode configuration to StateServer. http://msdn.microsoft.com/en-us/library/ms178586.aspx