• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 142
  • Last Modified:

JQuery update data-id attribute

Hello,

I have a JQuery script that dynamically enters data into a form; the script is -

        $("#AddWorkHistory a.add").click(function () {
            $('#job_description').removeClass("editworkhistory");
            $('#job_description').addClass("addworkhistory");

            tinymce.init({
                selector: "textarea.addworkhistory",
                toolbar1: "paste | bold italic underline  | alignleft aligncenter alignright alignjustify | bullist numlist | ",

                menubar: false,
                toolbar_items_size: 'small',
                paste_as_text: true,
                browser_spellcheck: true,
                statusbar: false,
                height: 400,

                style_formats: [{
                    title: 'Bold text',
                    inline: 'b'
                }, ],

            });
            $('#Edit_Personal_Statement').hide();
            $('#Edit_Work_History').hide();
            $('#Edit_Qualifications').hide();
            $('#Edit_Covering_Letter').hide();
            $('#QualificationSelect').hide();
            $('#GCSE').hide();
            $('#Alevel').hide();
            $('#Degree').hide();
            $('#Masters').hide();
            $('#phd').hide();
            $('#other').hide();$('#CVs').hide();$('#Skills_Expertise').hide();
            $('#Availability').hide();
            $('#Work_History').show();
        });

Open in new window



It is triggered when the link is clicked -

<a href="#" class="editlinks" data-id="12" data-jobtitle="developer" data-company="ims" data-startdate="" data-enddate="" data-description="lorem ipsum...." style="font-size:12px; float:right; width:40px; text-align:right">Edit</a>

Open in new window


The form that it updates is

<form method="post" id="Edit_Work_History" title="Work History">
      <h3>Work History</h3>
      <label for="start_date">Dates From:</label>
      <input name="start_date" type="date" required="required" id="Edit_start_date" class="datepicker">
      <label for="end_date" class="labelindent">To:</label>
      <input name="end_date" type="date" required="required" id="Edit_end_date" class="datepicker">
      <br />
      <label for="Job_Title">Job Title:</label>
      <input name="Job_Title" type="text" required="required" id="Edit_Job_Title" placeholder="e.g. Java Developer" maxlength="255">
      <br />
      <label for="Company">Company:</label>
      <input name="Company" type="text" required="required" id="Edit_Company" maxlength="255">
      <br />
      <textarea name="job_description" rows="20" id="Edit_job_description"></textarea>
      <input name="Work History" type="submit" disabled="disabled" class="submitBtn" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Save">
      <input name="Work History" type="submit" disabled="disabled" class="cancelbutton" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Remove" data-id="">
      <input name="EditWorkHistoryID" type="hidden" id="EditWorkHistoryID" form="Edit_Work_History" value="<%=(Request.Cookies ("UserAuth")("Userid"))%>">
      <input name="EditWorkHistoryUserID" type="hidden" id="EditWorkHistoryUserID" form="Edit_Work_History" value="<%=(Request.Cookies ("UserAuth")("Userid"))%>">
      <input name="EditWorkHistoryAuth" type="hidden" id="EditWorkHistoryAuth" form="Edit_Work_History" value="<%=(Request.Cookies ("UserAuth")("Authentication"))%>">
      <input type="hidden" name="WID" id="WID">
    </form>

Open in new window


Which contains a button - which when clicked opens a fancy box form...

<input name="Work History" type="submit" disabled="disabled" class="cancelbutton" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Remove" data-id="">

Open in new window


I need to dynamically update the data-id attribute of this button, based on the data-id attribute of the original link clicked...

Is this possible?

Thoughts appreciated.

Thank you
0
garethtnash
Asked:
garethtnash
  • 3
2 Solutions
 
Duy PhamFreelance IT ConsultantCommented:
First you need to add class "add" to your original link (if you haven't done it yet):
<a href="#" class="editlinks add" data-id="12" data-jobtitle="developer" data-company="ims" data-startdate="" data-enddate="" data-description="lorem ipsum...." style="font-size:12px; float:right; width:40px; text-align:right">Edit</a>

Open in new window

Then in your click() function:
$("#AddWorkHistory a.add").click(function () {
    ...
    // set data-id of button to the same as original link
    $('#Edit_Work_History .cancelButton').attr('data-id', $(this).attr('data-id'));

    // other possible options:
    // $('#Edit_Work_History input[type="submit"][value="Remove"]').attr('data-id', $(this).attr('data-id'));
    // $('#Edit_Work_History input[name="Work History"][value="Remove"]').attr('data-id', $(this).attr('data-id'));
});

Open in new window

0
 
RobOwner (Aidellio)Commented:
You just use the jQuery data function:

$(".selector").data('id', newval)
0
 
RobOwner (Aidellio)Commented:
That button you speak of is NOT unique and it needs to be.  Your cancel button has the same name AND ID, which is a no no.  Those buttons should not have a "name" attribute and no two elements should have the same ID.

<input name="Work History" type="submit" disabled="disabled" class="submitBtn" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Save">
<input name="Work History" type="submit" disabled="disabled" class="cancelbutton" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Remove" data-id="">

Open in new window

should change to:

<input type="submit" disabled="disabled" class="submitBtn" id="EditWorkHistorySubmit" form="Edit_Work_History" value="Save">
<input type="reset" disabled="disabled" class="cancelbutton" id="EditWorkHistoryCancel" form="Edit_Work_History" value="Remove" data-id="">

Open in new window

0
 
RobOwner (Aidellio)Commented:
As mentioned by Duy you need the "add" class to use the code as you have it for the click to work, however removing as shown below may work for you as well:

        $("#AddWorkHistory a").click(function () {

            // update the button id
           $("#EditWorkHistorySubmit").data('id', $(this).data('id));

            $('#job_description').removeClass("editworkhistory");
            $('#job_description').addClass("addworkhistory");

            tinymce.init({
                selector: "textarea.addworkhistory",
                toolbar1: "paste | bold italic underline  | alignleft aligncenter alignright alignjustify | bullist numlist | ",

                menubar: false,
                toolbar_items_size: 'small',
                paste_as_text: true,
                browser_spellcheck: true,
                statusbar: false,
                height: 400,

                style_formats: [{
                    title: 'Bold text',
                    inline: 'b'
                }, ],

            });
            $('#Edit_Personal_Statement').hide();
            $('#Edit_Work_History').hide();
            $('#Edit_Qualifications').hide();
            $('#Edit_Covering_Letter').hide();
            $('#QualificationSelect').hide();
            $('#GCSE').hide();
            $('#Alevel').hide();
            $('#Degree').hide();
            $('#Masters').hide();
            $('#phd').hide();
            $('#other').hide();$('#CVs').hide();$('#Skills_Expertise').hide();
            $('#Availability').hide();
            $('#Work_History').show();
        });
0
 
garethtnashAuthor Commented:
Excellent - thank you both :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now