I have been exploring Angular X-editable project for a while and came across this odd behavior.
Whenever I click on any one of the 3 'select' components and try to change the value from the dropdown, the method 'showStatus(..)' gets fired for other components as well that are inside the ng-repeat boundary. (which you can check through the console.)
Can you please tell me why is this happening? Am I missing something.. ?
EDITED LINK -> Fiddle : http://jsfiddle.net/hrr4M/4/
<span ng-repeat="d in list" >
<a href="#" editable-select="d.status" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus(d.status) }}
</a> <br/>
</span>
The problem you have is that your binding
{{ showStatus(d.status) }}
fires up the function for every item, because as every item gets populated, it just refreshes and fires again, all of them.
This is not the right place to set this up.
I set up a modified fiddle for you: http://jsfiddle.net/hrr4M/13/
Inside the link statement I added
onaftersave="showStatus($data)"
That way, you can fire a function after an item has been selected (see docs for onaftersave vs onbeforesave), and you can get the selected value using $data.
Now it works already. The problem is, that your binding is still using the same function, and therefore firing up all the time.
I duplicated the function and renamed it to repeatFiller with the same functionality but omitting the console logs, so you can see it works. You might tweak that a bit but I think it does what you need.
Related
I built a project like instagram using laravel and vue.js. it has models like : profile, post, user. I just want to hide the follow button when a user wants to follow itself. In real instagram app we can't follow ourselves because there isn't any follow button in our own profile.
I made a condition that if the profile's userId equals to userId, the button hides but it doesn't work. Any opinion? Please help
This is the code that i have tried:
$profileId=auth()->user()->$profile->user_id;
$userId= $user->id;
In the view :
#if($userId == $profileId)
<follow-button my-user-id="{{ $user->id }}" my-profile-id="{{$profileId}}" follows="{{ $follows }}"></follow-button>
#endif
Looking at the code you provide, i think that follow button is a vue component.
If so, just use v-if="" or v-show="" to conditionally display the button.
From the docs:
v-if is “real” conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.
v-if is also lazy: if the condition is false on initial render, it will not do anything - the conditional block won’t be rendered until the condition becomes true for the first time.
In comparison, v-show is much simpler - the element is always rendered regardless of initial condition, with CSS-based toggling.
Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.
You probably should do something like this:
//In your view where you want to display the follow button component:
<follow-button
my-profile-id="{{ $profileId }}"
my-user-id="{{ $user->id }}"
follows="{{ $follows }}"
v-if="{{ $profileId !== $user->id }}"
>
</follow-button>
Here you can read more about conditional rendering.
I have a form based on selects for a search with filters (picture attached below).
When i pressed the search button, the page reloads and it reset all the selects.
I try to use the old helper, but it does not work properly, it just takes the first option of the select( and it gets rid of the default option as you can see in the pictures below)
Things to know:
it is a form with a get action, it is not intended to store or edit something, only for search. So, how can i properly get the old data when refresh or after pressing the search button?
This is my first attempt and it did not work
same for this one too.
as you can see in this image, it deletes the default option, and it shows the first option
The old() function will get data by specific key from the flash data. That means you must set the data as a flash before using the old().
Source: https://github.com/laravel/framework/blob/e6c8aa0e39d8f91068ad1c299546536e9f25ef63/src/Illuminate/Http/Concerns/InteractsWithFlashData.php
Documentation: https://laravel.com/docs/5.8/requests#old-input
In the case, if you want to refresh and keep the input, I suggest using the front-end handling way: When you change the input of drop-down list, push the new query string param into the URL by javascript (How can I add or update a query string parameter?) . Until the user tries to refresh the page, the URL was kept your old value. In the blade form, you can use the function to get the param from GET request with a priority higher than the old() function, I don't actually remember the function to get param from URL, but it will seem like:
{{ Request::get('yourInput') ?? old('yourInput') ?? $realEntity->yourInput }}
Use the following in your blade files. You can check if the name exists in the url (query string). Hope this helps :)
{{ Request::get('name') }}
I think, that old() function should work just fine, but you should compare the value of option in foreach.
<select name="tipo_propiedad">
#foreach ($tipos_propiedades as $tipo_propiedad)
<option value="{{$tipo_propiedad->id}}" #if($tipo_propiedad->id == old('tipo_propiedad') selected #endif(>{{$tipo_propiedad->name}}</option>
#endforeach
</select>
I am using watir-webdriver + ruby + rspec + gem parallel_tests.
And my test case has to be able to cancel and then delete item from items list. "Cancel" and "Delete" links appears from pop-up menu.
Following method verifies cancel link gear_dropdown_menu.cancel_job = browser.link(:text, 'Cancel') is visible.
Timer.repeat_until_true(30, 1) do
sleep 1
gear_dropdown_menu.cancel_job.visible?
end
When link appeared and I can see it, next I try to click it using such code:
browser.execute_script("
id = $('div.job-actions:visible').data('id');
$('a[href*=\"jobs/'+ id +'/cancel\"]').show().click()
")
div.job-actions:visible - actions popup, where links are placed
I use data-id attribute to specify direct link href. But it looks like watir can't see it.
The problem is when I execute tests in parallel, 2 from 3 tries it fails.
When I execute test non-parallel, looks overall good.
What may be the cause of the problem?
Updated: add code of popup. It's not a separate window. Just hidden div element which appears when I click a button.
<div class="job-actions" data-id="8769" style="top: 329px; right: 0px; display: block;">
<section>
<header>Actions</header>
<ul>
<li class="pause">
Pause Job
</li>
<li class="cancel">
Cancel Job
</li>
</ul>
</section>
</div>
(text: 'Cancel') is going to match the first cancel button on your list. If you are running tests in parallel you are likely getting race conditions to cancel/delete the same items from the list.
A couple other tips:
You don't have to use Timer. Your code is functionally equivalent to the built in method:
gear_dropdown_menu.cancel_job.wait_until_present
Also, is your popup a separate window? If so, you don't need to use execute_script (which should be avoided when possible). you can use:
browser.window(title: 'Your Popup Title').use { browser.link(href: /cancel/).click } (or whatever selector makes sense)
If your problem only occurs when running in parallel then it sounds like you may have either dependencies or interferences between tests, which end up creating a race condition.
If you are doing Create, Update, Delete type operations, then each test needs to work with unique objects, created with unique identifiers (names? id's? ) if not then either an object might not exist when you need it (not created yet, deleted, etc) or you could run into conflicts caused because the object names/identifiers are not unique (so a test could re-create a new copy of an object another test just deleted, causing the second test to think the delete failed, etc)
Without seeing a LOT more of your code it would be difficult to give you more precise advice, but in my experience when something works when done in series, but not if the order is altered, or the test run solo, or tests run in parallel, then you likely have dependencies between tests, or a situation like one test deleting something before the other test can try to cancel or update the same something.
I am in a bit of a pickle with this form and i would really appreciate some help.
After installing the customSelect() jquery plugin, i was no longer able to select the cloned select box elements on my form.
For an example, go to...
http:// gator1016.hostgator.com /~tamarind/index.php/en/book-now.html
Click on the second slide >> click on the "add a package" button >> try and change one of the cloned select box values.
Does anyone have any suggestions as to why this is? I'm under a bit of pressure to get this fixed.
Thanks in advance.
You are running .customSelect() in a seperate script tags previous to the rest of your form script. So here is the current order of events:
customSelect takes all given selects and appends a customizable <span> next to each (this is what you styled to achieve the desired look). It also attaches event listeners to those very spans so they can properly interact with their corresponding select element.
A user clicks "add another package", you clone the entire block of form elements including the custom spans that the plugin appended.
It is important to note that in doing this, you are not copying the event listeners, just the elements. Right now, even if you ran customSelect again upon cloning, you would likely have some kind of issue because the original span would still be there.
The solution to your problem would be to keep a reference to a clone of your form block that has not already had customSelect applied. Then each time you insert a new form block, you need to apply customSelect to the "vanilla" form block.
Here is a reduced example for you
HTML
<form action="" id="myForm">
<div id="formBlock">
<select><option>one</option><option>two</option></select>
</div>
</form>
<button id="addNew">add new</button>
jQuery
//do this first:
var formBlock = $('#formBlock').clone();
//now .customSelect();
$('#formBlock select').customSelect();
$('#addNew').click(function(e){
e.preventDefault();
var newFormBlock = formBlock.clone().appendTo('#myForm'); //clone the reference to un-modified form block!!!
newFormBlock.attr({
id:'' //dont want duplicate id's
});
newFormBlock.find('select').customSelect();
});
Demo: http://jsfiddle.net/adamco/ZZGJZ/1/
You also can cleanup the elements added by the plugin, and launch again customSelect:
$('form').find('span.customselect').remove(); //remove the span
$('form').find('select.hasCustomSelect').removeAttr("style"); //clean inline style
$('form select').customSelect( { customClass: "customselect" } ); // fire again customSelect
I have a templated column. I am using a Dropdown as header template and based on the value of the dropdown user sets, I update sigle DB record. Header drop down has nothing to do with the contents of the cells of that column. Everything works fine when the page is loaded and dropdown functions as expected.
As soon as I click anywhere on the gid and then click on the drop down, it behaves in a weird fashion i.e. it expands and then collapses. If I double click on the drop down it works as expected.
I am not able to understand what happens when I click inside the grid so that my drop down only responds to double click and not single click.
Here is the code snippet:
<igtbl:TemplatedColumn BaseColumnName="Assigned" Key="Assigned" AllowResize="Free" AllowRowFiltering="False"
AllowUpdate="Yes" Width="80px" Type="Custom" EditorControlID="assignTo" IsBound="false">
<Header Caption="Assigned To" ClickAction="SortSingle">
<RowLayoutColumnInfo OriginX="15" />
</Header>
<HeaderTemplate>Assigned To <select id="AssignToDefault" width="40px" runat="server" name="AssignToDefault"><option value="0">-Select-</option><option value="1">User</option><option value="2">API</option></select>
</HeaderTemplate>
<Footer>
<RowLayoutColumnInfo OriginX="15" />
</Footer>
</igtbl:TemplatedColumn>
I am trying to solve the issue since long. Please help.
Found the answer on Infragistics Community:
http://community.infragistics.com/forums/p/67149/340326.aspx#340326
EDIT (in case link deprecates):
I tested your scenario and was able to replicate the behavior in IE8 but not in Firefox.I suggest that you try disabling the activation behavior of the grid to see if that makes a difference:
UltraWebGrid1.DisplayLayout.ActivationObject.AllowActivation = false;
Alternatively you may want to consider using the WebCombo control in this scenario as it seems to be unaffected by the issue.
Please note that the UltraWebGrid control is now outdated and as of .NetAdvantage 2011 Volume 2 is no longer included in our product package. I would suggest that you consider switching to the WebDataGrid/WebHieararchicalDataGrid. More information regarding these controls is available at:
http://help.infragistics.com/NetAdvantage/ASPNET/2011.2/CLR4.0/?page=Web_WebDataGrid_WebDataGrid.html
Additional samples demonstrating the features of these grids can be found at:
http://samples.infragistics.com/aspnet/
Thank you :)