I'm new to ReactJS, but by following the tutorials I was able to build a SchoolFinder app as explained in the link below. Now I'm trying to add a edit feature to it.
Link to tutorial here.
So I've added <AddSchool onEdit={this.updateSchool}/>
and
updateSchool: function(e){
e.preventDefault();
actions.updateSchool(this.props.info);
}
In SchoolList.jsx and in Actions i've written the updateSchool function, but it is not getting called. Am I missing something here?
Related
just starting with react. I have a question about #HostListener from angular. Can I use that in React? If yes, what is the correct syntax?
I tried to check my method, please look at the following snippet:
#HostListener('document:fieldInput', ['$event']);
fieldInput() {
console.log(fieldInput); }
Further I get this error message. Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)
I am coding in .js instead of .ts
I have a project made with react and rest api(php+mysql).I have to put it through a codeceptjs test.The app is working properly with countless of manual testing, and as far as I can see, the codeceptjs test is working too, but it gives the following error:
Error: Clickable element "ADD" was not found by text|CSS|XPath
at new ElementNotFound (node_modules/codeceptjs/lib/helper/errors/ElementNotFound.js:14:11)
at assertElementExists (node_modules/codeceptjs/lib/helper/WebDriver.js:2835:11)
at WebDriver.click (node_modules/codeceptjs/lib/helper/WebDriver.js:917:7)
at processTicksAndRejections (internal/process/task_queues.js:97:5)I }) => {
I.amOnPage('/');
I.click('ADD');
I.seeElement('#product_form');
I.fillField('#sku', 'SKUTest000');
I.fillField('#name', 'NameTest000');
I.fillField('#price', '25');
I.waitForElement('#productType');
I.selectOption('#productType','DVD');
I.waitForElement('#size');
I.fillField('#size','200');
I.click('Save');
My add element looks like this:
<Link title="ADD" to="/add-product">ADD</Link>
Can someone please help me out why is this error appearing and how can I solve it? Thanks in advance!
Update:
I did a couple more tests, and I noticed that sometimes it gives back less/different errors depending on the test's time. For example:
http://165.227.98.170/open?testName=ed
http://165.227.98.170/open?testName=ah
http://165.227.98.170/open?testName=bc
My guess is that is has to do with how react loads in the html elements and manages the rest api calls. How/what should I change in the app to accomodate the test script?
Seems like the problem was I put the whole home page's load after the rest api call by accident.
I am using Chartist JS for my charts in my Angular JS app. The issue is I am seeing this here. There is a JS bin that highlights the issue. The author gives a solution for it. The solution is doing DOM manipulations in Jquery which is easy to do. However with AngularJS the way you manipulate the DOM is via Directives. I have created a plunker here which highlights the same issue in Angular JS but I am confused as to how to put the solution provided by author into my Angular code.
Here is the solution
$('[data-tab]').on('toggled', function (event, tab) {
tab.find('.ct-chart').each(function(i, e) {
e.__chartist__.update();
});
});
Edit: As requested the JSFiddle is updated, so what I am trying to do is. I have three different tabs and three different graphs, whenever I click on them I should see the respective graph. To make the tab behavior possible I have written a basic code using scope and model. which facilitates the changing of tabs. The issue is that the chart is getting created for first or default tab but not for the second and third tab. There is a solution given by the author but I don't know how to implement that in AngualrJS
the jQuery solution that you post is basically finding all the chart references and then doing DOM manipulation and call the update() function.
The key is how to find the chart to update in Angular.
In this case, you can assign a variable when you create a chart. For example:
var chart4 = new Chartist.Bar('#chart4', data1);
var chart5 = new Chartist.Bar('#chart5', data2);
Now you have the reference of the chart. All you have to do is to call update() function to render the chart again.
if (value === "allDrivers") {
$scope.tab = "All";
chart4.update();
}
Here is the working plunker
One thing I like to point out is: right now you need to double click the tab in order to see the chart is being rendered or you resize the browser window. I am still trying to find a way to fix this. But at least this approach gives you an idea how to convert the jQuery solution to Angular solution.
I was able to solve this using angular.element() method. So if you wish you use jquery in your angular code. You have to do this via angular.element method. But make sure to include jquery before angular in your index.html
If jQuery is available, angular.element is an alias for the jQuery
function. If jQuery is not available, angular.element delegates to
Angular's built-in subset of jQuery, called "jQuery lite" or jqLite.
I did not know this. From here it was learning for me. Following advice of #pieterjandesmedt from this post. I was able to do this. For other people who want to learn how this works. I have created a GitHub repo which gives a solution to this issue. The link for problem is given in the question. Hope that helps
In a React component, I tried rendering
<a id="help" onClick={this.handleHelp}>{_('Help')}</a>
and I put
this.handleHelp = this.handleHelp.bind(this);
in the constructor. So I want to bind that click to our legacy javascript Help library.
I tried
handleHelp(e) {
e.preventDefault();
window.Help.init('some_value');
}
When clicked, absolutely nothing happens, including no messages nor errors in developer console. The Help jquery script is loaded at the time. On init, that binds $("#help").on("click", showHelp); so I was hoping I could somehow trigger that click in the handleHelp handler, but I've not been able to figure out how.
UPDATE: Thanks to responders, I figured out to just add a call to the window.Help.showHelp() function into my handleHelp, after window.Help.init(). (Obvious, in hindsight.)
As my question asks, I want to know if that is possible. Why I want this? I am required to keep the link when the request fails so I use states in my bootstrap template instead of templates for the error pages. Now I need to catch everything that isn't registered and I need to tell my main controller to change the state if the route is not found. I checked the documentation, of course but it hasn't enlightened me so please help me out here if you can.
$httpProvider.otherwise(function () {
// code here
});
Is something like this possible?