How get a variable from HTML in JavaScript/Ajax Call

Question

I'm using Zend Framework 2. I would like to know how to get data defined in html in my javascript code.

html

<tr class="MyClass" data-MyData="<?php echo json_encode($array);?>">

javascript

$(document).on('click','.MyClass', function () {

        var temp =document.getElementsByClassName("data-MyData");

        $.ajax({
            url: path_server + "pathDefinedInMyConfig",
            type: 'post',
            encode: true,
            dataType: 'json',
            data: {
                'temp ': temp 
            },
            success: function (data) {
                //some code
            },
            error: function () {
                alert("ERROR");
            }
        });
});

The problem is I don't have access to row in my Controller method. And i want to have access to My $array defined in html in my Controller.

do you know which element is the tr with class MyClass in your page? I mean: 1st? 3rd? 4th? — Behrad Khodayar
– Behrad Khodayar, Commented Feb 24, 2017 at 8:25
you may change var temp =document.getElementsByClassName("data-MyData"); to var tmp = this.getAttribute('data-MyData'); — Behrad Khodayar
– Behrad Khodayar, Commented Feb 24, 2017 at 8:29

Carsten Løvbo Andersen · Accepted Answer · 2017-02-24 08:18:21Z

1

Problem is that you are trying to find a class by the name data-MyData, but the object you "want" to look for is "MyClass"

Try something like var temp =document.getElementsByClassName("MyClass").attr("data-MyData");

Even better is that since you click on the object with MyClass you can use $(this).attr('data-MyData');

then result will look like: var temp = $(this).attr('data-MyData');

answered Feb 24, 2017 at 8:18

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Behrad Khodayar · Accepted Answer · 2017-02-24 08:35:10Z

1

Simply replace temp var assignment line:

var temp =document.getElementsByClassName("data-MyData");

with this one:

var temp = this.getAttribute("data-MyData");

answered Feb 24, 2017 at 8:35

Behrad Khodayar

2,8372 gold badges21 silver badges34 bronze badges

Comments

Niek van der Maaden · Accepted Answer · 2017-02-24 08:18:33Z

0

Since you use jQuery use the following:

$('.MyClass').data('MyData')

or

 $('.MyClass').attr('data-MyData')

answered Feb 24, 2017 at 8:18

Niek van der Maaden

4823 silver badges16 bronze badges

Comments

Aman Singh · Accepted Answer · 2017-02-24 08:20:55Z

0

use like this-

$(document).on('click','.MyClass', function () {

        var temp =$(this).attr('data-MyData');

        $.ajax({
            url: path_server + "pathDefinedInMyConfig",
            type: 'post',
            encode: true,
            dataType: 'json',
            data: {
                'temp ': temp 
            },
            success: function (data) {
                //some code
            },
            error: function () {
                alert("ERROR");
            }
        });});

answered Feb 24, 2017 at 8:20

Aman Singh

808 bronze badges

Comments

Jai · Accepted Answer · 2017-02-24 08:23:18Z

0

You have a wrong selector. document.getElementsByClassNames() returns the collections so you have to loop through to get the target element:

var temp =document.getElementsByClassName('MyClass');
[].forEach.call(temp, function(el){
   console.log(el.dataset['MyData']);
});

or as you are using jQuery then you can use .data():

var temp =$(this).data("MyData");

and with javascript:

var temp =this.dataset["MyData"];
// var temp =this.dataset.MyData; // <---this way too.

answered Feb 24, 2017 at 8:23

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

How get a variable from HTML in JavaScript/Ajax Call

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related