jquery attribute. jquery js

Question

$(".dum").click(function() {
    document.getElementById("ev").value=$(this).attr("data-name");
   
    $("#test-form").dialog("open");
});

// this is just the test
 
 
cell2.innerHTML = '<span  class="dum" style="color:'+testvalues[i]+'; font-size:20px;">'+testvalues[i + 2] || ''+'data-name=" '+testvalues[i+2] +'">'+ '</span>';


<div id="test-form" title="Event Information">
 <p>Event:</p> 
 <input id= "ev" type="text"  name="fullname" disabled />
</div>

I have a <span> where I have values from db. And I am trying to get those value to a input box using jquery attr but I am getting undefined. The attr name is "data-name". I do not know what I am doing wrong here. I will be very thankful for any help.

the span tag you are appending doesn't have a class called test — karthick, Jun 05 '17 at 22:49
Below your `input` tag, but that has nothing to do with your problem. Can you explain what you're trying to do here? `''+testvalues[i + 2] || ''+'data-name=" '+testvalues[i+2] +'">'+ '';` What does `testvalues` look like? Can you inspect the spans you are inserting? Is there actually an attribute on the DOM? My impression is that you're never actually writing the attr. — Daniel Bang, Jun 05 '17 at 23:17
testvalues[i] outputs the date to table and testvalues[I+1] prints the name. and when clicked on particular table element shows the name in inputbox. — david, Jun 05 '17 at 23:26

score 1 · Accepted Answer · answered Jun 05 '17 at 23:47

1st: you need to rewrite the span

2nd: you need Event binding on dynamically created elements?

This is an example

$(document).ready(function(){
  var testvalues = ['red','no','Click Me','name'],
      i = 1;
  $('#cell2').html('<span  class="dum" style="color:'+testvalues[i]+'; font-size:20px;" data-name="'+testvalues[i+2] +'">'+testvalues[i+1] +'</span>');

  $(document).on('click' , ".dum" , function() {
    $("#ev").val($(this).data("name")); 
    //$( "#test-form").dialog("open");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="cell2"></div>

<div id="test-form" title="Event Information">
  <p >Event:</p> 
  <input id= "ev" type="text"  name="fullname" disabled />
</div>

Note: I don't prefer mixing jquery with pure js so I used jquery

Mohamed-Yousef you are two awesomeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee! thx for great help :) — david, Jun 06 '17 at 00:20

score 0 · Answer 2 · answered Jun 05 '17 at 23:32

0

Please check the spans you are inserting. I don't think the problem is related to jQuery, rather that you are not actually writing the data-name attribute. What is the || on the innerHTML for? Because of that || you are only writing the first part of the string (everything to its left) and nothing to its right (the data-name attribute).

answered Jun 05 '17 at 23:32

Daniel Bang

715
6
21

danie I removed || tag and it worked perfect.however its writing "data-name" to the table. I was trying to show attr values only when user clicks on the table element with class("dum") – david Jun 05 '17 at 23:39

score -1 · Answer 3 · answered Jun 05 '17 at 22:46

-1

Use the jQuery data attribute instead.

 document.getElementById("ev").value=$(this).data("name");

answered Jun 05 '17 at 22:46

Korgrue

3,430
1
13
20

no reason this would work if `attr('data-name')` doesn't work – charlietfl Jun 05 '17 at 22:50
attr('data-name'), I am getting undefined. – david Jun 05 '17 at 22:55
I tested this using your code, and I am getting a successful data retrieval. I think your issue is not in the code that you have presented. Perhaps the bug is getting introduced elsewhere? – Korgrue Jun 07 '17 at 15:04

jquery attribute. jquery js

3 Answers3