I have a select2 element on a create view that has nothing selected initially.
When entering the select2 element, the select2 element fires off a remote ajax call to an endpoint that returns paginated values.
The list of x amount of values is then displayed on the screen for selection within the select2 element.
How would I populate a selected value (single is fine) during a dusk test?
I've tried things like
type('#item-type-id-select','Figures')->
waitForTextIn('#item-type-id-select', 'Figures')->
But I can't seem to get it right.
$output = $browser->script('$("#item_condition_id").select2("trigger","select", {data: { id: "3" }});');
Related
Is there a way to get if select2 retrieves the elements from a remote source?
I am thinking to retrieve the ajax option but I have not found any information showing how to do it.
I tried
$(this).select2('ajax')
but of course it did not work. $(this) is the select2 instance.
I can do $(this).val(data).trigger('change'); to set the value of a select2 where the elements are static (they are loaded when the page is loaded). I need to set the value when the data comes from a remote source, so I need to detect where the data in the select2 come from first.
By the way, I am looping for all the form elements and set default values for all of them. That is why some select2 are not using ajax, while others are, in the same loop.
I have made an app with jQuery mobile and laravel.
On the first page "mobilepage1" if have a form with a next button.
Also some of the form elements are dropdown menu's. The dropdown select options I get from a table in the database.
In the form on mobilepage1 I have a dropdown list with all department names:
I get this list from my controller like so:
$departmentlist = Company::find($usercompanyid)->departments;
This is how I display the list in the mobilepage1 form:
{{ Form::label('department', 'Department:')}}
<?php
foreach($afdelingslijst as $item) {
$afdelingsarray[$item->afdelingen] = $item->afdelingen;
}
?>
{{Form::select('size',$afdelingsarray)}}
On the second page I want to make a back button.
I tried the jQuery mobile way with a link with: data-rel="back"
But this does not work. I get a page error, it's missing the departmentlist used in mobilepage1. I can make a link to a route to mobilepage1, but I think all the information the user entered in mobilepage1 would be gone.
I see this url in the address bar when I am on mobilepage2 (this is after I filled in the form on mobilepage1 and clicked next).
/public/mobilepage2?size=Personeelszaken&size=32&directechef=Tineke&size=1&size=1&size=1&date-2=&size=1&time=&omschrijving=
Is there a way I can link to the the mobilepage1 route and still keep the information the user entered?
It looks like it would work just by hitting the back button if you passed in the department list with a view composer rather than through a route. Remove it from your route and place this in a file that's being autoloaded...
View::composer('mobilepage2', function($view)
{
$departmentlist = Company::find($usercompanyid)->departments()->lists('afdelingen','afdelingen');
$view->with('departmentlist', $departmentlist);
});
I'm not sure how you are finding $usercompanyid but you should be able to find it within the closure or pass it in by adding use ($usercompanyid) right after the function($view) part.
Also using the lists() function like that will build your array for you so you don't need to worry about the foreach loop in your view.
Since the values are getting passed back and forth as get variables, I think if you use Form::model() instead of Form::open(), it should place all those values back into the input fields for you.
I have a form that contains a row of inputs. One of those inputs is a jQueryUI autocomplete and each row has a button next to it that clones the row so that additional records can be created. I have the autocomplete set to recognize and bind to the newly created input:
$( '.input .my-field' ).on( 'focus', function() {
var $this = $( this );
$this.autocomplete({ ... });
});
What I'm finding is this:
The autocomplete field in the first row works fine.
The autocomplete field in the second row works fine if I didn't enter a value for that field in the first row.
The autocomplete field in the second row doesn't work at all if I did enter a value in the first row.
The bottom line is that, if I create all of the rows first, everything works as expected, but this isn't the expected use case. Most folks will enter the first record, click to add another, enter those values, click to add another, rinse, repeat.
I'm still running it down, but I'm burning hours so I'm hoping someone will know what's going on and be able to jump in with a solution that doesn't require hours for me to work out on my own.
There are two additional steps you must perform after cloning an autocomplete input before re-creating it:
Remove the aria-haspopup attribute;
Remove the autocomplete data.
Just calling autocomplete("destroy") won't do, for some reason it destroys the original input instead of the clone. Working example at jsFiddle. Relevant code below:
var clone = $(...)
.clone(true)
.removeAttr("aria-haspopup")
.data("autocomplete",null);
i have 2 <g:select> elements in my gsp and both allow multiple selection (listboxes). I wrote some javascript that adds the option clicked by the user to the other select.
I build an array of items in select2.
I also have a form, that consist of checkboxes and such and submit button.
My problem is that I need to send that javascript array along other form data ( when i press submit ), to the controller. I just can't figure out a way, to send it.
Select box will get serialized and send with other form components, if you set every option to "selected = true".
I have this ruby on rails code
<%= builder.select(:serving_size_id, '') %>
I have not specified any options on purpose because I set the options in a different way when the page loads (using jQuery and Ajax).
The question: Is there any way I can get the value from the column "serving_size_id" but not change that line? I have a partial which I use it for new and edit and I think it would be sweet if I can do the setting of the selected index in JS.
Any ideas?
I'm not sure I completely understand your question, but if you want to set the value of the select field with JavaScript, you need to obtain the value in JavaScript at some point. I can think of two ways of doing this:
1) When you get the options via AJAX, have the server indicate which one is selected. This can be done by returning HTML <option> tags with selected="selected" set for one of them. To do this, your AJAX request is going to have to provide information about the object this select field is for (so the server can look up the object's current serving_size_id value).
2) When you render the field in your original partial, also render some JavaScript which sets the current value of the field, for example, underneath what you have above:
<%= javascript_tag "var ssid = '#{builder.object.serving_size_id}';" %>
Then, after the options are retrived via AJAX, the ssid variable is checked and the correct option is selected.
using jQuery in rails is easy but a little more difficult than prototype.
ex: "div id="serving_size" class="nice" rel="<%=h num%>">Stuff Goes Here.../div>"
in application.js do the following:
//application.js
$(document).ready(function(){
if($('#serving_size'){
$('#serving_size').live("mouseover",function(){
//we are hovering over specific div id serving size
if($('#serving_size').hasAttr('rel')){
alert($('#serving_size').attr('rel'); //your dynamic rel value, and fire function
}
}
}
if('.nice'){
$('.nice').live("mouseover",function(){
//we are now hovering over any item on page with class nice
if($(this).hasAttr('rel')){
//we are now using jQuery object ref and finding if that obj has attr rel
alert($(this).attr('rel')); // shows dynamic rel value
}
}
}
});
If you use the above code you should be able to do anything you want and fire any custom code from each of your set event callbacks.
The 'live' function in jQuery is great because it can be called on items that will eventually be on the page (eg. if you fill in something with ajax, jQuery will be prepared for that item being in the page)
I hope this help.