0

I am working with jquery mobile and ReactJS for my mobile website. So I am opening slide using JQM transition which contains ReactJS Component. How I am doing this is below code:

$(".mobi-page-create").click(function(){
    $(document).bind('pagecreate', function(){
        ReactDOM.render(<MobileSearch />, document.getElementById('MobileSearch'));
    });
});

The ReactJS Component <MobileSearch /> contains Radio input element.

The Problem is that the JQM UI classes are added to the container of the page loaded in the slide but not to the input fields which are created by ReactJS Component.

How it can be done.

Thanks in advance.

Syed Aqeel
  • 1,009
  • 2
  • 13
  • 36
  • Have you tried adding those classes manually to the input elements inside your MobileSearch component? – nbkhope Aug 21 '17 at 18:39
  • If some method somehow adds classes automatically to some container that has a React app, then you should try calling that method in your React component lifecycle method `componentDidMount()`. e.g. `componentDidMount() { callSomeFunctionThatAddsClasses(); }` – nbkhope Aug 21 '17 at 18:42
  • @nbkhope no... It also some other data attribute – Syed Aqeel Aug 21 '17 at 19:00
  • And also don't know which method I should call for the `JQM` to initialize it to add classes to `Form` element. because `JQM` adds these classes when page load – Syed Aqeel Aug 21 '17 at 19:02
  • It would be interesting if you post a snippet... BTW, maybe [here](https://stackoverflow.com/a/41409019/4845566) and [here](https://stackoverflow.com/a/41484070/4845566) is something useful regarding your last comment – deblocker Aug 21 '17 at 19:24
  • 1
    Call `.enhanceWithin()` on containing div/form. – Omar Aug 22 '17 at 09:44
  • @Omar: JQM + React: i read this Google thread: https://groups.google.com/d/msg/reactjs/4IMWpFs-B5Y/c892FgvLw28J - is that pair so much faster as JQM only? It is worth? – deblocker Aug 28 '17 at 16:03
  • @deblocker I didn't try React before. I recommend using an interface to handle data. jQM is poor in that field. Edit: However, it's not going to be easy to integrate both technologies. There'd be some workaround and such. – Omar Aug 28 '17 at 16:45
  • 1
    [Follow up comment](https://stackoverflow.com/questions/45802775/jquery-mobile-ui-classes-are-not-added-on-reactjs-elements?noredirect=1#comment78585812_45802775): bear in mind that `.enhanceWithin()` handles only newly added elements. It doesn't work as _refresh_ method, otherwise, you have to _refresh_ each widget separately using its' own method. Hectic, isn't? – Omar Aug 28 '17 at 16:50

0 Answers0