With jQuery, I can attach an event handler function via the on method that will be triggered also when the DOM change and something (like an Ajax call) replace the HTML of the page.
Is it possible to do something similar with a React component? After an ajax call that changes the DOM, if an element with a specific class is found, render it (with ReactDOM.render(...)).
Thanks
The component render responsibility should be given to react. Hence you should store the response from ajax call in the current state and react will handle the component rendering based on current state.
Follow these APIs if you are using only react
https://facebook.github.io/react/docs/component-api.html
or follow connect() if you are writing in react-redux
Related
I am trying to merge surveyjs along with my NativeScript application. I have referred URL for merging the same with Angular application
From the Angular demo code given on website, we have to add event handler for Complete button where we can get the response from surveyjs. Is it possible to integrate similarly for Nativescript Mobile application? Here is the approach which i feel can be taken.
Display
Create a HTML as provided by SurveyJS with required CSS and JS
referenced and add them as a file in project.
Modify HTML once i get the survey question json back from server.
Show the HTML as part of WebView. This will take care of displaying
the survey on my Application.
Here are my challenges during Submission
As per the process given on SurveyJS, i need to add handler for
oncomplete which will get the result json for me. How can i add
handlers for Complete button click in my code? Also please note that
there is a possibility that there may be multiple surveys on a single
page.
Apart from Survey, there are other fields also on the page and user
will submit them all in one go by clicking submit button of the page.
Hence i am planning to hide Complete button provided by SurveyJS
page. This needs to be triggered via code. Can this be done?
If someone can give directions on whether this scenario can be handled in nativescript application with Angular,it would help immensely.
yes it can be done using nativescript-webview-interface plugin.
add jS code inside WebView to handle oncomplete event from surveyJS. and on that function call emit some event to native app. after that add nativescript code to listen for that event and get the JSON back.
inside webView JS function
var oWebViewInterface = window.nsWebViewInterface;
// emit event to native app
oWebViewInterface.emit('anyEvent', jsonData);
inside native App
oWebViewInterface.on('anyEvent', function(jsonData){
// perform action on event
});
for more details on this you can check plugin readme file https://github.com/shripalsoni04/nativescript-webview-interface
Is it possible to send data through Component in react js.
I have a react component: On load of this component I have an api call and get a response, on this component I have this
Go to Next Page
On this Next page load I need some data from response of my previous component - how do I send it? is there a way to do this in react?
If you are using any kind of state management framework such as redux or flux, you can set the data in the store once the api call is fullfilled (on your first page, ie the one with the Go to next page link). Now on the next Page, you will have the data you need in the store which you can retrieve and do whatever you want with.
I have a problem to keep working the controls of a player in html5 "" via javascript on the page after an ajax request occurs.
When the page is loaded, the player starts playing and "Play, Pause, Next, Prev" controls work, but after I access any other page with ajax request, the controls no longer work.
The controls are within div.content which has its recharged every ajax request content.
If they want to see in practice http://devintec.com/dev/jjsv
Probably you're attaching your event handler after page load, so whenever the controls div is updated, the event handlers disappear (because the DOM elements that had them attached are removed). You'll have to attach the event handlers again after your AJAX call completes, or use event delegation.
I am attempting to work an existing web app to use Kendo (Mobile) UI widgets.
All of the existing javascript code base is contained within AMD modules (RequireJS).
I would like to attach a 'show' event handler to a view, so that the app can request data from the back end, however the data logic is within a module, and cannot be called from the page script (and thus, I can't use Kendo data-event attributes).
I thought that I would be able to to attach an event handler in code like so:
$('#tabstrip-browse').on("show", function(e) {...});
however, the event handler is not called.
Is there a way to do this?
Seems I'm finally able to answer my own question
My issue was that I was trying to use jQuery event binding syntax to bind to the events, however, KendoUI does not expose events in a jQuery friendly/compliant way.
However, there is a way to do this using the KendoUI API
There is no standard 'show' event in javascript or jQuery. You can bind custom events, but you need to also include a way to trigger them.
Here's a trivial example:
// bind the custom event
$('#element').on('show', function(e) {
// handle the custom event
});
// trigger the custom event
$('#element').trigger('show');
There is an attach event on Durandal
https://groups.google.com/forum/#!topic/durandaljs/UQ9hXpwP_ds
we are working on a shopping application. we use jsf and primefaces . we have login form on primefaces dialog. The dialog appears on click of add to cart(dlg.show()) if the user is not logged in or else it adds to cart directly. if user login sucessfully then the item is added to cart successfully.
I refered the following example for login dialog.
https://www.primefaces.org/showcase/ui/overlay/dialog/loginDemo.xhtml
I am not sure how do we have callback in primefaces ajax request. based on the response from the login action i want to call add to cart action.
can anyone suggest better approch for this?
Primefaces provides essentially two options for this:
Primefaces JavaScript API (the hard way), with which you an hook into the Primefacs jsf engine Using the function call Primefaces.ajax.AjaxRequest(cfg). cfg is an array of ajax request parameters that you pass along with the call and can include among other things component ids to ajax process, ids to update,event hooks (oncomplete,onerror etc) and custom request parameters. I'm typing this on a phone so it'll be painful to list an example here but if this is the route you prefer, consult the official Primefaces manual.
<p:remoteCommand/>, the easy way, is implemented as a standard JSF component that gives you all the function and behaviour of a regular JavaScript function and half the typing. With this, you can execute a backing bean function with the behaviour and semantics of a javaScript function