FormData only run once when using ajax

See also questions close to this topic

• Moving appended path in a div (d3.js)

  I have a map that I seem to be unable to move the position of. Here's my HTML:

  <div class="container">
      <!-- Title -->
      <h1 class="title has-text-centered">New York</h1>
      <h2 class="subtitle has-text-centered">Income vs Poverty</h2>
  
      <div class="columns">
        <div class="column is-half">
          <svg class="current" width="780" height="850" style="text-align:left;" ></svg>
        </div>
         <div class="column is-half">
          <svg class="2015" width="580" height="800"></svg>
        </div>
      </div>
  

  And here's where I draw the map and append it to the 'current' svg:

   var geoPath = d3.geoPath()
  .projection( albersProjection );
  
  
  
  d3.select("svg.current").selectAll("path")
  .data( CaliforniaCountiesOverdoses.features )
  .enter()
  .append( "path" )
  .attr( "fill", "white" )
  .attr( "opacity", .8 )
  .attr( "stroke", "#696969" )
  .attr("left", 200)
  .attr( "border-radius", '50%' )
  .attr( "stroke-width", ".35" )
  .attr( "d", geoPath )
      .attr("class","counties")
  
      .attr("fill", function(d) { 
          var value = currentMap.get(d.properties.ID);
          return (value != 0 ? current_color(value) : "grey");  
  

  The problem is I can't move the map (i.e the 'counties' class within the SVG rectangle. I'd like it to be way further to the left. I've tried to set the viewBox of the 'counties' class :

  $('counties').each(function () { $(this)[0].setAttribute('viewBox', '0 0 100 100') });
  

  And Ive tried other CSS manipulation:

  .counties {
  
   text-align: left;
  

  }

  All with no luck. Can any one tell me what i'm missing in my approach here?
• How to call object from array in JavaScript

  I have array with this objects:

  const words =[ {PL: "1", EN: "a"}, {PL: "2", EN: "b"}];

  How do I call one of the values? For example:

  1

  I have tried:

  document.getElementById("word").innerHTML=Object.values(words[0]);

  but it shows

  1, a

  whole code (codepen)
• React - Game of Life - Update state of specific elements in 2D array depending on which elements are clicked by user

  I'm still learning React and working on coding John Conway's Game of Life. I have created a game board for the game using a 2D array in state. I have this 2D array stored in state in my App.js. I also have two functional components, Gameboard.js and Square.js receiving props and creating the game board.

  Gameboard.js creates a table and passed props to Square.js letting it know which squares should be highlighted and which shouldn't. In other words it let's each individual square know if the user has clicked it and if it's "alive" in the Game of Life sense.

  After a user clicks a specific square in Square.js I have a callback function triggered onClick. The callback function, aliveCallback, passes the X and Y coordinates of the specific square that was clicked back to App.js. App.js triggers a function called alive.

  When alive is called I need to update the state of the 2D array so that the specific square (it's X and Y coordinates, for example [0, 0] or [0, 1] etc...) is set to the boolean stored in state. Then, this boolean can be passed to Gameboard.js as isAlive. The game board then passes that isAlive value to Square.js and Square.js has conditional rendering that tells that individual square to be highlighted light blue.

  This has been a mouth full and it would probably be easiest to check out the Codesandbox and see the structure of the project. It also helps to mention that I am following advice a SO poster gave me in this post.

  After doing some reading and looking at the React docs it appears a good approach to this issue is to use immutability-helper and it's update function. That's the approach I have taken but I can't seem to properly update the state of the specific square clicked using it's X and Y coordinates.

  Instead of posting code here it would probably just be easier and neater to check out the code on CodeSandbox. How can I write my alive function so that it properly updates the state of whatever square is clicked on?

  Here is what I've tried:

  alive = (x, y) => {
      console.log(x, y);
  
      const data = this.state.board;
      const ySquare = y;
      const xSquare = x;
      console.log("X square is : " + xSquare);
      console.log("Y square is : " + ySquare);
  
      const updateData = update(data, {
        xSquare: {$set: this.setState({ alive: !this.state.alive })}
      });
  
    }
  

  The logic here is to try to pass xSquare and ySquare to update and then try to set alive to true for that particular square.
• Setting hidden dropdown selected value causes page reload in iOS 11 safari

  Here's my scenario. I'm using a bootstrap dropdown to create a fancy select menu. The actual <select>, used for validation and form post purposes, has it's visibility set to hidden. There is corresponding script to set the selected value of the <select> when the bootstrap dropdown <a> link is clicked.

  Here's a snippet of my code.

  <div class="dropdown dropdown-select">
      <button class="btn btn-default dropdown-toggle" id="cardSelector" type="button" 
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="selected-value">- Select Credit Card -</span>
          <span class="fa fa-angle-down"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="cardSelector">
          <li data-bind="visible: model.HasValidCardOnFile()"><a href="#" data-value="1">- Existing Credit Card -</a></li>
          <li><a href="#" data-value="0">- New Credit Card -</a></li>
      </ul>
      @Html.DropDownListFor(m => m.CardTypeId, Model.GetCardTypeSelectList(),
          new { data_bind = "value: modelInput.CardTypeId", @class = "requires-validation" })
  </div>
  @Html.ValidationMessageFor(m => m.CardTypeId)
  
  $(".dropdown-select").on('click', '.dropdown-menu a', function () {
      var $this = $(this);
      var $dropdownCtrl = $this.closest(".dropdown-select");
      $dropdownCtrl.find("select").val($this.data("value")).trigger("change");
      $dropdownCtrl.find(".selected-value").html($this.html());
      $dropdownCtrl.removeClass("open");
      return false;
  });
  

  The problem is that in iOS 11 safari, the page blows up with an error something like "An unexpected problem occurred. The page was reloaded."

  I've traced it down to this bit of code $dropdownCtrl.find("select").val($this.data("value")). Setting the value is what causes the issue, I changed it to vanilla javascript and the error still occurred.

  In testing I made the <select> visible and the issue went away. So it seems to be an issue specifically with changing the selected value of a <select> when it's not visible. I tried adding script to temporarily make it visible right before setting the selected value but this did not fix the issue, neither did changing the visibility and selecting the new value inside a setTimeout.
• How to send a php variable from a js file to a php file using ajax?

  I new with ajax and php. I have a file named as main.phpwhich contains a text box ,when the user scan a number using a scanner or just type the number with pressing the enter key ,then that number will stored by a jquery function which is located in test.js file.I would like to send that number in to a php file named fetch.phpfor processing.But it's not working as well as which is not showing any error messages.I added my snippet below.any useful help will get appreciated!!!

  //==================test.js file=============================//
  
  $('#custom-barcode').on({
      keypress: function() { typed_into = true; },
      change: function() {
          if (typed_into) {
              var php_val = $('#custom-barcode').val();
              alert('your-barcode-is' + php_val);
              $.ajax({
                  method:"post",
                  url:"fetch.php",
                  data:{barcode:php_val}
              })
              clear();
              typed_into = false; //reset type listener
          } else {
              alert('not type');
              clear();
          }
      }
  });
  
  function clear(){
      $('#custom-barcode').val('');
  }

  <input id="custom-barcode" type="number" name="custom-barcode" autofocus/>

  PHP File :- fetch.php

   <?php
       if (isset($_POST['barcode'])) {
       $bcode = $_POST['barcode'];
       echo $bcode;
       }
       else{
           echo "not set";
       }    ?>
  
• Chart.js Tooltip Positioning Following Marker

  I have been experimenting with the Chart.js plugin on my site and it seems to suit most of my needs. The only thing I need to accomplish is keeping the tooltip at the top of the chart, instead of popping up and down. It would also be nice if I could attach it to the vertical line I draw so users can have a standard reference point. Below is the snipet of my code. Any help is appreciated. Thanks!

  var ctx = document.getElementById("myChart").getContext('2d');
  
  Chart.defaults.LineWithLine = Chart.defaults.line;
  Chart.controllers.LineWithLine = Chart.controllers.line.extend({
    draw: function(ease) {
      Chart.controllers.line.prototype.draw.call(this, ease);
  
      if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
        var activePoint = this.chart.tooltip._active[0],
          ctx = this.chart.ctx,
          x = activePoint.tooltipPosition().x,
          topY = this.chart.scales['y-axis-0'].top,
          bottomY = this.chart.scales['y-axis-0'].bottom;
        // draw line
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x, topY);
        ctx.lineTo(x, bottomY);
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#000';
        ctx.stroke();
        ctx.restore();
      }
    }
  });
  
  
  var myLineChart = new Chart(ctx, {
    type: 'LineWithLine',
    data: {
      labels: ["A", "B", "C", "D", "E", "F"],
      datasets: [{
        data: [12, 19, 3, 5, 2, 3],
        radius: 0,
        borderColor: 'red',
        fill: false
      }]
    },
    options: {
      maintainAspectRatio: false,
      legend: {
        display: false
      },
      tooltips: {
        displayColors: false,
        intersect: false,
        mode: 'index',
        callbacks: {
          title: function(tooltipItems, data) {
            return '';
          },
          label: function(tooltipItem, data) {
            var datasetLabel = '';
            var label = data.labels[tooltipItem.index];
            return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '°F';
          }
        }
      }
    }
  });

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <div style="width:300px;height:100px;"><canvas id="myChart"></canvas></div>
• Codeigniter 3 blog application: $.ajax failure (error) message, does not appear

  I am working on a basic blog application in Codeigniter 3.1.8.

  There is a comment form at the end of every post. I have used this piece of jQuery code to post comments without page redirect (and, therefore, without page reload):

  $(".ajax-form").on('submit', function(evt) {
      evt.preventDefault();
      var form = $(this),
      url = form.attr('action'),
      data = form.serialize();    
      $.ajax({
        type: "POST",
        url: url,
        data: data,
        success: function(data) {
          $('#comment_add_msg').text("Your post will be published after approval")
                               .slideDown(250).delay(2500).slideUp(250);
        },
        error: function() {
          $('#comment_add_msg').removeClass('alert-success')
                              .addClass('alert-danger')
                              .text("Sorry, we could not add your comment")
                              .slideDown(250).delay(2500).slideUp(250);
        }
      });
  });
  

  The comments are posted inserted in the comments table and, as expected, an alert with the message "Your post will be published after approval" slides in then out after a short while.

  The problem is with the error message: If I change url: url to url: "test.php", there is no failure message. I expected to see "Sorry, we could not add your comment", since adding the comment in the comments table does fail. Instead, I see the same "Your post will be published after approval" message.

  Where is my mistake?
• Get Dynamic PHP Form ID using Ajax in another File

  1. There are 3 files in question.

  2. One is a dashboard.php file which contains a script tag to point to course_mg.js file.

  3. course_mg.js file uses ajax to GET course_mg.php file to display list of students.

  So here are the two above mentioned file [not including dashboard.php as it has only script tag but keep in mind it is the main page where ajax is being used].

  course_mg.php

  <?php
  
      require('../../inc/connect.php');
      if(isset($_POST['delete_course'])){
          $id = $_POST['delete_course'];
          $sql_del = "DELETE FROM courses WHERE courses.id = $id";
          $result = $mysqli->query($sql_del) or die($mysqli->error);
      if($result){
          header('location: ../dashboard.php');
      } else{
          echo "Error in deleting user";
      }
  }
  
  ?>
  
  <div class="dash_head">Manage Course</div>
  <div class="card mx-5 my-5 px-5">
  
      <h3 class="h3">View Courses Info</h3>
      <table class="table table-bordered table-sm table-hover text-center">
          <thead class="thead-light">
              <tr>
                  <th scope="col">#</th>
                  <th scope="col">Name</th>
                  <th scope="col">Created_At</th>
                  <th scope="col">Action</th>
              </tr>
          </thead>
          <tbody>
  
          <?php
          $offset = (1 - 1) * 3;
          $row_count = 3;
          $sql = "SELECT * FROM courses"; // order by id limit $row_count offset $offset"    
          $result = $mysqli->query($sql) or die($mysqli->error);  
          while($row = $result->fetch_assoc()){
              $_SESSION['id'] = $row['ID'];
              ?>
                  <tr>
                      <th scope="col">
                          <?php echo $row['ID']; ?>
                      </th>
                      <td>
                          <?php echo $row['Name']; ?>
                      </td>
                      <td>
                          <?php echo $row['Created_At']; ?>
                      </td>
                      <td>
                          <form method="POST" action="php/course_mg.php">
                              <button class="btn btn-sm bg-danger text-white" type="submit" name="delete_course" value="<?php echo $_SESSION['id'];?>">Delete</button>
                          </form>  
                      </td>
                  </tr>
                  <?php
          }
      ?>
          </tbody>
      </table>
      <div>
          <h6><em>List of Available Courses</em></h6>
      </div>
      <div>
          <nav aria-label="Page navigation example">
              <ul class="pagination">
                  <li class="page-item"><a class="page-link disabled" href="#">Previous</a></li>
                  <li class="page-item active"><a class="page-link" href="#">1</a></li>
                  <li class="page-item"><a class="page-link disabled" href="#">Next</a></li>
              </ul>
          </nav>
      </div>
  </div>
  

  course_mg.js

  document.getElementById('course_mg').addEventListener('click', load_managecourse);
  
      function load_managecourse(e) {
  
          e.preventDefault();
  
          var xhr = new XMLHttpRequest();
  
          xhr.open('GET', 'php/course_mg.php', true);
  
          xhr.onload = function () {
  
              if(this.status == 200) {
                  document.getElementById('showresults').innerHTML = this.responseText;
                  document.getElementById('ID').addEventListener('submit', deleteCourse(this.value));
  
                  function deleteCourse($id) {
  
                      e.preventDefault();
                      console.log($id);
                      var name = document.getElementById(ID).value;
  
                      console.log(name);
  
                      var params = "delete_course=" + name;
  
                      var xhr = new XMLHttpRequest();
  
                      xhr.open('POST', 'php/course_mg.php', true);
  
                      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  
                      xhr.onload = function() {
                          if(this.status == 200){
                              document.getElementById('userAdded').style.padding = "15px 0px";
                              document.getElementById('userAdded').style.borderRadius = "200px";
                              document.getElementById('userAdded').innerHTML = `
                                  Course Deleted
                              `;
                          }
                      }
  
                      xhr.send(params);
                  }
              }
          }
          xhr.send();
      }
  

  4. Now this is working perfectly in PHP but failing in AJAX precisely because I am not able to figure out how to get dynamic php form id in javascript.

  For instance this is what I want to do:

  <form id="dynamic_id_based_on_user_id_extracted_from_database">
   <button type="submit" name="delete_course" value="<?php echo $_SESSION['id'];?>">Delete</button>
  </form>
  

  There is one value I want of formID and another the value mentioned in value of button in the course_mg.js The code for this purpose starts from below mentioned line: before that it's loading the same course_mg.php page to get the page, afterwards on clicking delete it is trying to delete the user.

  document.getElementById('ID').addEventListener('submit', deleteCourse(this.value));
  

  I want to know how can I get 'ID' placeholder dynamically from the above form?
• Run Powershell script from web app user form data

  I have a .Net c# web app that has a form where a user fills out the first name, last name, and the location for a new user and I want to take the information from the form, create a cmdlet that is inserted into powershell to run when the user clicks a submit button. I am having a hard time understanding how to take the return value (cmdlet for a new user that I would manually type in powershell to create new user) and pass that value (cmdlet) into powershell to run. Can anyone point me in the correct direction?
• unable to install ui-grid-auto-fit-columns for Angularjs 1.6 project

  I am working with Angularjs 1.6 and ui-grid 4.4.2 and I hit a snag. I need my grid column widths to expand to the widest content in the column. I found an NPM Package that does this but I am unable to install it.

  When I include the package in my angular module I get the following error:

  Unhandled exception at line 5014, column 9 in http://localhost:29236/Scripts/angular.js
  0x800a139e - JavaScript runtime error: [$injector:modulerr] Failed to instantiate module CRNApp due to:
  Error: [$injector:modulerr] Failed to instantiate module ui.grid.autoFitColumns due to:
  
  Error: [$injector:nomod] Module 'ui.grid.autoFitColumns' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
  

  Part of my Angular definition:

  (function () {
      'use strict';
  
      angular.module('CRNApp', ['ui.bootstrap', 'ui.grid', 'ui.grid.autoFitColumns', 'ui.grid.autoResize', 'ui.grid.emptyBaseLayer', 'ui.grid.selection', 'toaster','ngAnimate']);
  
      MainController.$inject = ['$scope', '$http', '$uibModal', '$log', 'uiGridConstants', '$rootScope','toaster'];
  
      angular.module('CRNApp')
      .controller('MainController', MainController);
  

  The installation instructions are at https://github.com/Den-dp/ui-grid-auto-fit-columns

  The install command is: npm install ui-grid-auto-fit-columns -S

  After I typed int he NPM install command I saw a new set of folders appear:

  I am inexperienced with Angularjs and NPM so I am not sure what I am doing wrong. Any ideas?
• .NET Framework MVC and Web Api Auth JWT

  I have a project in MVC using .NET Framework v4.7 with some WebApi on it. What i need to know is how to use a middleware between then to authorize a JWT for HTTP requests and MVC Action requests.

  I've search everywhere looking for a solution sample, but i dont find.

  If anyone could help, that would be gratefull.

  Sorry for the english.