如何在不更改其当前元素的情况下更改其文本？

Question

$.ajax({
    type: "GET",
    url: "my url" + x,
    datatype: "html",
    success: function(data){
        //alert(x);
         //var Content = data;
         var sendId ;
         var data = $.parseJSON(data);
         var jsonArray = data.result;

        // var data2 = $.parseJSON(jsonArray);
         var jsonArray3 = jsonArray.oilFilter;
         $.each(jsonArray3,function(i1,js2){
             var proname = js2.productName;
             var mrp = js2.mrp;
             var deliveryStatus = js2.deliveryStatus;
             var oilid = js2.productId;
             $(".oilid").val(oilid);
             $(".deliveryStatusOil").html(deliveryStatus);
             $(".mrpoil").html(mrp);
             $(".oilprodetail").html(proname);


         });

    <label id="oilprodetail" class="oilprodetail"></label><br/>
    <label id="mrpoil" class="mrpoil"></label><br/>
    <a onClick="ajax_cross(this);" id="oilid" class="oilid" >View</a>

If you go through the code I am assigning values to label tag with id oilprodetail and mrpoil and i am doing the same thing to oilid as well, My requirement is to send oilid value to a tag and retain view there, Please help? I am new to ajax..

In the above picture i need to do the right part of the pic that is view,, but when i send the data it changes to left part of the pic like it changes from view to the value that is sent

Answer 1

You can use data attribute to keep innerHTML of "a" tag. Like :

$(".oilid").attr('data-oilid',oilid);

Answer 2

There are several issues with your code:

• You misspelled datatype , which should be dataType ;
• Even if correctly spelled, you then wrongly identify the data type as HTML: you really expect JSON, which is something different;
• Without the dataType property (which is your case), jQuery will guess the data type, and probably will guess it to be JSON. In that case, $.parseJSON will fail, because jQuery will already have decoded the JSON string and present the result as the data argument;
• You use the .html(...) method to set the content of some elements to some text. html() should only be used when the content really is HTML, but otherwise (which I think is your case), you should .text(...) ;
• An a element does not have a value property, so calling .val() on it does not have the desired effect;
• You want to pass the oilid value to the ajax_cross function, but provide it this , which is an HTML element (the a ), not the value.
• As you iterate the array, you are setting the content of the exact same elements in each iteration over and over again, which means only the last iteration determines what the content will be. You should put each text in the proper element, avoiding to overwrite the previous written value.
• The HTML you have shared, only has space for writing the result of the first array element to -- there should be similar elements for the second row, third row, etc.

To solve all this, you could get inspiration from this code:

$.ajax({
    type: "GET",
    url: "my url" + x,
    dataType: "json", // corrected spelling and type
    success: function(data){
        // Don't parse as JSON string any more, data alread is object;
        // Don't name your variable jsonArray, it is neither of those
        var result = data.result;
        var jsonArray3 = result.oilFilter;
        $.each(jsonArray3, function (i1, js2) {
            var proname = js2.productName;
            var mrp = js2.mrp;
            var deliveryStatus = js2.deliveryStatus;
            var oilid = js2.productId;
            // bind onclick handler with oilid argument bound to it:
            // use `get()` to select the next element of the same class:
            $(".oilid").get(i1).off('click').on('click', ajax_cross.bind(null, oilid));
            // use text(), not html()
            $(".deliveryStatusOil").get(i1).text(deliveryStatus);
            $(".mrpoil").get(i1).text(mrp);
            $(".oilprodetail").get(i1).text(proname);
        });
    }
});

<label id="oilprodetail" class="oilprodetail"></label><br/>
<label id="mrpoil" class="mrpoil"></label><br/>
<!-- remove onclick attribute, we bind the handler dynamically -->
<a id="oilid" class="oilid" >View</a>

<hr><!-- repeat elements for second row -->
<label id="oilprodetail" class="oilprodetail"></label><br/>
<label id="mrpoil" class="mrpoil"></label><br/>
<!-- remove onclick attribute, we bind the handler dynamically -->
<a id="oilid" class="oilid" >View</a>

<hr><!-- repeat elements for third row -->
<label id="oilprodetail" class="oilprodetail"></label><br/>
<label id="mrpoil" class="mrpoil"></label><br/>
<!-- remove onclick attribute, we bind the handler dynamically -->
<a id="oilid" class="oilid" >View</a>

The above is still not ideal, as you would better create the elements dynamically as you iterate through the Ajax results, so you would have just as many as you would need.