I am using Rails 3.0.5
I have a javascript code that uses jQuery dropdown checklist and I would like to have the checkboxes displaying which item is checked already and which is not, when using my form in the 'Edit' action of my belongings controller.
Basically, it can work like this in Javascript:
$('element').val([1,3,4]);
$('element').dropdownchecklist();
Let us say that in my controller, edit action, I have a instance variable called #selected_items that contains the items that are selected (here: #selected_items = [1,3,4]) and I would like to use the value of this instance variables into my Javascript code, how could I proceed ? How could I access the value of this instance variable in a .js file ?
Many thanks for your answer !
Just write the javascript in your view, and at the appropriate place, print the #selected_items array as json:
app/views/*/*.html.erb
<script>
$('element').val(<%= #selected_items.to_json %>);
$('element').dropdownchecklist();
</script>
You can also use the Gon gem if to_json cannot serialize more complicated objects.
A better and a clean/neat way of handling such requirements is
1.Don't create javascript inside the views not as per the rails
best practices
2.Handle it this way
In your app/views/*/*.html.erb
where you are having the instance variable like (#selected_items) assign it into the options within the helpers something like :sel => #selected_items
In your javascript
<script>
$('element').attr('sel');
$('element').dropdownchecklist();
</script>
I hope it helps!
Related
I have one java script object which is iterating through handlebars. When I write {{this.prop}} this shows me "/bla/bla".
I want to update this property so that when I use {{this.prop}} it should return /alpha/bla/bla. I am looking for client-side manipulation. How can I do the same?
Thanks,
Try using: src="'/alpha{{this.prop}}"
I am using laravel 4 and I want to pass a data with a view.
I have used this code in a controller.
$view = View::make('settings.editEvent');
$view->bounderyData = $bounderyData;
And I want to check whether this data exists or not in the view settings/editEvent.blade.php
Tried using this..
<script>
if('{{$bounderyData.length()}}'!=null)
console.log('exists');
</script>
Error :
Array to string conversion error
How can I check the existence ?
Do not assign the data to the View variable, but instead, pass it along using with as Laravel requests you to use:
$view = View::make('settings.editEvent')
->with('bounderyData', $bouderyData);
Actually both of the snippets work the same way. You can either pass data using with() method or by assigning it to view as property. So it doesn't really matter. But it looks like you are using some weird syntax because you are trying to access method length() using dot syntax inside Blade echo statement. Try:
if({{count($bounderyData)}}!=null)
console.log('exists');
or something similar. Remember that everything inside {{}} is going to be echo'ed by PHP. So if you have some sort of array there you may either want to count number of elements or maybe cast it to JSON and then decode it inside Javascript. If you still have problem, let us know what is the issue.
I have a JSON object that I used to create a form. This JSON object is parsed by KnockoutJS.
Now, when I modify the form, I want the JSON object to be updated according to the modifications made in the form. The thing is that I don't know in advance how the form will be like but I know in the JSON Object which fields need to be updated.
I really don't know what is the best way to procede. I know that I could reconstruct the JSON Object each time something has changed but this seems like a bad idea and a tedious process.
Is there a simple way to map each JSON Object field to form items in KnockoutJS ?
Here's a JSFiddle of what I'm currently doing:http://goo.gl/ZBaV7
Update :
I realized something interesting with this line:
<input type="text" data-bind="value: $data.value, attr : { disabled: $data.disabled }" />
I'm accessing the value directly from the array via ($data.value). Is there a way in the html to say to knockout to bind to this particular attribute in the array. I know that if the array would get reordered everything would get messed up but since I know that the only thing that can changed is this property I'm ready to take this risk ?
In other words, is there a way to manually say that when this value changes to change it in the array such as
data-bind="onChange: $data.value = this.value"
Is there a simple way to map each JSON Object field to form items in
KnockoutJS ?
Yes, If I understand what you want to do correctly. As of now, the values in your view model are not observables and won't be updated automatically as the form values change. There is a plugin to handle this mapping.
http://knockoutjs.com/documentation/plugins-mapping.html
Example: Using ko.mapping
To create a view model via the mapping plugin, replace the creation of
viewModel in the code above with the ko.mapping.fromJS function:
var viewModel = ko.mapping.fromJS(data);
This automatically creates observable properties for each of the
properties on data. Then, every time you receive new data from the
server, you can update all the properties on viewModel in one step by
calling the ko.mapping.fromJS function again:
ko.mapping.fromJS(data, viewModel);
Hopefully this helps.
If your Knockout ViewModel matches your form, you could just use the built in ks.toJSON()
http://knockoutjs.com/documentation/json-data.html
A better option, especially if your form is large or complex, is to use either the mapping or viewmodel plug-ins
http://knockoutjs.com/documentation/plugins-mapping.html
http://coderenaissance.github.io/knockout.viewmodel/
The simplest way to turn your json model into a usable knockout model is with the mapping plugin.
Alternatively, you can manually copy fields from your json model into ko.observable members of your view model, which give you more control and lets you choose to skip read-only properties.
I'm trying to do something like this:
http://jsfiddle.net/bATu3/5/
Where the entire view is generated within an object, privately and return via a public method so that it can be generated on the page. I'm doing something wrong and would appreciate any pointers to help me sort this out.
Try this:http://jsfiddle.net/bATu3/10/
Basically there were few errors: Be careful of the use of 'this' within callback functions.
Also, note the data bind variables <p><strong data-bind="text:firstName"></strong></p>
another way to do this is: http://jsfiddle.net/bATu3/14/
you can specify the scope for computed values by passing it as a secondary parameter as noted here: Knockout: Computed Observables (read the "Managing ‘this’" section)
How can I call a .net method in inline code using a javascript variable?
My code looks like this:
for (var i = 0; i < numberIterations; i++)
{
var result = <%# GetFilterTagURL( myArray[i].Value, false) %>;
//do stuff with result
}
This block is inside a javascript block; the GetFilterTagURL method is a a .net method and I want to pass the variable myArray[i].Value as the first parameter.
Any ideas?
Update:
All your answers are helpful.
I guess that, as you say, I'll have to create a web service to achieve what I want.
You will not be able to accomplish it like that, since the <%# %> tag is used for Data binding.
One approach however would be to create a webservice and call it from your javascript. Inside your webservice you can then make the call to GetFilterTagURLand use the result in your javascript.
Check out this article from MSDN for more info.
You cannot send client-script values to the server-side. The oposite is valid though, you can register a javascript block from your code-behind.
See Page.RegisterStartupScript method.
this will work, but you have to call Page.DataBind() in your code