Is there a way to retrieve text content from a modal using JavaScript?

I am using ajax to fetch values from my table.

$(data.mesIzinTanimList).each(function (index, element) {

    if (element.izinTanimiVarmi == 'yok')
        tr = "<tr class='bg-warning text-warning-50' row='" + element.userId + "' >";
    else
        tr = "<tr class='bg-light text-white-50 ' row='" + element.userId + "' >";

    tr += "<td>" + element.sicilNo + "</td>";
    tr += "<td>" + element.adSoyad + "</td>";
    tr += "<td>" + element.bagliOlduguKisi + "</td>";
    tr += "<td>" + element.bagliOlduguKisiSicilNo + "</td>";
    tr += "<td style='display:none'>" + element.bagliOlduguKisiId + "</td>";
    tr += "<td> <button onclick= 'tanimlaBtn(" + element.userId + " , " + element.adiSoyadi + " ," + element.bagliOlduguKisiId + ", " + element.bagliOlduguKisi + ")' type='button' class ='btn btn-info'> Tanımla </button></td>";
    tr += "</tr>";

    $('#IzinTanimListe').append(tr);
});

A modal pops up when the define button is clicked.

function tanimlaBtn(userId, adSoyad, bagliOlduguKisiId, bagliOlduguKisi) {        
    document.getElementById('userId').value = userId;
    document.getElementById('bagliOlduguKisiId').value = bagliOlduguKisiId;
    document.getElementById('bagliOlduguKisi').value = bagliOlduguKisi;
    document.getElementById('adSoyad').value = adSoyad;      
}

The adSoyad and bagliOlduguKisi data is showing as undefined instead of strings. How can I fix this issue?

Answer №1

Remember to enclose the parameters for the function in double quotes and use escape characters like \"

Here's a suggestion for replacing the code:

<button onclick= 'tanimlaBtn(" + element.userId + " , " + element.adiSoyadi + " ," + element.bagliOlduguKisiId + ", " + element.bagliOlduguKisi + ")'

Replace it with:

<button onclick='tanimlaBtn(" + element.userId + " , " + element.adiSoyadi + " ,\"" + element.bagliOlduguKisiId + "\", \"" + element.bagliOlduguKisi + "\")' 

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

Oops! The system encountered a problem: the property 'modalStack' is not recognized on the type 'NgxSmartModalService'. Maybe you meant to use '_modalStack' instead?

Currently, I'm facing an issue while attempting to run ng build --prod in my Angular 6 project. I have also incorporated the NgxSmartModal package for handling modals. Unfortunately, the build process is failing and I can't seem to figure out why ...

Divide JSON arrays into separate select boxes

I have integrated AngularJS into certain sections of my website, rather than using it for the entire site. Currently, I am dealing with a scenario where I have a pair of select boxes, one dependent on the other. One box contains a list of countries, while ...

Unexpected behavior: jQuery AJAX request isn't triggering the alert function as expected

I can't figure out why this code isn't working: $.get("/some/url/", function(event) { alert('hey'); }); When I click the button, I can see the response being executed in the Firefox console, and it shows a successful status (200 O ...

Avoid using the jQuery.get() function

$.get('./mods/webim_offline_email.php', {name: $('#webim_name').val(), email_address: $('#webim_email_address').val(), msg: $('#webim_msg').val()}, function (data){ alert(1); $('#webim_offline_form' ...

What is the best way to automatically insert data into a database at regular intervals, while ensuring that users are unable to manipulate the timing through inspect

Is there a secure way to insert 1 point into the database every x seconds without allowing users to manipulate the interval time through inspect element? var time = 1; var interval = setInterval(function() { if (time != time + 1) { ...

Is there a way to ensure that an external file function completes before proceeding with the main code execution?

In my project, I have two key JavaScript files: main.js and load.js. Within load.js, there are two essential functions - getData, which makes an AJAX post call, and constHTML, which appends data based on the JSON array returned from the AJAX call. This app ...

Sending data to and retrieving data from a server

Just a quick query. I've been using ajax POST and GET methods to send JSON data to a server and then fetch it back. However, I'm facing some confusion while trying to extract JSON information from the GET call. getMessage = function(){ $.ajax ...

What happens in mongoose if one of several consecutive queries fails?

Currently, as I work on my API, I am utilizing two Models: SongModel and UserModel. Whenever a new song is saved, I also execute a query to link the song._id to the user who created it. Unfortunately, a mistake in my code caused the second query to throw a ...

Enhancing OpenAI API Responses with WebSocket Streaming through Express Middleware Integration

  Currently, I am in the process of developing an Express.js application that requires integration of OpenAI's streaming API responses to be transmitted in real-time to a front-end via WebSockets. Even though I have established communication between ...

Attempting to bring in HTML through a helper, but Rails doesn't seem too thrilled about it

I have a form that triggers a remote GET request, leading to the display of a modal. The issue I'm facing is that multiple actions can utilize the same model, so I am attempting to employ a helper and jQuery to showcase different data based on what is ...

Unable to retrieve the parent element using jQuery

I am facing an issue with my html structure that is generated dynamically through a foreach loop. I have attempted to remove the entire <a> element by accessing it from its ACTIVE HYPERLINK. However, all my efforts seem to be in vain as I am unable t ...

When using Google Maps Autocomplete, always make sure to input the full state name instead of just the state

Utilizing the Google Maps autocomplete API, we have enabled our customers to search for locations in the format of city, state, country. The functionality is effective overall, but a recurring issue arises when searching for cities, such as 'Toronto&a ...

What could be the reason my homing missile algorithm is not functioning properly?

The code I'm currently using for my projectile was heavily inspired by an answer I found on a game development forum, but it's not working as expected. Most of the time, the initial direction of the projectile is perpendicular to the target inste ...

Solving the problem of Axis label alignment in Three.js grid and techniques for visualizing x, y, z data on

I have been tasked with plotting well deviation surveys on a 3D grid. After referencing several articles online, I successfully created a 3D grid of the required size. However, I am currently struggling with positioning the labels for the x, y, and z axis ...

Vue.js tutorial: Disabling button dynamically based on empty data array

My project involves creating a shopping cart application using Vue.js: var app = new Vue({ el: "#app", data: { items: [ { id: 1, name: "Item 00", spec: "spec 00", price: 400, quantity: 1, unit: &quo ...

Exploring Vue JS: Decoupling variables in separate files and effective ways of accessing them

In my Vue project, I am looking to create a dedicated .js file to store multiple variables that can be easily accessed by other components. I am seeking advice on the most efficient method to achieve this and would greatly appreciate any examples provide ...

Tips on enclosing <li> elements within <ul> tags

Whenever I trigger the button within the .items class, it generates <li> elements in the following manner: <ul class="items"> <ul class="items"> <li>img1</li> ...

Modifying the status of a link using jQuery

My ajax function handles two different outcomes based on the class of the link that is clicked. To avoid reloading the entire page when the link is clicked, I have utilized the following code: Everything seems to be working fine, however jQuery still rec ...

Using specific delimiters in Vue.js components when integrating with Django and Vue-loader

While working on my Django + Vue.js v3 app, I came across a helpful tool called vue3-sfc-loader. This allows me to easily render .vue files using Django, giving me the best of both worlds. The current setup allows Django to successfully render the .vue fil ...

Global variables become undefined after utilizing jQuery's getScript() method for assignment

I have a few global variables named var1, var2, and so on... Instead of immediately initializing these variables, I wait until later to instantiate them using jQuery from a constructor located in a separate javascript file. However, after this instantiat ...