JSFiddle - React, Tailwind, and code Playground

by darinjacosta

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <body>
    <div ng-app="postTest" ng-controller="postTestCtrl" id="ang-div">
    <p>
    Send POST request to the target site set in the config for both Angular & jQuery using basic http authentication:
    </p>
    <p>
      username: <input id="user"><br>       
      password: <input id="pass">
    </p>
      <div class="jq mapstory button">JQUERY POST</div>
      <div class="ang mapstory button" ng-click="postData()">ANGULAR POST</div>
      <p>
        <h3><b>Check console for output</b></h3>
      </p>
    </div>
  </body>

CSS

.button {
   background-color: green; 
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   cursor: pointer;
   margin:5px;
}

#ang-div{
  padding: 20px;
}

JavaScript

var targetSite = {
    xml: '<?xml version="1.0" encoding="UTF-8"?> <wfs:Transaction xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" service="WFS" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd"> <wfs:Update xmlns:feature="http://www.geonode.org/" typeName="geonode:dja_remote_service_edit_test"><ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:FeatureId fid="garbage_id" /></ogc:Filter></wfs:Update></wfs:Transaction>',
    url: "https://demo.mapstory.org/geoserver/wfs/WfsDispatcher",
    auth: "username:password"
};

var angularConfig = {
  withCredentials: true
};

$('.button').on('click', function(){
  targetSite.auth = $('#user').val() + ':' + $('#pass').val();
  angularConfig.headers = {
    'Authorization': 'Basic ' + btoa(targetSite.auth),
    'Content-Type': 'text/html'
  }  
})

function _handleFeaturePostSuccess(data){
  console.log('=======Success:')
  console.log(data);
}

var app = angular.module('postTest', []);
app.controller('postTestCtrl', function($scope, $http) {
  
  $scope.postData =function(){
    $http.post(targetSite.url, targetSite.xml, angularConfig)
    .success(_handleFeaturePostSuccess)
  }
});

function ajaxReq(config){
  $.ajax({
     url: config.url,
     beforeSend: function(xhr) {
      xhr.setRequestHeader("Authorization", "Basic " + btoa(targetSite.auth));
     },
     type: 'POST',
     contentType: 'text/html',
     dataType: 'xml',
     processData: false,
     data: config.xml,
     success: _handleFeaturePostSuccess,
     error: function(){}
  });
}

$('html').on('click', function(event){
  if ($(event.target).hasClass('jq local')){
    ajaxReq(local);
  } else if ($(event.target).hasClass('jq boundlessps')){
    ajaxReq(boundlessPs);
  } else if ($(event.target).hasClass('jq mapstory')){
    ajaxReq(targetSite);
  }
})