CODEWITHSUNDEEP
ajaxreactjs
bowman87
bowman87

Reputation: 93

display data using a reactjs by clicking on a button

Rewriting ajax code in reactjs and add a click button to load content from server. I have this code with ajax. it works with click function. That is when one click on the Modal button, it loads data from the server via ajax using name variable.

hence the working ajax code below

<script>


$(document).ready(function () {
$('.modalLink').click(function(){


name=$("#name").val();
$.ajax({    

    type : 'POST',
    url  : 'modalcontent.php',
    data:"name="+name,      
    //data : $(this).serialize(),
    success : function(data)
    {
    $("#content").html(data);

    }
});

});

});

        </script>

<button id="modalLink">load data</button>

Now I want to re-write this using reactjs. below is what i have achieved. the reactjs code is working fine. Now, I need to add a click button so that when a user clicks on the modal button, it will load the content from server. please can someone help me with that.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>React</title>


</head>
<body>


<button id="modalLink">load data</button>

<div id="app"></div>
<script type="text/babel">

var MainBox  = React.createClass({
    render:function(){
        return(
            <App/>
        );
    }
});




var MainBox = React.createClass({
  getInitialState: function() {
    return { data: null };
  },

  componentDidMount: function() {
    $.get('modalcontent.php').done(function(data) {
      this.setState({data: data});
var me=this.state.data;
//alert(me);
    }.bind(this));
  },




render: function() {
  return this.state.data ?

<div dangerouslySetInnerHTML={{__html: this.state.data}} />
  : <div>Loading...</div>;
}

});






ReactDOM.render(
    <MainBox />,
    document.querySelector("#app")


);





</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>

modalcontent.php

<?php

echo "everything is ok"
?>

Upvotes: 0

Views: 3323

Answers (3)

Subhadeep Banerjee
Subhadeep Banerjee

Reputation: 225

Let's assume this is your regular HTML: index.html

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "main.js"></script>
   </body>

</html>

main.js (Script file which denotes where to display the react content in your HTML)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

App.js (This is your React component. This will be your parent component)

import React from 'react';

class App extends React.Component {

constructor(props) {
    super(props);
    this.state={
      data1 = 'No data available'
    };

getDataFromServer(){
  //call your PHP function to get the data.
  //Let's assume after fetching the data, you store it in a variable "data1".

    this.setState({
      data1 = data1;
    })
}
   render() {
      return (
         <div>
            <button onClick={this.getDataFromServer.bind(this)}>Display Data</button>
            <div ref='displayArea'>{this.state.data1}</div>
         </div>
      );
   }
}

export default App;

+

Upvotes: 0

Narasimha Reddy - Geeker
Narasimha Reddy - Geeker

Reputation: 3860

Move button also to react component. Try this

var MainBox = React.createClass({
  getInitialState: function() {
    return { data: null };
  },

  componentDidMount: function() {
    $.get('modalcontent.php').done(function(data) {
      this.setState({data: data});
      var me=this.state.data;
    //alert(me);
    }.bind(this));
  },

  handleOnclick: function(){
    $.get('modalcontent.php').done(function(data) {
      this.setState({data: data});
      var me=this.state.data;
    //alert(me);
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        (this.state.data && <div dangerouslySetInnerHTML={{__html: this.state.data}} />)
        (!this.state.data && <div>Loading...</div>)
        <button id="modalLink" onClick={this.handleOnclick}>load data</button>
      </div>
    )
  }

});

Upvotes: 0

pritesh
pritesh

Reputation: 2192

For that you can add a click event listener only in componentDidMount() hook.I have created a bin here.

  $("#modalLink").click(function() {
     console.log('call api here');
  })

So whenever the button is clicked it will log in console.You can do anything you want here on button click.But use of jquery with react is not a good practice so I would definitely not recommend it.

There are many articles that explains why jquery should not be used with react as like in this article

Why is it a bad idea to mix jQuery and React?

*

jQuery in this context usually refers to DOM scripting, where events and UI updates happen in the browser DOM. Because React handles events directly and uses a virtual DOM, in theory using React should mean you simply don't need to use jQuery as well. Changing the browser DOM outside your React app means React is potentially no longer handling state, events and UI rendering. Also, it means you are basically building one thing two entirely different ways; and sending two dependency loads down to the browser instead of one. Still - it's not the end of the world if both are being used, you just have to be aware of what each is doing and how the other will deal with that

*

Upvotes: 1

Related Questions