I need to add scroll to first error in form. I found few solutions:
extra package - doesn't work
Code from discussion here
<FormSpy
subscription={{ submitFailed: true }}
onChange={() => {
const el = document.querySelector('.error')
if (el) {
el.scrollIntoView({ behavior: 'smooth' })
}
}}
/>
My problem is that second case works only second time. Before I submit first time error className doesn't exist yet, it appears only after submit, and el is null. But second and next times it works all the time, if I not remove error className from render.
How can I solve it?
Ok. I found few issues in my project and made package to work. First issue is that this packages works only with form submit and doesn't work with button click, another issue is that my button component didn't have name tag, so I needed to add it. Now it works
Related
I'm using ag-grid to render a table in my angular 7.2.1 app. The custom cell renderer is just to render an edit button in the rows that will redirect to a different page.
I've done this before in a different app on a different Angular version a while ago, but for some reason the same code in this Angular 7 app is resulting in this. I think I may be missing something really simple.
I've created a minimalist reproduction of the error I'm seeing in this stackblitz - https://stackblitz.com/edit/angular-v98mjs
If you click on the Edit button, you will see this error in the console.
ERROR Error: Cannot read property 'navigate' of undefined
ag-grid versions:-
I'm using the following version for ag-grid:-
"ag-grid-angular": "^20.2.0", "ag-grid-community": "^20.2.0",
Please look at the stackblitz code in the link above for the code.
You needed to define onEdit with Arrow Function
onEdit = (row): void => {
console.log('row is being edited', {row})
this.router.navigate(['/new-url', { id: row.incidentId }], {
relativeTo: this.route.parent
});
};
More example such thing: ag-grid server side infinite scrolling accessing props
Have a look at the updated plunk: https://stackblitz.com/edit/angular-oppxte
Without arrow function, inside onEdit function of AppComponent was not able to get reference of this.router, and hence, you were getting the error.
Cannot read property 'navigate' of undefined
I have also introduced RootComponent and NewComponent for better modularity in the example. Hope it will be clear with that.
I am using bwu_datagrid in my Dart/Polymer webapp. In a paper-action-dialog, I am using the "grouping" grid to show a tree-table. The first time the dialog is opened, the grid looks fine. The second time the dialog is opened, it is fine in Chrome, but when I use Firefox or Safari, the columns in the non-grouped rows are scrunched to the left (overlapping each other), and the column headers have disappeared.
This was also happening in Chrome until I added the following code in the dialog's core-overlay-open-completed event handler:
grid.setColumns = columns;
grid.invalidate();
grid.render();
It appears that someone reported a similar issue back in November. Was this issue ever resolved and/or fixed?
I have come up with a workaround, that at least works for me and for the "issue 97 reattach" example that has been posted elsewhere. I don't know why it works, but I added a new method to bwu_datagrid.dart, called reshowGrid(). This new method is a stripped down version of "setColumns". I think the real key may be the commented out "style append".
void reshowGrid() {
if (_initialized) {
invalidateAllRows();
_createColumnHeaders();
_removeCssRules();
_createCssRules();
resizeCanvas();
_applyColumnWidths();
//this.shadowRoot.append(_style);
_handleScroll();
}
}
I call grid.reshowGrid() instead of grid.setColumns.
I am pulling my hair out dealing with this problem.
These are the code that I used and caused the mentioned problem.
$(document).ready(function () {
$("#at-site-btn").bind("tap", function () {
$.mobile.changePage("view/dialog/at-site.php", { transition:"slidedown", role:"dialog" });
});
$('#at-site-page').live('pagecreate', function(){
var $checked_emp = $("input[type=checkbox]:checked");
var $this = $(this);
var $msg = $this.find("#at-site-msg");
$checked_emp.appendTo($msg);
$checked_emp.trigger('create');
$msg.trigger('create');
$(document).trigger('create');
$this.trigger('create');
$("html").trigger('create');
});
});
Explanation:
The above code is in a file named hod.php. The file contain a number of checkboxes. These checkboxes and be checked simultaneously and when I pressed the #at-site-btn button the at-site.php appear (as a dialog) and display every checked checkboxes.
This is where the problem occurred. When I pressed the back button in the dialog to go back to the previous page and tried to uncheck those checkboxes, the error pops out as mentioned in the title. There are no calls to 'refresh method' in my code so I don't see the way to fix this.
Can anyone please suggest a way to solve this problem?
Am I using it right? (I am very new to jQuery Mobile. If there are some concepts behind using JQM please explain it to me [I've tried read JQM Docs it seems so unclear to me]).
Best regards and thank you very much for your answers.
What version of jQueryMobile are you using? You might need to use pageinit instead of pagecreate. This portion of the jQueryMobile documentation talks about the choices.
For re-painting or creation, the solution that #Taifun pointed out, which looks like:
$("input[type='radio']").checkboxradio();
$("input[type='radio']").checkboxradio("refresh");
worked okay for me, but it didn't paint the controls 100% correctly. Radio buttons didn't get the edges painted with rounded corners.
Before I saw your code, I read here that you can call .trigger('create') on the container object and it worked for me. You are doing that but inside pagecreate instead of in pageinit.
I was actually using a flipswitch checkbox:
<div class="some-checkbox-area">
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-lesson-complete"
data-on-text="Complete" data-off-text="Incomplete" data-wrapper-class="custom-size-flipswitch">
</div>
so had to do this:
$("div.ui-page-active div.some-checkbox-area div.ui-flipswitch input[type=checkbox]").attr("checked", true).flipswitch( "refresh" )
See my full answer here.
I have a bit of an odd problem, and I'm struggling to track down the root cause...
I have an ASP.net MVC site, and recently one of my colleagues started using IE9, and noticed a problem with one of the pages - it wasn't updating on click of save.
I figured that this would probably be a script issue, as there is a fair bit of jQuery used on this page, and it may still be, but:
If I submit this page in Chrome (or in IE8/7/6), then I get a forms collection with 11 items in it, as I would expect. If I submit the same page in IE9, I get an extra item at the end of the collection which has an empty string as key and an empty string as the value. This causes the call to UpdateModel() to not work (but not throw an exception) - none of these values are updated in my object, and the ModelState is still showing as valid.
So far, I've only found this one page, but I'm curious if anybody might know what is causing this?
Update 04/04/2011 - Narrowed down the culprit:
I removed bits of code until this worked and narrowed it down to some code in my validation. I use the jQuery validate plugin, and had the following as a submit handler (some redaction performed on names...):
submitHandler: function (form) {
var submitForm = true;
var newValue, originalValue;
newValue= $("#newValue").val();
originalValue= $("#originalValue").val();
if (newValue!= originalValue) {
//affectedValues is an array populated at the top of the page.
if ($.inArray(originalValue, affectedValues) != -1 &&
$.inArray(newValue, affectedValues) == -1) {
submitForm = confirm("Are you sure you want to do this");
}
}
if (submitForm) {
form.submit();
}
},
Removing this from the code (which I can thankfully do, as it's a bit of legacy code), seems to make this work, my empty item in the forms collection is gone. If anybody has any idea why this might have been happening, that'd be great.
Might be worth checking all the form fields in firebug to see if you have any un-named elements? I know I got caught out by the Select behaviour in IE before.
pdate 04/04/2011 - Narrowed down the culprit:
I removed bits of code until this worked and narrowed it down to some code in my validation. I use the jQuery validate plugin, and had the following as a submit handler (some redaction performed on names...):
submitHandler: function (form) {
var submitForm = true;
var newValue, originalValue;
newValue= $("#newValue").val();
originalValue= $("#originalValue").val();
if (newValue!= originalValue) {
//affectedValues is an array populated at the top of the page.
if ($.inArray(originalValue, affectedValues) != -1 &&
$.inArray(newValue, affectedValues) == -1) {
submitForm = confirm("Are you sure you want to do this");
}
}
if (submitForm) { form.submit(); }},
Removing this from the code (which I can thankfully do, as it's a bit of legacy code), seems to make this work, my empty item in the forms collection is gone. If anybody has any idea why this might have been happening, that'd be great.
I had some problems with my MVC sites due to the caching features introduced for IE9. My work around was to disable caching in my controller by adding an attribute:
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public class FaxController : Controller
FF, Chrome, Opera sends just value of FORM elements (button, input,..) with NAME.
IE always sends elements to server, even Submit with empty name and value which causes error.
So to be sure, always name elements.
I am working on a asp.net mvc site that uses facebook social widgets. Whenever I launch the debugger (ie9 is the browser) I get many error popups with: Error: '__flash__removeCallback' is undefined.
To verify that my code was not responsible I just created a brand new asp.net mvc site and hit F5.
If you navigate to this url: http://developers.facebook.com/docs/guides/web/#plugins you will see the pop-ups appearing.
When using other browsers the pop-up does not appear.
I had been using the latest ie9 beta before updating to ie9 RTM yesterday and had not run into this issue.
As you can imagine it is extremely annoying...
How can I stop those popups?
Can someone else reproduce this?
Thank you!
I can't seem to solve this either, but I can at least hide it for my users:
$('#video iframe').attr('src', '').hide();
try {
$('#video').remove();
} catch(ex) {}
The first line prevents the issue from screwing up the page; the second eats the error when jquery removes it from the DOM explicitly. In my case I was replacing the HTML of a container several parents above this tag and exposing this exception to the user until this fix.
I'm answering this as this drove me up the wall today.
It's caused by flash, usually when you haven't put a unique id on your embed object so it selects the wrong element.
The quickest (and best) way to solve this is to just:
add a UNIQUE id to your embed/object
Now this doesn't always seem to solve it, I had one site where it just would not go away no matter what elements I set the id on (I suspect it was the video player I was asked to use by the client).
This javascript code (using jQuery's on document load, replace with your favourite alternative) will get rid of it. Now this obviously won't remove the callback on certain elements. They must want to remove it for a reason, perhaps it will lead to a gradual memory leak on your site in javascript, but it's probably trivial.
this is a secondary (and non-optimal) solution
$(function () {
setTimeout(function () {
if (typeof __flash__removeCallback != "undefined") {
__flash__removeCallback = __flash__removeCallback__replace;
} else {
setTimeout(arguments.callee, 50);
}
}, 50);
});
function __flash__removeCallback__replace(instance, name) {
if(instance != null)
instance[name] = null;
}
I got the solution.
try {
ytplayer.getIframe().src='';
} catch(ex) {
}
It's been over a months since I last needed to debug the project.
Facebook has now fixed this issue. The annoying pop-up no longer shows up.
I have not changed anything.