Menu
  • HOME
  • TAGS

Create CRUD UI in reactjs with backend api

Tag: javascript,laravel,reactjs,react-router

Ive created a CRUD app in laravel, but now i want to improve the UI with react.js. Im still very new to react, so not sure how to go about doing this.

So far i have created a table component that displays all the users with react. how should i use react-router or whatever availble to implement users/{id}, users/create, users/{id}/edit, etc so that when i click "show user" button, another component with user detail will appear to replace the users table in the same view.

One more question, how can i pass objects from backend to react view?

Thanks.

This is what i have right now:

import React from 'react';
import Router from 'react-router'; 
import { Route, Link, RouteHandler } from 'react-router';

var FilterableTable = React.createClass({
  getInitialState: function() {
    return {
      data: [],
      filterText: ''
    };
  },
  handleUserInput: function(filterText) {
    this.setState({
      filterText: filterText
    });
  },
  loadDataFromServer: function() {
    $.ajax({
      url: this.props.url,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  componentDidMount: function() {
    this.loadDataFromServer();
  },
  render: function() {
    return (
      <div>
        <NavBar
          filterText={this.state.filterText}
          onUserInput={this.handleUserInput}
        />
        <ObjectTable
          data={this.state.data}
          filterText={this.state.filterText}
        />
        <RouteHandler/>
      </div>
    );
  }
});


var NavBar = React.createClass({
  handleChange: function() {
    this.props.onUserInput(
      this.refs.filterTextInput.getDOMNode().value
    );
  },
  render: function() {
    return (

      <nav className="navbar">
        <ul className="nav navbar-nav">
           <li>
              <Link to="/admin/users">All users</Link>
           </li>
           <li>
              <Link to="/admin/users/create">Create a user</Link>
           </li>
        </ul>
        <form className="form-group pull-right">
          <input
            className="form-control"
            type="text"
            placeholder="Search..."
            value={this.props.filterText}
            ref="filterTextInput"
            onChange={this.handleChange}
          />
        </form>
      </nav>
    );
  }
});

var ObjectTable = React.createClass({
  render: function() {
    var rows = [];
    this.props.data.forEach(function(object) {
      if (object.username.indexOf(this.props.filterText) === -1 &&     object.email.indexOf(this.props.filterText) === -1)
        return;
      rows.push(<ObjectRow object={object} key={object.uid}/>);

    }.bind(this));
    return (
      <table className="table table-striped table-bordered">
        <thead>
            <tr>
              <td>ID</td>
              <td>Username</td>
              <td>Email</td>
              <td>Actions</td>
            </tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    );
  }
});

var ObjectRow = React.createClass({
  render: function() {
    var objId = this.props.object.uid;

    return (
      <tr>
        <td>{this.props.object.uid}</td>
        <td>{this.props.object.username}</td>
        <td>{this.props.object.email}</td>
        <td>
          <Link to="/admin/users/:objId" params={{objId: objId}} className="btn btn-small btn-success">Show</Link>
          <Link to="/admin/users/:objId/edit" params={{objId: objId}} className="btn btn-small btn-info">Edit</Link>
        </td>
      </tr>
    );
  }
});

var ShowObject = React.createClass({
  render: function() {

     return (

      <h1>showing a user</h1>
    );
  }
});


var routes = (
  <Route path="admin/users" handler={FilterableTable}>
    <Route path="/admin/users/:objId/edit" />
    <Route path="/admin/users/create" handler={CreateObject} />
    <Route path="/admin/users/:objId" handler={ShowObject} />
  </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {  
  React.render(<Handler url="/admin/get_users" />,  document.getElementById('app'));
});

Best How To :

So to answer your two questions:

  1. React-router is pretty simple to use, and the documentation is great. You just have to create the different routes you want on the client-side. In your case you going to have three routes. The best is really to check the documentation which is really good about react-router

  2. To get data from the backend, whether is it react or not, you have to use ajax. You can use jQuery and fetch some data from the componentDidMount method and updates the state of your react component accordingly. This is actually what you are doing and it works well. You might want to consider the Flux pattern to avoid having data management in your react components and have them being simple views in your system.

Not able to access variables in required file

javascript,gulp,require,browserify

Without custom logic, it's not possible to achieve what you want. However I believe you could find a compromise by using ES6 modules instead of CommonJS modules. You would be able to write export var test = 'test'; which declares and exports a variable test. You can then import it...

Teechart HTML5, line color and thickness

javascript,html5,teechart

Having a Line series: To modify the line thickness, change the series format.stroke.size property. Ie: Chart1.series.items[0].format.stroke.size=2; To modify the series color, change the series format.stroke.fill property. Ie: Chart1.series.items[0].format.stroke.fill="red"; ...

Sockets make no sense?

javascript,node.js,sockets

The client doesn't get to cause arbitrary events to fire on the socket. It is always a message event. Using the same client, try this server code in your connection handler: socket.on('message', function(data) { // data === "pressed", since that's what the client sent console.log("Pressed!"); socket.close(); }); ...

Background-image style with JS not working in ie9

javascript,jquery,html,internet-explorer

Your call of setTimeout fails in any browser, but in IE9 with an exception(what stops the further script-execution). It's a matter of time. At the moment when you call var timer = setTimeout(slideshow, 8000); slideshow is undefined , and undefined is not a valid argument for setTimeout. Wrap the call...

Javascript change the souce of all images present inside a string

javascript,jquery

You can wrap your string into a jQuery-object and use the .find()-method to select the images inside the message-string: var msg = '<span class="user_message">hiiiiiii<img title=":benztip" src="path../files/stickers/1427956613.gif" /><img src="path../files/stickers/416397278.gif" title=":happy" /></span>'; var $msg = $(msg); $msg.find('img').attr('src', 'path_to_img'); $("#chat_content").append($msg); Demo...

How to use a service with Http request in Angular JS

javascript,angularjs

ofcservices.getnews() is a promise You need manage with the function sucess and error ofcservices.getnews(). success(function(data) { $scope.news=data }). error(function(data, status, headers, config) { //show a error }); As weel change app.factory('news' to app.factory('newsFactory' and call it in controller('news', function($scope, newsFactory) { You can get more data about promise in the...

session value in javascript cannot be set

javascript,function,session

Javascript is a client-side language. Session are server-side component. If you want to update session when user does something on your page, you should create a ajax request to the server. Or maybe use some client side variables that, for some aspects, are similar to session (they will be forever...

Automatically calling server side class without

javascript,html,ajax

Trigger the click event like this: $('._repLikeMore').trigger('click'); ...

Onclick add html content and remove it by clicking “delete” link

javascript,jquery

Even though you are using .on() with event delegation syntax, it is not working as the element to which the event is binded is created dynamically. You are registering the handler to col-md-1 which is the parent of the delete button, but that element also is created dynamically so when...

Can't call fetch directly in Backbone model listenTo

javascript,backbone.js,coffeescript

The handler for each type of event is passed a certain set of arguments. The Catalog of Events has this to say about a "change" event: "change" (model, options) — when a model's attributes have changed. So if you say this: this.listenTo(members, 'change', this.fetch) then fetch will be called like...

want to show and hide text using “this” jquery

javascript,jquery

I guess OP wants to link the button more with corresponding click span class $('.clickme').click(function(){ $(this).parent().prev().find(".click").toggle(); }); FIDDLE DEMO...

Javscript Replace Text in tags without changing children element HTML and Content

javascript,jquery

The way I think you will have to do it is in each element individually and use this jquery small plugin I rewrite here is the code and also fiddle the html <div id="parent"> thisi sthe fpcd <p>p</p> </div> plugin to find the content of the selector text without child...

Target next instance of an element/div

javascript,jquery,html

nextAll and first: $(this).nextAll('.hidden').first().slideToggle(...); This question has more about this: Efficient, concise way to find next matching sibling?...

Substring of a file

javascript,arrays,substring

To get your desired output, this will do the trick: var file = "a|b|c|d, a|b|c|d, a|b|c|d, a|b|c|d, a|b|c|d"; var array = file.split(", ") // Break up the original string on `", "` .map(function(element, index){ var temp = element.split('|'); return [temp[0], temp[1], index + 1]; }); console.log(array); alert(JSON.stringify(array)); The split converts...

Login Signup PopUp

javascript

In your code you have 2 options to solve it first is jquery and second one is css. 1) Jquery On load trigger click event. $('#cont-1').click(); OR 2) CSS Add hide class in second tab <div class="tabcontent hide" id="cont-2-1"> and add activeLink class for login <a href="javascript:;" class="inactive activeLink" id="cont-1">Login</a>...

Get all prices with $ from string into an array in Javascript

javascript,regex,currency

It’s quite trivial: RegEx string.match(/\$((?:\d|\,)*\.?\d+)/g) || [] That || [] is for no matches: it gives an empty array rather than null. Matches $99 $.99 $9.99 $9,999 $9,999.99 Explanation / # Start RegEx \$ # $ (dollar sign) ( # Capturing group (this is what you’re looking for) (?: #...

Saving data using promises

javascript,parse.com,promise

Instead of going for recursive, you can try this: classPromise = array.map(function(obj){ return obj.save();}); in es6, same thing can be: classPromise = array.map(obj => obj.save()); Edit You can reduce the whole function to: function myFunction(array, value) { if ( !array || !array.length) return; console.log("array: " + array.length); if (!value) value...

Javascript: Forloop Difference between i++ and (i+1)

javascript,loops,for-loop

The i++ is using post increment, so the value of the expression i++ is what the value was in the variable i before the increment. This code: if(sortedLetters[i] !== sortedLetters[i++]) return true; does the same thing as: if(sortedLetters[i] !== sortedLetters[i]) return true; i = i + 1; As x !==...

JSLint error: “Expected a newline at EOF”, conflict with Beautify plugin

javascript,gruntjs,jslint,beautify

According to the Brackets Beautify Documentation, it uses JS-Beautify internally. The documentation for the latter mentions these parameters: -n, --end-with-newline -p, --preserve-newlines If you can force Adobe Brackets to pass parameters to the js-beautify call, I guess one of these should do the trick. UPDATE According to the Github repo,...

Cant submit form

javascript,php

Your PHP is checking if $_POST['submit'] contains a value. Your form does not contain a form element with the attribute name="submit", so therefore it fails and moves straight to the else statement. If you want to check if the form was posted then you should instead check for: if (!empty($_POST))...

KnockoutJS custom component loader not executing `loadViewModel`

javascript,knockout.js,requirejs,knockout-components

If you don't "override" the loadComponent method then the default component loader's loadComponent will be invoked which only calls the loadViewModel if you've provided a viewModel config option. In your getConfig method you are returning a config with require which means that your require.js module has to provide the necessary...

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG

javascript,angularjs,restangular

You didn't inject module of 'Restangular' service. Try like this angular.module('AngApp', ['angularGrid','restangular']); ...

Changing interval time to random?

javascript

Assuming the interval is between 1 and 15 seconds and changed after each interval. setIntervsal() does not fit. setTimeout() is here a good choice, because of the single interval of waiting. Every next interval gets a new time to wait and has to be called again. The random waiting time...

How To Check Value Of String

javascript,css,string,numeric

document.GetElementById("tombolco").style = "display:block"; That's not the right way. This is document.getElementById("tombolco").style.display = 'block'; Also note that it is getElementById, not with a capital G. Same with 'none',Rest of your code is fine. Fiddle...

Dynamically resize side-by-side images with different dimensions to the same height

javascript,html,css,image

If it's responsive, use percentage heights and widths: html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0; padding: 0; } div.container { width: 100%; height: 100%; white-space: nowrap; } div.container img { max-height: 100%; } <div class="container"> <img src="http://i.imgur.com/g0XwGQp.jpg" /> <img src="http://i.imgur.com/sFNj4bs.jpg" /> </div>...

Please can someone help me understand the exec method for regular expressions?

javascript,regex

I don't understand why it would give me two hellos back? Because the first entry in the array is the overall match for the expression, which is then followed by the content of any capture groups the expression defines. Since the expression defines one capture group, you get back...

Google map infowindow position

javascript,google-maps,events,infowindow

Two issues: There is a typo in your click listener code, javascript is case sensitive, infowindow and infoWindow are different objects, so you are not setting the position of the infowindow correctly. infowindow.open(map); infoWindow.setPosition(event.latLng); You are currently placing the infowindow at the place that is clicked infoWindow.setPosition(event.latLng);. If you want...

why i don't get return value javascript

javascript,jquery,html,json,html5

the first "A" in AJAX stands for "Asynchronous" that means, it is not executed right after it has been called. So you never get the value. Maybe you could first, get the os list and then output what you need, like this: function createCheckBoxPlatform(myDatas) { $.ajax({ url: "/QRCNew/GetOS", type: "post",...

Laravel Interfaces

php,laravel,interface,namespaces

In my recent laravel 5 project, I'm used to prepare my logics as Repository method. So here's my current directory structure. For example we have 'Car'. So first I just create directory call it libs under app directory and loaded it to composer.json "autoload": { "classmap": [ "database", "app/libs" //this...

Create array from another with specific indices

javascript,arrays

You can use .map, like so var data = [ 'h', 'e', 'l', 'l', 'o', ' ' ]; var indices = [ 4, 0, 5, 0, 1, 2, 2 ]; var res = indices.map(function (el) { return data[el]; }); console.log(res); The map() method creates a new array with the results...

Get elements containing text from array

javascript,jquery,html,arrays,contains

You can use :contains selector. I think you meant either one of those values, in that case var arr = ['bat', 'ball']; var selectors = arr.map(function(val) { return ':contains(' + val + ')' }); var $lis = $('ul li').filter(selectors.join()); $lis.css('color', 'red') <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li>...

How to find the days b/w two long date values

javascript,jquery,date

First you need to get your timestamps in to Date() objects, which is simple using the constructor. Then you can use the below function to calculate the difference in days: var date1 = new Date(1433097000000); var date2 = new Date(1434479400000); function daydiff(first, second) { return (second - first) / (1000...

How to get my node.js mocha test running?

javascript,node.js,mocha,supertest

Create a separate file called app.js. The only purpose of this file would be to run the server. You'll also need to export your app object from server.js. So, your server.js would look like this // set up ====================================================================== var express = require('express'); var app = express(); // create our...

submitting form then showing loading image by javascript

javascript,html

Let suppose on button click you are calling ajax method <button onclick="LoadData();"/> before ajax call show image and onComplete ajax method hide this image function LoadData(){ $("#loading-image").show(); $.ajax({ url: yourURL, cache: false, success: function(html){ $("Your div id").append(html); }, complete: function(){ $("#loading-image").hide(); } }); } ...

Angular $http and Fusion Tables in IE9

javascript,angularjs,internet-explorer-9,google-fusion-tables

You should use the Angular $http.jsonp() request rather than $http.get(). JSONP or “JSON with padding” is the communication technique which allows for data to be requested from a server under a different domain (also known as a Cross Origin Request). Which is what you have used in your jQuery AJAX...

Insert data in collection at Meteor's startup

javascript,json,meteor,data,startup

Ok, you'll want to check out Structuring your application. You'll have to make the file with the definition load earlier, or the one with the fixture later. Normally you have your collections inside lib/ and your fixtures inside server/fixtures.js. So if you put your insert code into server/fixtures.js it'll work....

Laravel 4.2 Sending email error

php,email,laravel,laravel-4

Closures work just like a regular function. You need to inject your outer scope variables into function's scope. Mail::send('invoices.mail', array($pinvoices,$unpinvoices), function($message) use ($email) { $message->to($email , 'Name')->subject('your invoices '); }); ...

Javascript sort array of objects in reverse chronological order

javascript,arrays,sorting

As PM 77-1 suggests, consider using the built–in Array.prototype.sort with Date objects. Presumably you want to sort them on one of start or end: jobs.sort(function(a, b) { return new Date(a.ys, a.ms-1) - new Date(b.ys, b.ms-1); }) ...

Converting “i+=n” for-loop to $.each

javascript,jquery

A jQuery only way would be to iterate over the nth-child(4n) $('.thumbnail:nth-child(4n)').each(function(){ $(this) .prevAll('.thumbnail').andSelf() .wrapAll($('<div/>',{class:"new"})) }); Demo Considering the complexity, not sure whether the prevAll() performs better than the plain for loop. Referring one of my similar answer here...

Javascript function to validate contents of an array

javascript,arrays

You can use a simple array based test like var validCodes = ['IT00', 'O144', '6A1L', '4243', 'O3D5', '44SG', 'CE64', '54FS', '4422']; function validItems(items) { for (var i = 0; i < items.length; i++) { if (validCodes.indexOf(items[i]) == -1) { return items[i]; } } return ''; } var items = ["IT00",...

How to register global variable for my Laravel application?

php,laravel,laravel-5

Actually, you should reserve in config/app.php file. Then, you can add In the Service Providers array : 'Menu\MenuServiceProvider', In the aliases array : 'Menu' => 'Menu\Menu', Finally, you need to run the following command; php artisan dump-autoload I assume that you already added this package in composer.json Sorry, I didn't...

Replacing elements in an HTML file with JSON objects

javascript,json,replace

obj.roles[0] is a object {"name":"with whom"}. you cant replace string with object. you need to refer to property "name" in the object obj.roles[0].name Another problem is that var finalXML get a new value every line. you need to add a new value to the variable, not replcae it. var finalXML...

Wordpress log out using URL and redirect to specify page

javascript,php,wordpress

Try wp_logout() function use the funtion . if($_GET['logout'] == 1) { ob_start(); error_reporting(0); wp_logout(); $redirect = wp_logout_url(); wp_safe_redirect( $redirect ); } ...

slideToggle state not working with multiple boxes

javascript,jquery,cookies

Use onbeforeunload function of javascript window.onbeforeunload = function() { //Declare cookie to close state } This function will be called every time page refreshes Update: To make loop through every value use this $.each this way: var new_value = ""; window.onbeforeunload = function() { $.each($('div.box_container div.box_handle'),function(index,value){ new_value = ($(value).next('.box').css('display') ==...

Click on link next link should be display on same page

javascript,php,jquery,html,css3

Ok, so i tried to decypher what you meant with your Question. To Clarify: He has this one page setup. inside the div Our Project, there are two Buttons or links Visit more. When clicked, he wants the About Section to be shown. All in all it is impossible for...

Getting code from my forked repository

git,laravel,repository,laravel-5,composer-php

Having a look at your repository in https://github.com/Yunishawash/api-guard it looks like it doesn't have a branch called dev-fullauth. Instead there is a branch dev-bugfix. But you must not name your branch including the dev- prefix. Rename your branch at github from dev-bugfix to bugfix and then your require section would...

How to send current page number in Ajax request

javascript,jquery,ajax,spring-mvc,datatables

DataTables already sends parameters start and length in the request that you can use to calculate page number, see Server-side processing. If you still need to have the URL structure with the page number, you can use the code below: "ajax": { "data": function(){ var info = $('#propertyTable').DataTable().page.info(); $('#propertyTable').DataTable().ajax.url( "${contextPath}/admin/getNextPageData/"+(info.page...

Merge and sum values and put them in an array

javascript,arrays,angularjs,foreach

You cannot store key-value pair in array. Use object to store key-value pair. See comments inline in the code. var obj = {}; // Initialize the object angular.forEach(data, function(value, key) { if (value.start_date > firstdayOfWeek && value.start_date < lastdayOfWeek) { if (obj[value.firstname]) { // If already exists obj[value.firstname] += value.distance;...

Parsing XML array using Jquery

javascript,jquery,xml,jquery-mobile

EMI and CustomerName are elements under json so you can use .find() to find those elements and then text() to get its value. $(data).find("json").each(function (i, item) { var heures = $(item).find("CustomerName").text(); var nbr = $(item).find("EMI").text(); console.log(heures); }); .attr() is used to get the attribute value of an element like in...

show div only when printing

javascript,html,css

You need some css for that #printOnly { display : none; } @media print { #printOnly { display : block; } } ...