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 :)
Related
i updated from PF8 to PF10 last week and there are some problems i got.
Currently i have a big problem with my DataTable. Im showing a list of users, where i can open a dialog to edit them. After saving im closing the dialog and make a update on the table to see the changes.
And here is my problem: somehow the tables is showing the old values. After debugging i saw the setter got a copy of the selected object. im using eclipse and the object-id was a different then the original object, so i know its a copy.
These are things i tested:
Open the Page, click button for edit (debugging is showing the right objectid), do something and save+hide+update table -> Table showing the changes. I can do this multiple times and everytimes its working fine.
Open Page, use a filter (simple contains-filter for a name) , click buton for edit (debugging shows a different objectid), do something and save+hide+update table -> Table showing the old changes. Now everytime im using the button to edit i see a different object id in debugger.
Open Page, use a filter, put a breakpoint inside the lib for checking if the right object is added to the values to show. Filter got the right object (right objectid) but after clicking the button somehow i got a copy.
This is my datatable:
<p:dataTable var="m" id="mitID" widgetVar="mitTable"
value="#{meineDaten.allmlist}" filteredValue="#{meineDaten.filtermlist}"
rowStyleClass="#{m.ausgeschieden ? 'ausgeschieden':''}">
my editbutton:
<p:column exportable="false" width="28" style="text-align:center">
<p:commandButton disabled="#{m.typ eq 'SERVICE' and me.typ ne 'SERVICE' || not me.findRecht('Editor','Basisdaten-Stammdaten-Mitarbeiter')}" id="bearbeiten" update=":mitformID" icon="ui-icon-pencil" styleClass="old" style="width:23px;height:23px;border:none"
oncomplete="PF('mitDialog').show()">
<f:setPropertyActionListener value="#{m}"
target="#{meineDaten.selectedmit}" />
<f:ajax />
</p:commandButton></p:column>
In PF8 its working fine, but im not sure if its a PF10 problem because it tested it inside the showcase and its working fine too. Is there some web.xml settings i need to do?
Hoping my english is understandable
Thanks for reading and maybe helping :)
I have an view that extends the current project view, where we add multiple tabs (notebook pages) to show information from other parts of a project.
One of these pages is an overview page that summarizes what is under the other tabs, and I'd like to link the headlines for each section directly to each displayed page. I've currently solved this by using the index of each tab and calling bootstrap's .tab('show') method on the link within the tab:
$(".overview-link").click(function (e) {
e.preventDefault();
var sel = '.nav-tabs a:eq(' + $(this).data('tab-index') + ')';
$(sel).tab('show');
});
This works since I've attached a data-tab-index="<int>" to each header link in my widget code, but it's brittle - if someone adds a tab later, the current indices will be broken. Earlier I relied on the anchor on each tab, but that broke as well (and would probably break if a new notebook page were inserted as well).
Triggering a web client redirect / form link directly works, but I want to show a specific page in the view:
this.do_action({
type: 'ir.actions.act_window',
res_model: 'my.model.name',
res_id: 'my.object.id',
view_mode: 'form',
view_type: 'form',
views: [[false, 'form']],
target: 'current'
});
Is there any way to link / redirect the web client directly to a specific notebook page tab through the do_action method or similar on FormWidget?
If I understood well you want to select the tab from the JavaScript (jQuery) FormWidget taking into account that the id could change if anybody install another module that adds another tab
Solution 0
You can add a class to the page in the xml form view. You can use the id of the element selected by this class name in order to call the right anchor and select the right tab item. This should happen when the page is completely loaded:
<page class="nb_page_to_select">
$('a[href=#' + $('.nb_page_to_select').attr('id') + ']').click()
NOTE: As you have said the following paragrah I assume that you know where to run this instruction. The solution I suggest is independent of the index.
This works since I've attached a data-tab-index="<int>" to each
header link in my widget code, but it's brittle - if someone adds a
tab later, the current indices will be broken. Earlier I relied on the
anchor on each tab, but that broke as well (and would probably break
if a new notebook page were inserted as well).
Solution 1
When the page is loaded you can get the tab list DOM object like this:
var tablist = $('ul[role="tablist"]')
And then you can click on the specifict tab, selecing by the text inside the anchor. So you don't depend on the tab index:
tablist.find('a:contains("Other Information")').click()
I think if you have two tabs with the same text does not make any sense, so this should be sufficient.
Solution 2
Even if you want to be more specific you can add a class to the notebook to make sure you are in the correct notebook
<notebook class="nt_to_change">
Now you can use one of this expressions in order to select the tab list
var tablist = $('div.nt_to_change ul.nav-tabs[role="tablist"]')
// or
var tablist = $('div.nt_to_change ul[role="tablist"]')
Solution 3
If the contains selector doesn't convince you because it should be equal you can do this as well to compare and filter
tablist.find('a').filter(function() {
return $.trim($(this).text()) === "Other Information";
}).click();
Where "Other Information" is the string of the notebook page
I didn't tried the solution I'm giving to you, but if it doesn't work at least may be it makes you come up with some idea.
There's a parameter for XML elements named autofocus (for buttons and fields is default_focus and takes 1 or 0 as value). If you add autofocus="autofocus" to a page in XML, this page will be the displayed one when you open the view.
So, you can try to add this through JavaScript, when the user clicks on the respective link -which honestly, I don't know how to achieve that by now-. But you can add a distinctive context parameter to each link in XML, for example context="{'page_to_display': 'page x'}". When you click on the link, I hope these context keys will arrive to your JS method.
If not, you can also modify the fields_view_get method (here I wrote how to do that: Odoo - Hide button for specific user) to check if you get the context you've added to your links and add the autofocus parameter to the respective page.
As you said:
This works since I've attached a data-tab-index="" to each header
link in my widget code, but it's brittle - if someone adds a tab
later, the current indices will be broken.
I assume that your app allow multi-user interaction in realtime, so you have to integrate somewhere in your code, an update part function.
This function will trig if something has changed and cleanout the data to rebuilt the index in order to avoid that the current indices will be broken.
I have a single visual source page where i including a 2 pages through composition, body changes dynamically based on the action of the buttons. Button which is available in wizardButton (like next & previous). So now there are 2 forms available in page.
The form available in wizardBody
Another form available in wizardButton
Currently i'm able to navigate the pages back and forth, but the problem is not able to take the form values of the body when click the buttons in wizardButtons.
Even i tried with parameters in the controllers to get the value.
Could somebody help me how to solve this issue. Kindly let me know in case of any further details
<apex:page label="CreationWizard" showHeader="false" sidebar="false" title="Creation Wizard" controller="WizardController">
<!- Body differs based on the action button -->
<apex:composition template="{!wizardBody}" />
<apex:composition template="{!wizardButton}"/>
</apex:page>
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'm making a web app to manage product SKUS. One part of that is to associate SKUs with product names. On each row of a table, I list a SKU and display a <select> box with product names. The product that's currently associated with that SKU in the database is given an attribute like selected="selected". This can be changed and updated via AJAX.
There are a lot of product <option>s - 103 to be exact - and this list is repeated in the <select> on each row.
From another input on the page, I am using jQuery AJAX requests to add new SKU/product associations, and to make it clear that they're added instantly, I insert them into the top of the table with a little highlight effect. As the number of SKUs increases past 10 or so, if I refresh the page (which loads everything back out of the database ordered by product name), Firefox starts to show some wrong options as selected by default. It is not consistent about which incorrect option it shows, but it seems to be mixing up the options that existed before the page reload.
If I inspect the <select> using Firebug, the select="selected" is on the correct <option> tag. Refreshing the page (or leaving and typing this page's URL back in to return) does not make it show up correctly, but hard refreshing (Ctrl+F5) does.
Both Chrome and IE7 display this correctly in the first place.
My theory is that this is a result of a faulty cache strategy by Firefox. Does that sound right? Is there any way I can say in my code "if this page is refreshed, make it a hard refresh - reload everything from scratch?"
Update
To solve this problem, I changed strategies.
Previously, I put a <select> with a long list of <option>s on each table row, with the current value set as default
Now, I put the current value in a <span>. If the user clicks a "change" button, I replace the <span> with a <select>, and the "change" button becomes a "confirm" button. If they change options and click confirm, AJAX updates the database, the and the <select> goes back to being a <span>, this time with the new value.
This has two benefits:
It fixes the bug described above
It requires far fewer DOM elements on the page (all those redundant <option>s)
I had a similar problem, but after adding autocomplete="off" HTML attribute to every select tag it worked. [I was using Firefox 8]
Firefox preserves your selected form elements when you refresh. It's intentional. Ctrl+F5 is a "hard" refresh, which disables this behavior.
--
Or Command+Shift+R if you are on a Mac
An easy way to prevent Firefox from caching the last selected option is to remove all of the option elements on page unload. For example (assuming jQuery):
$(window).unload(function() {
$('select option').remove();
});
I had this same issue. I was trying to change the value of the select depending on which option had selected="selected", but Firefox wasn't working. It would always default to the first option.
Chrome, Safari, etc worked when I did this:
$( 'option[value="myVal"]' ).attr( 'selected', 'selected' );
... but this wasn't working in FF.
So I tried:
$( 'option[value="myVal"]' ).prop( 'selected', 'selected' );
and it works.
jQuery v1.9.1
Although this is old question, but below solution can help someone
In firefox, I've notice that the "selected" attribute will not work unless you place the select inside a form, where the form has a name attribute.
<form name="test_form" method="POST">
<select name="city">
<option value="1">Test</option>
<option selected="selected" value="2">Test2</option>
</selecct>
Again remember :
form must have the "name" attribute and
"select" must be inside the form.
I make it worked by putting the autocomplete="off" on the hidden input.
Firebug has a cache disable function for exactly this scenario.
The deeper long-term solution is to work out how set no-cache headers server side. What web server are you using?
Every time I ever had weird select option bugs in Firefox it was because I had multiple options marked as selected. Are you quite sure that only one is marked as such? Seems like you could get out of wack pretty easily if you are changing that with AJAX.
FYI: in order to stop Firefox from restoring the previously selected option after page reload you can place the entire <form> containing the <select> options inside an <iframe>.
When select boxes are in <iframe> and you reload the container page, Firefox finally behaves like ALL other browsers, by simply resetting select options.
Thanks to #BananaDeveloper (https://stackoverflow.com/a/8258154/2182349) - this is my solution to solve this problem on a single page in an application
I didn't want to customize the off-the-shelf/open source application code
<Files "page_that_does_not_work.php">
SetOutputFilter INFLATE;SUBSTITUTE;DEFLATE
Substitute 's/<select/<select autocomplete="off"/n'
Substitute 's/<form/<form novalidate/n'
</Files>
Apache docs for mod_substitute https://httpd.apache.org/docs/2.4/mod/mod_substitute.html
Thanks to: https://serverfault.com/questions/843905/apache-mod-substitute-works-in-curl-but-not-on-browser for the SetOutputFilter
Replacing jQuery
.attr('selected', true)
with
.prop('selected', true)
for <option> tag fixes it for me. All other solutions didn't work
I've figured out. If you put onunload or $(window).unload (jquery) on your HTML with no-cache header, Firefox reloads the page and initialize DOM even from back button.