JQuery ডেটা () API ব্যবহার করে ডেটা অ্যাট্রিবিউট সেট করতে অক্ষম

Question

আমি এমভিসি ভিউতে নিম্নলিখিত ক্ষেত্রটি পেয়েছি:

@Html.TextBoxFor(model => model.Course.Title, new { data_helptext = "Old Text" })</span>

একটি পৃথক জেএস ফাইল এ, আমি data-helptextএকটি স্ট্রিং মান এর জন্য বৈশিষ্ট্য সেট করতে চাই । আমার কোডটি এখানে:

alert($(targetField).data("helptext"));

$(targetField).data("helptext", "Testing 123");

alert()কল কাজ করে জরিমানা, এটা পাঠ্য "প্রাচীন পাঠ্য" একটি সতর্কতা ডায়ালগে দেখায়। তবে, data-helptext"টেস্টিং 123" এ্যাট্রিবিউট সেট করার কলটি কার্যকর হয় না। "পুরাতন পাঠ্য" এখনও বৈশিষ্ট্যের বর্তমান মান।

আমি কি ডেটাতে কল () ভুলভাবে ব্যবহার করছি? আমি ওয়েবে এটি সন্ধান করেছি এবং আমি কী ভুল করছি তা দেখতে পাচ্ছি না।

এইচটিএমএল মার্কআপ এখানে:

<input data-helptext="Old Text" id="Course_Title" name="Course.Title" type="text" value="" />

Comments

কোডটি ঠিক আছে বলে মনে হচ্ছে। এই ডেমোতে কোনও সমস্যা নেই । আপনি jQuery এর কোন সংস্করণ ব্যবহার করছেন?

— andyb

আমি 1.5.1 ব্যবহার করছি যা এএসপি নেট এমভিসি প্রকল্পের টেম্পলেটটি নিয়ে এসেছে। এটা কি আমার jQuery আপডেট করা প্রয়োজন?

— জেসন ইভান্স

ঠিক আছে, এটি তখন jQuery এর সংস্করণ নয়। আমি ভাবছিলাম এটি সত্যিই পুরানো সংস্করণ হতে পারে। আপনি যে ডেটা () এপিআই ব্যবহার করছেন তা v1.2.3

— andyb

আপনি দয়া করে মার্কআপ যোগ করতে পারেন? আপনি কি কাস্টম HTML5 data-বৈশিষ্ট্য ব্যবহার করছেন ?

— andyb

আপনি মানটি কীভাবে পর্যবেক্ষণ করছেন? jQuery মানটি ডিওমে ফিরিয়ে ধরে না, যদিও এটি সঠিকভাবে এটি আপডেট করে। একটি পরীক্ষা এবং ব্যাখ্যা জন্য নীচে আমার উত্তর দেখুন

— andyb

Answer 1

এটি ডকুমেন্টেশনে উল্লেখ করা হয়েছে.data()

ডেটা-বৈশিষ্ট্যগুলি প্রথমবারে ডেটা সম্পত্তি অ্যাক্সেস করার পরে টানা হয় এবং তারপরে আর অ্যাক্সেস বা রূপান্তরিত করা হয় না (সমস্ত ডেটা মানগুলি পরে jQuery এ অভ্যন্তরীণভাবে সংরক্ষণ করা হয়)

এটিও অন্তর্ভুক্ত ছিল বিষয়টিতে কেন jQuery f .fn.data () এ সম্পর্কিত html 5 ডেটা- * বৈশিষ্ট্যগুলি আপডেট করবেন না?

নীচে আমার মূল উত্তরের ডেমোটি আর কাজ করবে বলে মনে হচ্ছে না।

আপডেট উত্তর

আবার, ডকুমেন্টেশন থেকে.data()

এম্বেড থাকা ড্যাশ সহ বৈশিষ্ট্যগুলির চিকিত্সা ডাব্লু 3 সি এইচটিএমএল 5 নির্দিষ্টকরণের সাথে সঙ্গতি রাখতে jQuery 1.6 এ পরিবর্তন করা হয়েছিল।

অনেক দূরে <div data-role="page"></div> নিম্নলিখিত জন্য সত্য$('div').data('role') === 'page'

আমি মোটামুটি নিশ্চিত যে $('div').data('data-role')অতীতে কাজ করেছে তবে এটি আর হবে বলে মনে হয় না। আমি একটি ভাল শোকেস তৈরি করেছি যা কনসোল খোলার চেয়ে এইচটিএমএলে লগ হয় এবং মাল্ট-হাইফেনের একটি অতিরিক্ত উদাহরণটি উটকেস ডেটা- বৈশিষ্ট্য রূপান্তরতে যুক্ত করেছে।

আপডেট হওয়া ডেমো (2015-07-25)

এছাড়াও jQuery ডেটা বনাম অ্যাটর দেখুন?

এইচটিএমএল

<div id="changeMe" data-key="luke" data-another-key="vader"></div>
<a href="#" id="changeData"></a>
<table id="log">
    <tr><th>Setter</th><th>Getter</th><th>Result of calling getter</th><th>Notes</th></tr>
</table>

জাভাস্ক্রিপ্ট (jQuery 1.6.2+)

var $changeMe = $('#changeMe');
var $log = $('#log');

var logger;
(logger = function(setter, getter, note) {
    note = note || '';
    eval('$changeMe' + setter);
    var result = eval('$changeMe' + getter);
    $log.append('<tr><td><code>' + setter + '</code></td><td><code>' + getter + '</code></td><td>' + result + '</td><td>' + note + '</td></tr>');
})('', ".data('key')", "Initial value");

$('#changeData').click(function() {
    // set data-key to new value
    logger(".data('key', 'leia')", ".data('key')", "expect leia on jQuery node object but DOM stays as luke");
    // try and set data-key via .attr and get via some methods
    logger(".attr('data-key', 'yoda')", ".data('key')", "expect leia (still) on jQuery object but DOM now yoda");
    logger("", ".attr('key')", "expect undefined (no attr <code>key</code>)");
    logger("", ".attr('data-key')", "expect yoda in DOM and on jQuery object");

    // bonus points
    logger('', ".data('data-key')", "expect undefined (cannot get via this method)");
    logger(".data('anotherKey')", ".data('anotherKey')", "jQuery 1.6+ get multi hyphen <code>data-another-key</code>");
    logger(".data('another-key')", ".data('another-key')", "jQuery < 1.6 get multi hyphen <code>data-another-key</code> (also supported in jQuery 1.6+)");

    return false;
});

$('#changeData').click();

---

পুরানো ডেমো

---

আসল উত্তর

এই এইচটিএমএলের জন্য:

<div id="foo" data-helptext="bar"></div>
<a href="#" id="changeData">change data value</a>

এবং এই জাভাস্ক্রিপ্ট (jQuery 1.6.2 সহ)

console.log($('#foo').data('helptext'));

$('#changeData').click(function() {
    $('#foo').data('helptext', 'Testing 123');
//  $('#foo').attr('data-helptext', 'Testing 123');
    console.log($('#foo').data('data-helptext'));
    return false;
});

ডেমো দেখুন

ডিওএম পরিদর্শন করার জন্য ক্রোম ডেভটুলস কনসোল ব্যবহার করে , কনসোলে দেখা মানটি আপডেট $('#foo').data('helptext', 'Testing 123'); করে না তবে তা করে।$('#foo').attr('data-helptext', 'Testing 123');

Comments

কী বদলেছে তা নিশ্চিত নন, তবে আপনার

— ফিডাল

তাহলে jQuery এর বিন্দুটি কী আপনি দ্বিতীয় যুক্তিতে রাখার অনুমতি দিচ্ছেন? জেএস ভেরিয়েবল ক্যাশে সঞ্চিত মান আপডেট করতে?

— আহ্নবিজক্যাড

@gWo আমি নিশ্চিত নই যে আমি আপনার প্রশ্নটি পুরোপুরি বুঝতে পেরেছি তবে আমি ধরে নিয়েছি যে আপনি jQuery 1.6.2 ব্যবহার করে ২০১১ সাল থেকে মূল উত্তরটি উল্লেখ করছেন। যদি তাই হয় তবে। data('key', 'value')পদ্ধতি আছে jQuery এর ক্যাশের মধ্যে তবে সম্পাদনার কারণে (আমি করে DOM পরিব্যক্তি অনুমান) করে DOM নিজেকে আপডেট করা হয় না জন্য মান আপডেট করুন।

— andyb

সুতরাং আপনি যদি ডিওএম আপডেট করতে চান, আপনি ঠিক করেছেন কি না .attr('key','value')তা নির্বিশেষে আপনার করা দরকার .data('key', 'value')? এটি আমার কাছে অপ্রয়োজনীয় বলে মনে হচ্ছে এবং আপনি এমন কোনও দৃশ্যের কল্পনা করতে সমস্যা হচ্ছেন যেখানে আপনি ক্যাশেড ডিওমে লিখতে চান, তবে আসল ডোম নয়। হয়তো আমি jQuery ক্যাশে বুঝতে পারি না; তাহলে কি কোনও দর্শক .data()তাদের পর্দায় পরিবর্তিত সমস্ত জিনিস দেখতে পাবেন , না তারা তা করবেন না?

— আহ্নবিজক্যাড

সুতরাং এটি কেবল পারফরম্যান্সের বিষয় নয়; তাদের তুলনা করা যায় না। তাদের সম্পূর্ণ ভিন্ন উদ্দেশ্য রয়েছে এবং তারা DOM এর বিভিন্ন "সংস্করণ" পরিবর্তন করে। সুতরাং এই প্রশ্নে ফিরে যান: .ডাটা () ব্যবহারের বিন্দুটি কী? যদি আপনাকে ACUTAL DOM পরিবর্তন করতে .attr () করতে হয়? অপ্রয়োজনীয় মনে হচ্ছে

— আহ্নবিজক্যাড

Answer 2

আমি মারাত্মক সমস্যা ছিল

.data('property', value);

এটি data-propertyবৈশিষ্ট্যটি সেট করে নি ।

JQuery এর ব্যবহার শুরু করেছেন .attr():

মিলিত উপাদানগুলির সেটে প্রথম উপাদানটির জন্য একটি গুণকের মানটি পান বা প্রতিটি মিলিত উপাদানের জন্য এক বা একাধিক বৈশিষ্ট্য নির্ধারণ করুন।

.attr('property', value)

মান সেট করতে এবং

.attr('property')

মান পুনরুদ্ধার করতে।

এখন এটি কাজ করে!

Comments

আমার জন্য আমি ডেটা দিয়ে ডেটা সম্পত্তি পরিবর্তন করতে সক্ষম হয়েছি () তবে আমি বিকাশকারী সরঞ্জামগুলিতে বিজ্ঞপ্তি পেয়েছি যা এটি পরিবর্তনটি দেখায় না, সুতরাং সেই কারণেই আমি

— অ্যাটর

Answer 3

@ অ্যান্ডিবের গৃহীত উত্তরে একটি ছোট বাগ রয়েছে। উপরে তার পোস্টে আমার মন্তব্য আরও ...

এই এইচটিএমএলের জন্য:

<div id="foo" data-helptext="bar"></div>
<a href="#" id="changeData">change data value</a>

আপনাকে এই জাতীয় বৈশিষ্ট্যটি অ্যাক্সেস করতে হবে:

$('#foo').attr('data-helptext', 'Testing 123');

তবে এর মতো ডেটা পদ্ধতি:

$('#foo').data('helptext', 'Testing 123');

.ডাটা () পদ্ধতির জন্য উপরের ফিক্সটি "অপরিজ্ঞাত" প্রতিরোধ করবে এবং ডেটা মান আপডেট হবে (যখন এইচটিএমএল হবে না)

"ডেটা" বৈশিষ্ট্যের বিন্দু হ'ল উপাদানটির সাথে মানটি (বা "লিঙ্ক") বাঁধাই। খুব অনুরূপonclick="alert('do_something')"বৈশিষ্ট্যের , যা উপাদানটির সাথে একটি ক্রিয়াকে আবদ্ধ করে ... পাঠ্যটি বেহুদা হয় আপনি যখন উপাদানটিতে ক্লিক করেন তখন অ্যাকশনটি কাজ করতে চান।

একবার ডেটা বা ক্রিয়া উপাদানটির সাথে আবদ্ধ হয়ে গেলে সাধারণত * এইচটিএমএল আপডেট করার প্রয়োজন হয় না, কেবলমাত্র ডেটা বা পদ্ধতি হয়, কারণ এটিই আপনার অ্যাপ্লিকেশন (জাভাস্ক্রিপ্ট) ব্যবহার করবে। পারফরম্যান্স অনুসারে আপনি কেন এইচটিএমএল আপডেট করতে চান তা আমি দেখতে পাই না, এইচটিএমএল বৈশিষ্ট্যটি কেউ দেখতে পায় না (ফায়ারব্যাগ বা অন্যান্য কনসোল বাদে)।

আপনি যেভাবে এটি ভাবতে চাইতে পারেন তা: এইচটিএমএল (গুণাবলী সহ) কেবলমাত্র পাঠ্য। জাভাস্ক্রিপ্ট দ্বারা ব্যবহৃত ডেটা, ফাংশন, অবজেক্টস ইত্যাদির একটি পৃথক বিমানে উপস্থিত রয়েছে। কেবল যখন জাভাস্ক্রিপ্টকে এটি করার নির্দেশ দেওয়া হয়েছে তখন এটি HTML পাঠ্যটি পড়তে বা আপডেট করতে পারে তবে জাভাস্ক্রিপ্টের সাহায্যে আপনার তৈরি করা সমস্ত ডেটা এবং কার্যকারিতা আপনার ফায়ারব্যাগ (বা অন্যান্য) কনসোলে প্রদর্শিত HTML পাঠ্য / বৈশিষ্ট্যগুলি থেকে সম্পূর্ণ আলাদা কাজ করছে।

* আমি সাধারণত জোর দিয়েছি কারণ আপনার যদি এমন কোনও সমস্যা থাকে যেখানে আপনার এইচটিএমএল সংরক্ষণ এবং রফতানি করা প্রয়োজন (যেমন কোনও ধরণের মাইক্রো ফর্ম্যাট / ডেটা সচেতন পাঠ্য সম্পাদক) যেখানে এইচটিএমএল অন্য পৃষ্ঠায় টাটকা লোড করবে, তবে আপনার সম্ভবত HTML আপডেট দরকার খুব।

Comments

ধন্যবাদ। এটি ভুল উদাহরণ সহ অন্যান্য সমস্ত উত্তরগুলির মধ্যে সহায়তা করেছে! এর dataমধ্যে attr('data-helptext'পার্থক্য রয়েছে, যেখানে গৃহীত উত্তর এবং অনেক ভোটের সাথে কাজ করা হচ্ছে না। +1

— এলেক্স

Answer 4

আমার সাথে একই ঘটেছে। এটা দেখা যাচ্ছে যে

var data = $("#myObject").data();

আপনাকে একটি লিখনযোগ্য অবজেক্ট দেয় gives আমি এটি ব্যবহার করে এটি সমাধান করেছি:

var data = $.extend({}, $("#myObject").data());

এবং তারপর থেকে, dataএকটি মানক, লিখনযোগ্য জেএস বস্তু ছিল।

Comments

আপনি কিভাবে এটি লিখুন?

— লিভিংয়ের জন্য কাজ করে

দুঃখিত, আপনি কী বলতে চাইছেন তা আমি জানি না ... কাজটি করার পরে $.extend..., আপনি নিজের পছন্দ dataমতো ব্যবহার করতে পারেন : data.name = 'Nico'; data.questionSolved = true;এবং console.log(data)এই নতুন যুক্ত বৈশিষ্ট্যগুলি প্রদর্শন করবেন

— নিকো

Answer 5

একটি উদ্ধৃতি উদ্ধৃত:

ডেটা-বৈশিষ্ট্যগুলি প্রথমবারে ডেটা সম্পত্তি অ্যাক্সেস করার পরে টানা হয় এবং তারপরে আর অ্যাক্সেস বা রূপান্তরিত করা হয় না (সমস্ত ডেটা মানগুলি পরে jQuery এ অভ্যন্তরীণভাবে সংরক্ষণ করা হয়)।

.data() - jQuery ডকুমেন্টেশন

মনে রাখবেন যে এই (স্পষ্টতই বিজোড় ) সীমাবদ্ধতাটি কেবলমাত্র ব্যবহারের জন্য রোধ করা হয়নি .data()।

সমাধান? .attrপরিবর্তে ব্যবহার করুন।

অবশ্যই, আপনার বেশিরভাগ এটির ডেডিকেটেড পদ্ধতিটি ব্যবহার না করে অস্বস্তি বোধ করতে পারেন। নিম্নলিখিত পরিস্থিতিতে বিবেচনা করুন:

• 'স্ট্যান্ডার্ড' আপডেট করা হয়েছে যাতে কাস্টম বৈশিষ্ট্যের ডেটা অংশটি আর প্রয়োজন হয় না / প্রতিস্থাপন করা হয়

সাধারণ জ্ঞান - কেন তারা ইতিমধ্যে প্রতিষ্ঠিত বৈশিষ্ট্যটির মতো পরিবর্তন করবে? শুধু কল্পনা classনাম পালটে শুরু গ্রুপ এবং idকরতে আইডেন্টিফায়ার । ইন্টারনেট ভেঙে যেত।

এবং তারপরেও জাভাস্ক্রিপ্ট নিজেই এটিকে ঠিক করার ক্ষমতা রাখে - এবং অবশ্যই এটি এইচটিএমএল এর সাথে কুখ্যাত অসামঞ্জস্যতা থাকা সত্ত্বেও REGEX (এবং বিভিন্ন ধরণের অনুরূপ পদ্ধতি) আপনার নতুন বৈশিষ্ট্যগুলিকে এই নতুন-পৌরাণিক 'স্ট্যান্ডার্ড' এ নতুন নামকরণ করতে পারে।

টি এল; ডিআর

alert($(targetField).attr("data-helptext"));

Answer 6

উল্লিখিত হিসাবে, .data()পদ্ধতিটি প্রকৃতপক্ষে গুণকের মান নির্ধারণ করে data-না, এবং এটি যদি আপডেট মানগুলি পড়তে পারে তবেdata- বৈশিষ্ট্যটি পরিবর্তিত ।

আমার সমাধানটি ছিল এমন একটি .realData()পদ্ধতির সাথে jQuery প্রসারিত যা প্রকৃত বৈশিষ্ট্যের বর্তমান মানের সাথে সামঞ্জস্য করে:

// Alternative to .data() that updates data- attributes, and reads their current value.
(function($){
  $.fn.realData = function(name,value) {
      if (value === undefined) {
        return $(this).attr('data-'+name);
      } else {
        $(this).attr('data-'+name,value);
      }
  };
})(jQuery);

দ্রষ্টব্য: অবশ্যই আপনি কেবল ব্যবহার করতে পারেন .attr(), তবে আমার অভিজ্ঞতা থেকে, বেশিরভাগ বিকাশকারী (ওরফে আমাকে) দেখার .attr()এবং .data()বিনিময়যোগ্য হিসাবে ভুল করে এবং প্রায়শই একজনকে চিন্তা না করে অন্যটির পরিবর্তে স্থান দেয়। এটি বেশিরভাগ সময় কার্যকর হতে পারে তবে বাগগুলি প্রবর্তন করার এটি দুর্দান্ত উপায়, বিশেষত যখন কোনও ধরণের গতিশীল ডেটা বাইন্ডিংয়ের সাথে ডিল করে। সুতরাং ব্যবহার করে .realData(), আমি উদ্দেশ্যমূলক আচরণ সম্পর্কে আরও স্পষ্ট করতে পারি।

Answer 7

একই সমস্যা ছিল। যেহেতু আপনি এখনও .ডাটা () পদ্ধতিটি ব্যবহার করে ডেটা পেতে পারেন, আপনাকে কেবল উপাদানগুলিতে লেখার উপায় খুঁজে বের করতে হবে। এটি হেল্পার পদ্ধতিটি আমি ব্যবহার করি। বেশিরভাগ লোকেরা যেমন বলেছে, আপনাকে .attr ব্যবহার করতে হবে। আমার সাথে এটি কোনও _ এর পরিবর্তে রয়েছে - যেমনটি আমি জানি এটি এটি করে। এটি প্রতিস্থাপন করা অন্য কোনও চরিত্র সম্পর্কে আমি সচেতন নই ... তবে আমি এটি নিয়ে গবেষণা করি নি।

function ExtendElementData(element, object){
    //element is what you want to set data on
    //object is a hash/js-object
    var keys = Object.keys(object);
    for (var i = 0; i < keys.length; i++){
        var key = keys[i];
        $(element).attr('data-'+key.replace("_", "-"), object[key]);
    }
}

সম্পাদনা: 5/1/2017

আমি এখনও দেখতে পেলাম যে এখনও পদ্ধতিগুলিতে ব্যবহার করে আপনি সঠিক ডেটা পেতে পারেন নি তাই এখন যা আমি ব্যবহার করি তা নিম্নরূপ:

function setDomData(element, object){
    //object is a hash

    var keys = Object.keys(object);
    for (var i = 0; i < keys.length; i++){
        var key = keys[i];
        $(element).attr('data-'+key.replace("_", "-"), object[key]);
    }
};

function getDomData(element, key){
    var domObject = $(element).get(0);
    var attKeys = Object.keys(domObject.attributes);

    var values = null;
    if (key != null){
        values = $(element).attr('data-' + key);
    } else {
        values = {};

        var keys = [];
        for (var i = 0; i < attKeys.length; i++) {
            keys.push(domObject.attributes[attKeys[i]]);
        }

        for (var i = 0; i < keys.length; i++){
            if(!keys[i].match(/data-.*/)){
                values[keys[i]] = $(element).attr(keys[i]);
            }
        }
    }
    return values;
};