How can I fill element with jquery?

Question

I'm creating a modal (bootstrap modal) as string when you click button with jquery and I have two option class in my modal is

Call Today and Call Tomorrow it's okey so far.

and my modal has been creating when you clicked the button so that's why I added two attribute to my button is data-open-hours and data-closed-hours and I want to explain what I want with an example:

for example:

my data-open-hours is : 09:00 my data-closed-hours : 22:00

then fill my .when-call select from 09:00 to 22:00 with Call Now option

so if you choose Call Tomorrow then fill my select from 09:00 to 22:00 without Call Now string.

My working example:

function agencyModal(modalTitle, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  var html =
    '';
  html = html + '' + modalTitle + "";
  html = html + '';
  html = html + '
';
  html = html + '';
  // check length and append if it is not added before
  !$(".agencyModal").length && $(document.body).append(html);
  $(".agencyModal").modal();
}


$(document).on("click", ".open-agency", function() {
  var openHours = $(this).data("open-hours");
  var closedHours = $(this).data("closed-hours");
  agencyModal("Test Title ", "70%", "500px", openHours, closedHours);
});

.open-agency {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}

.open-agency:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}



See Agency

CodePen Demo

Damiano · Accepted Answer

I see a few problems with this code, like the fact that your select has no name, your options have no value, and most classes seem like they should be ids instead... I would suggest reviewing these parts.

Working with what you have at the moment, anyway, and supposing you want to add an option for every hour from opening to closure, you should: - fill the second select with the correct options, parsing your open/close times; - add a listener on change for the first select to add/remove the "Call now" option

This should work, even if it's quite rough

function agencyModal(modalTitle, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  var html =
    '';
  html = html + '' + modalTitle + "";
  html = html + '';
  html = html + '
';
  html = html + '';
  html = html + '';
  // check length and append if it is not added before
  !$(".agencyModal").length && $(document.body).append(html);
  $(".agencyModal").modal();
}


$(document).on("click", ".open-agency", function() {
  var openHours = $(this).data("open-hours");
  var closedHours = $(this).data("closed-hours");
  agencyModal("Test Title ", "70%", "500px", openHours, closedHours);
});

function callNow() {
  return '';
}

function getOptions(open, close, now) {
  var options = now ? callNow() : '';
  console.log(open,close,now);
  // get open/close time as hours only
  var start = open.split(':')[0];
  var end = close.split(':')[0];
  // using +start will convert to a base 10 number - avoiding the problem that numbers with a leading zero are octal numbers
  // loop and add an option for each
  for (var h = +start; h <= +end; h++) {
    options += ''
  }
  return options;
}

$(document).on("change", ".when-call", function(event) {
  // not the most efficient way, but you can always remove 'Call now', then add it back only if needed
  $(".hour-call .call-now").remove();
  if($('.call-today').is(':selected')) 
    $('.hour-call').prepend(callNow());
});

.open-agency {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}

.open-agency:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}



See Agency

How can I fill element with jquery?

Answers (1)

Related Questions