Solved

Dynamically changing javascript code

Posted on 2016-10-12
2
71 Views
Last Modified: 2016-10-12
I have a <div> that contains a date:

<div id="editDateDiv">10/20/16</div>

Open in new window


I want to grab that date and update the date on line 5 of the following jQuery code upon clicking a <td>:

$("#addNew").on("mouseup", function() {
     $(this).css("background", "white");
     $(this).css("color", "#008bab");
     $("#editDateDiv").html("Add New...");
     $("#currentAppts").load("calendar_appNew.cfm?appDate=10/12/2016");
});

Open in new window


How can I accomplish this?
0
Comment
Question by:Brian Coughter
2 Comments
 
LVL 43

Accepted Solution

by:
zephyr_hex (Megan) earned 500 total points
ID: 41840758
You can get the date from the field on click of the td, and then assign that date to a globally scoped variable.

var dateToUse = "";
$('td').on('click', function() {
   dateToUse = $('#editDateDiv').text();
});

$("#addNew").on("mouseup", function() {
     $(this).css("background", "white");
     $(this).css("color", "#008bab");
     $("#editDateDiv").html("Add New...");
     $("#currentAppts").load("calendar_appNew.cfm?appDate=" + dateToUse);
});

Open in new window


Some caveats:
  • the date you're showing in editDivDate is not the same format as the date you're using the appDate url parameter.  So, you will probably need to adjust the format before using it in the appDate url parameter.
  • You should verify that the editDivDate contains a valid value before using it as the appDate url parameter value.  I.E.  verify the value is a properly formatted date and not an empty string or malicious code
0
 

Author Closing Comment

by:Brian Coughter
ID: 41841106
Excellent.  I was way over thinking that.  Thank you!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question