Malfunctioning text insertion feature within an Ajax loop

I needed to update the text within each span that has the done_by class, so I decided to utilize Ajax.

For some specific reasons, I have to send the ID of each span to my display_name.php. The ID consists of two numbers separated by an underscore, which is why I will be using the .split method.

Here is the code snippet:

$('.done_by').each(function()
{
    temp = $(this).attr('id').split("_");

    $.post("../functions/ajax/display_name.php",
    {
      id_case: temp[0],
      id_task: temp[1]
    },
    function(data,status){
        $(this).html(data);                 
        //alert("Data: " + data + "\nStatus: " + status);
    });             
});

The values of id_case and id_task are successfully sent to display_name.php. I am unsure about the syntax of $(this).html(data);

Currently, it does not display anything. However, when I use alert(data), it shows everything correctly. I suspect there might be a syntax error in my code.

javascriptajax

Answer №1

The 'this' object refers to the current function itself. To change it, do the following.

$('.completed_by').each(function()
{
  temp = $(this).attr('id').split("-"); 
  var selfRef = this;

  $.post("../functions/ajax/display_results.php",
  {
    task_id: temp[0],
    user_id: temp[1]
  },
  function(result,status){
    
    $(selfRef).html(result);         
    //alert("Result: " + result + "\nStatus: " + status);
  });             
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`vue.js: li element tag numbers not displaying correctly`

Issue with Number list not displaying correctly using Vue.js I have tried sending it like this. Is there a fix for this problem? This is the code snippet I used to output in Vue.js: p(v-html="selectedProduct.description") Snapsho ...

javascriptvue.js

Leveraging JSON for fetching distinct identifiers from a database

When a user hovers over a parent span containing an empty img tag, I use JSON and jQuery to retrieve the src of the image from the database. The issue arises when the retrieved src is applied to all looped span images on the same page, instead of each imag ...

javascriptjqueryhtmljson

Breaking down a string using JavaScript

Is there a way to shorten the following code? It currently works for me, but it seems quite long-winded. var str = "some title of an event here, weekday 17:00 – 18:00 o’clock, with name of a person"; var date = str.split(&apo ...

javascriptarraysstringsplittrim

The appearance of a Tom-select with the bootstrap 5 theme sets it apart from a bootstrap 5.1.3 styled select

Premise In order to ensure consistent display of selects across Windows, Linux, and Mac in my project, I have implemented the following combination: tom-select v2.0.1 JavaScript library; Bootstrap v5.1.3 frontend framework; Symfony v5.4.5 backend framewo ...

javascriptsymfonysassbootstrap-5tom-select

Class-based Button Transition Effect failing to operate as intended

I want to trigger these 3 events simultaneously when a form is filled out, all initiated by the same button. I have been able to make it work using 3 classes named: "draw dj", which represents the first event "draw1 dj", which signifies the 2nd event "d ...

javascripthtmlcssreactjs

JavaScript does not disappear after employing ajax

My website has two .php pages, each displaying a few info buttons that can be toggled using the following code: $(document).on("click", ".glyphicon-info-sign", function(){ $(".glyphicon-info-sign").not(this).popover("hide"); $(this).popover("toggl ...

javascriptjqueryajaxtwitter-bootstrap

Animating a vertical line moving gracefully between two points

I am facing a challenge that requires your expertise. You may have come across an animated line resembling a scanner in various applications. I need something similar, but in the form of a graph. Specifically, I am looking to create a vertical line that a ...

javascriptjqueryflot

Modify the scoped variable using Angular's $resource module

I am facing an issue with my Angular application where I cannot get the results of a second $resource call to update a scoped variable. Initially, I am able to generate the initial view from an Angular $resource call to an external API and display the data ...

javascriptjsonangularjsangular-resourceangular-http

Unexpected Behavior: Performance API Issue in Vue.js with Javascript Integration

Currently, I am working on a small project which requires me to calculate the time taken for each page to load. To achieve this, I am utilizing the Performance API. Specifically, I am using the getEntriesByName() method within the Performance API as demons ...

javascriptvue.js

PostgreSQL error: table column does not exist in Sequelize

Currently, I'm in the process of developing a compact webservice utilizing Node.js, Express, PostgreSQL database while incorporating Sequelize. The initial step involved setting up the database using the following SQL queries in psql: CREATE TABLE Con ...

javascriptnode.jspostgresqlexpresssequelize.js

Tips for targeting a specific div element within a webview using code in Android app development

During my exploration of focusing on a webview in Android development, I encountered a question regarding setting focus on a div element. Despite making the div element editable, neither webView.requestFocus() nor document.getElementById('container&ap ...

javascriptandroidwebview

I would like to implement a delay on this button so that when it is clicked, there is a pause before navigating

When I add the delay, it doesn't work, and when I remove it, it does. What can I do to make this button have a href link that delays before redirecting to another page? (I'm a newbie) I need to click and wait 3 seconds before navigating to other ...

javascripthtmljquerycss

How can users create on-click buttons to activate zoom in and zoom out features in a Plotly chart?

I am currently working on an Angular application where I need to implement zoom in and zoom out functionality for a Plotly chart. While the default hoverable mode bar provides this feature, it is not suitable for our specific use case. We require user-cr ...

javascriptangulartypescriptplotlyplotly.js

Setting the width of a parent div tag in CSS based on its children tags

My goal is to have a parent div tag with several children div tags placed horizontally. Since the number of children tags is not known in advance, I cannot set the width of the parent div tag using CSS alone, so I am using JavaScript for this purpose. var ...

javascriptjqueryhtmlcss

The issue is that dates submitted from jQuery are not being captured in the POST variable in

I'm currently in the process of integrating fullcalendar into my php application. However, I've encountered an issue when trying to save events to the database - specifically, the database only accepts title and url if they are enclosed in doubl ...

javascriptphpjquerymysqlajax

Issue in the code causes a 500 error in admin-ajax.php

Recently, I noticed a change in how WordPress handles errors when writing functions for ajax calls on the front end. In the past, if there was an error in my code, I would easily see it in the Network tab of the Chrome inspector under my admin-ajax.php cal ...

ajaxwordpresserror-handling

Ways to validate a foreign key in Strongloop?

I am faced with a situation where I have a collection of categories and a separate collection of places, with each place having a foreign key that corresponds to a category ID. You can find the list of categories in categorie.json: http://pastebin.com/ttu ...

javascriptjsonloopbackjsupsert

the key of the global variable object is not displaying as being defined

Currently tackling some old legacy code that heavily relies on JQuery, and I'm stuck at a critical juncture. It seems like the process begins with initializing vm.products in newView = new DOMObj(). Then comes the data call, where a worker iterates t ...

javascriptjquery

Error: Callstack Overflow encountered in TypeScript application

Here is the code snippet that triggers a Callstack Size Exceeded Error: declare var createjs:any; import {Animation} from '../animation'; import {Events} from 'ionic-angular'; import { Inject } from '@angular/core'; exp ...

javascriptangulartypescriptionic-framework

The useEffect hook fails to trigger upon routing changes

I'm completely new to the world of react hooks, rendering, and routing. App.js function App() { return ( <div className="App"> <Navbar /> </div> ); } Navbar.js export default function Navbar() { re ...

javascriptreactjsreact-hooksaxiosreact-router