In a Chrome Packaged app, using angular.dart, in a component html I have the below table which is dispaying paginated contents of an object list; exp. jobs :
<tbody>
<tr id="{{job.jobID}}" ng-repeat="job in jComp.jobs | pagination:jComp.paginator.instance" ng-model="job" ng-click="jComp.selectJob(job.jobID)">
<td>{{job.jobID}}</td>
<td>
{{job.productID}}<br>
{{job.productDescription}}<br>
</td>
<td>{{job.productType}}</td>
<td><img alt="No thumb" ng-src="{{job.thumbFURL}}"/></td>
<td>{{job.status}}</td>
</tr>
</tbody>
then in my component I am showing a popup modal div to ask user to choose an action. When the user clicks to change the job.status, there is a second layer of confirmation modal, and once confirmed in the component I am finding the job from the jComp.jobs List and updating the status. In side the popup modal the status gets updated but on the table it still shows the old status. And then when I paginate to next page and come back it gets updated. Before page switch it stays the same ? I tried calling scope.apply() after updating the jobs list, but it doesn't help. I like to know what is paginator.goNext() or paginator.goPrev() doing that causes the table list to refresh. Not clear about how the two way data binding working in this scenario. ( pagination is done using angular_pagination package )
I tried using :
<td ng-bind="job.status"/>
instead of:
<td>{{job.status}}</td>
and it fixed this issue. I am not sure why double brackets were not registering the object in the list to the change listeners / watchers. As far as I understand two way binding should be working with {{}} but in this case something was breaking it. It might be a bug in double brackets.
Related
I've been working with Knockout.js for some time now but only recently I've started to integrate jqueryUI animations for the sake of a better user experience. I'm seeing some issues trying to use the animation bindings on the tr elements inside a table tag. When I use the "visible" binding to hide and show each element it works just fine but when I attempt to animate the showing hiding of each element it only seems to apply to the first row in the table. I've attempted this using various methods. I've attempted using the knockout foreach template 'afterAdd' option as described here:
http://knockoutjs.com/documentation/foreach-binding.html#note_5_postprocessing_or_animating_the_generated_dom_elements
I've also created a custom binding and attempted to use that on each of the table row items with the same results.
Lastly I attempted to use the plugin found here:
http://www.codecoding.com/knockout-plugin-visibility-bindings-with-jqueryui-effects/
And again, it only appears to work on the first element of the table. Now before attempting to rewrite my HTML to use divs and spans rather than the tables I wanted to see if anybody else has seen these sorts of issues with knockout in the past. The relevant chunk of HTML is this:
<table class="tab_table table_a">
<tbody data-bind="foreach:featuredMenuItems,visible:showFeatured">
<tr data-bind="fadeVisible:readyToShow, click:function(){$root.showProductOptions($data);}">
<td class="td_large" data-bind="css:{td_select:itemInCart};"><span class="inCart_delete" data-bind="css:{display_IB:itemInCart},click:removeFromCart,clickBubble:false"><i class="fa fa-times-circle"></i></span><span data-bind="text:name"></span></td>
<td class="td_last" data-bind="css:{td_select:itemInCart},text:lineItemCost"></td>
</tr>
</tbody>
</table>
I would paste the ViewModel code in here as well but it is a rather large view model and the relevant part to this is just a simple "readyToShow" observable set to either true or false. Whenever this table is being shown the "readyToShow" values of each of the objects in the observableArray containing the table items is being set to true over time using a timeout so as to show a cascading effect when the table is shown.
I would really appreciate any help you guys could provide. Thanks!
I am working on Infragistics Grid in MVC and want to do some customization in it.
The issue is that data which I am showing is different than the inputs I am taking from the user (the editors in row editing/adding mode). There is additional processing needed to be done before displaying in a grid.
Infragistics grid provides a good mechanism to show the JSON object array which nice UI and events which works fine for me. The problem comes when I want to Edit a particular Row or Add New. For this Infragistics provides its own UI for it. Or in case we want to customize it, it doesn't provide much room to do so. It just allows providing a template for columns like the following:
<script id="rowEditDialogRowTemplate1" type="text/x-jquery-tmpl">
<tr class="tableBackGround">
<td class="labelBackGround"> ${headerText}
</td>
<td data-key='${dataKey}'>
<input />
</td>
</tr>
</script>
But I want to provide an entire template which will have my custom form and form elements.
I want a simple Infragistics Grid which will just show the data. If I click Add New within the grid then it will load my dialog.
If I double-click any row it will again open my dialog where I can edit the things. Later, once I save the data, I'll make a server trip and refresh the grid accordingly.
To summarize
I want to provide my own custom Form for Add and Edit in Infragistics Grid. And I'll take care of reloading the Grid after saving the data.
Reference : Infragistics Grid
Please help me to get this done!
You have found the correct API reference - in the 'options' tab look for the rowEditDialogTemplate option.
The use of the default Row Edit Template (yes, it can be used for adding rows as well) is shown in the official sample.
You can also find out more about it in the help topics: Row Edit Template and Configuring Row Edit Template.
Also, in the Infragistics forums you can find additional info on how to utilize the igGridUpdating feature's API methods (addRow and updateRow for example) with your fully custom form for row adding and editing.
is it possible send some parameter from one partialview to another .
i have 2 partial views . i wanna when i click on btn1(in partialone) , some parameters will be send to partial2 . of course without post back.
is it just possible with java script? is there any way?
for example i wanna send my td's values to second partial :
<tr>
<td class="tdPhone">2265176</td>
<td>Email :</td>
<td class="tdMobile" >fdg#gmail.com</td>
</tr>
<button class="btn btn-medium " data-type="submit">Next</button>
Partial views are finally rendered as divs in html page. So you will need to use client side javascript so that one div can talk to another. One of the cleanest technique will be to use triggers if you are using jquery. To send the data from one div on button click
$('body').trigger('div1-trigger-someBetterNameConventionWillHelp', [$('.tdPhone').innerHtml(),$('.tdMobile').innerHtml()]). and then another div where you wish to update it u can trap this trigger using
$('body').on('div1-trigger-someBetterNameConventionWillHelp', function(evt, data)
{
});
There is whole lot of caveat with this solution like you should try to identify the data with ids and not by classes and all, but just presenting the solution based on the question you asked.
I am using jquery 1.6.4 and I have a table. Initially in the table, a user is presented by only one row and a few columns. I, then, let users add as many rows as they would like using by doing this
$('.add').live('click', function(e){
e.preventDefault();
var $parentRow = $(this).parents('tr');
$parentRow.clone().insertAfter($parentRow);
$parentRow.next().find('input').val('');
$(this).replaceWith('-');
});
I also let them delete the rows on fly doing this
$('.delete').live('click', function(e){
alert("removing");
e.preventDefault();
$(this).parents('tr').remove();
});
However now I want the values that they are entering in these columns to be collected. I am not sure how to collect those values when they hit submit button as in my view source all I see is this
<tr>
<td class="actions">+</td>
<td><input type="text"></input></td>
<td><input type="text"></input></td>
<td><input type="text"></input></td>
<td><textarea rows="1"></textarea></td>
</tr>
In the page source it shows only one row where as in my view I definitely see three rows added. Not sure what am I missing and how to get the values
You don't have ids so it will be difficult to tell what you are actually collecting, but to get the values of the inputs, both static and dynamic, you can use this:
//submit code
$('input[type=submit]').click(function(){
$('table input').each(function(index,item){
//for testing you could just output to a div
//$('#output').append($(this).val());
});
});
From what I can tell, your input fields don't have names, so you're not going to get much when submit is pressed.
Also, you won't see DOM updates in your view source. View source will only show you what the page looked like when it first loaded.
To get a live view of the page, you can either use FireBug, for FireFox, or if you're using Google Chrome, there are developer tools under the "View" menu that you can use to see how the html looks live.
I'm trying to "record" a functional test using the selenium IDE plugin for Firefox (version 3.6). Im using the jQuery plugin ui selectmenu (I think its version 1.8). Im trying to "record" the selection of an element in a dropdown / select component. This dropdown is a ui select enhanced component. Therefore the actual select element is hidden and you end up selecting span elements and something else. This is what selenium records:
<tr>
<td>click</td>
<td>//a[#id='type-button']/span[2]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>ui-selectmenu-item-416</td>
<td></td>
</tr>
The problem is that the second part uses a number suffix, a kind of counter (416). This value is different for every page load, and therefore I don't see how I can automate it!?
How can I get a predictable result and test this?, or is there some other way to do it?
thanks!
The jQuery selectmenu widget is painful to automate with Selenium. A simple record-playback will hardly ever work. Try the following steps to automate the selection -
Type in the item you need to select.
Hit Backspace so the selectBox can "search" for the item.
Simulate the down arrow key for the searched item.
Select the first item from the dropdown list.
Here is the source code (in Java) for these steps. You should be able to adapt these to the IDE.
selenium.type("selectMenu_descriptor", "item_to_be_selected");
selenium.typeKeys("selectMenu_descriptor", "\b");
selenium.keyDown("selectMenu_descriptor", "\\40");
selenium.click("css=a.ui-corner-all[tabindex=\"-1\"]");
I also found that this was effective, if you don't care about taking screenshots with the jQuery UI controls running.
var jse = (IJavaScriptExecutor)theDriver;
jse.ExecuteScript("try { $(yourSelector).selectmenu('destroy'); } catch (ex) { }");
It's a little messy, but if you call it before you need to handle selecting dropdown options by text, it does the trick.