Dynamically inserting HTML DIV destroys jQuery DatePicker on the page - javascript

I have a single HTML page app, that contains a text input bound to a jQuery datepicker. It is initialised/bound on startup, and it functions just fine.
The page has an inner container DIV, beneath the datepicker text input field, on the same page.
I am inlcuding an image, because I need to obscure some info:
When I dynamically insert a popup FORM into this inner container, it becomes visible, centered, floating over the container DIV.
<div id="CLC_Form">...</div>
var e = document.getElementById("contentDIV");
e.innerHTML += clc_div;
However, it also destroys the datepicker, clearing out the selected date, and making the datepicker field dead/unbound and unresponsive when I remove the added FORM (when the user clicks "Save" button on the popup FORM).
var e = document.getElementById("CLC_Form");
e.parentElement.removeChild(e);
Any ideas? Please feel free to ask for additional info if I have not been thorough enough.
Thanks

Instead of using:
e.innerHTML += clc_div;
I used:
e.insertAdjacentHTML("beforeend", clc_div);
Problem solved.

Related

Vanilla JavaScript toggle element with text to editable element on edit button click

I'm trying to make my first vanilla JavaScript app which is (surprisingly :D) To-Do App
I'm currently stuck with the update todo part,
I got this part of code doing to-do creation
let createTodo = (todo) => {
let span = document.createElement('span');
span.classList.add('text');
spanParent.prepend(span);
span.innerHTML += `${todo.text}`;
let edit = document.createElement('span');
edit.classList.add('edit');
spanParent.append(edit);
edit.addEventListener('click', (e) => {
console.log(e);
});
let editIcon = document.createElement('i');
editIcon.classList.add('fa-solid');
editIcon.classList.add('fa-pen-to-square');
edit.prepend(editIcon);
};
I want that when user click edit the todo text turn to editable input and save new value on enter or clicking outside and it become not editable again until pressing edit
I did some research and come across (contentEditable) attribute , but when tried to apply it things went sideways,
when i turn it on the edit icon disappear and the text stay editable
i think i need to do some kind of form that show on edit but don't know how to approach this idea
EDIT
I'll try to explain more clearly hopefully,
I need to make the to-do text to be:
1- editable when user click the edit button
2- save the new user input text
3- become non-editable once user save updates
4- become editable again if user press edit button again
Thanks in advance
Based on the description that you provided, there is technically no need of using a form. You could stick to a standalone button and give it a click handler.
The click handler of this EDIT button works as follows: it sets the contenteditable attribute on the to-do text element (the span element above). This makes the text editable.
Then when the SAVE button is pressed, you should do the following: get the textContent of the span element, store it locally (I guess you're using localStorage) and then finally remove the contenteditable attribute from the span element.
BTW, I feel that there is a lot of room of improvement in your code, for e.g. in variable naming, in the usage of methods, and in the order of statements:
append() and prepend() is, more or less, meant for bulk-insertion of nodes into the DOM. In your case, you have just one single node to add and so you could just stick to using insertBefore() or `appendChild().
Most probably, the to-do text is styled as a block in your application. Hence, it's better to make it a <div> element, instead of a <span>.
There is an awesome resource to learn about the HTML DOM, along with exercises to practice your skills: HTML DOM Introduction — CodeGuage.

Copying value of multiple html Selects and a form to text area to submit to PHP script using Javascript

I have multiple <select>s and one form I need to submit with one button. I'm trying to use a text area as a summary, which I will then submit to a script.
To move the form element I have this and it works fine:
document.getElementById('add').addEventListener("keyup", function() {
document.getElementById('ordsumry').value = this.value;
});
I thought I could copy the script and replace the first ElementId to add other values to the text area but it doesn't seem to add the values from the selects.
If anyone does know how to submit them all with out a text area that would be great but bear in mind I have zero knowledge of AJAX.

Appending a block of code on submit with jQuery

http://jsfiddle.net/rfnslyr/xcqa5/
The goal of this little "app", is to type in a filename, paste in an HTML document, and when you click submit, a little orange block below the Submit button appears stating the filename you entered, and the extracted CSS classes and ID's.
Right now it returns the correct response in console when you paste in HTML code, but I want to display it in little code blocks below the submit button like in my example.
Every time you paste in new code + new file name and hit submit, a second block like the first appears after the first block with the new filename and extract classes.
This is the code that I want duplicated + populated with the filename/classes inserted on submit:
<div id="classes">
<div class="pageTitle">%filename%</div>
<div class="cssClassesIDs">
%classes%
</div>
</div>
I'm not sure how to duplicate and append this code structure repeatedly on submit.
Here's a modified JSFiddle:
http://jsfiddle.net/xcqa5/1/
var codeNameVal = $('input#codeName').val();
var newClone = $('#classes').clone();
$(newClone).find('div.pageTitle').html(codeNameVal);
$(newClone).find('div.cssClassesIDs').html(uniqueNames.join(','));
$('#container').append(newClone);
$(newClone).show();
Basically you have a hidden div that's built the way you want it. When they click submit you clone that hidden div, set the values inside to what you need, then append that div to the end of the container div. Once you do that you show your newly cloned div with show().
Jquery clone()
http://api.jquery.com/clone/
and append()
https://api.jquery.com/append/

How to add a new row of text box and drop down?

I'm currently working on a rails project.
I have a text_field and a select_tag on the same row. I want a new row of text box and drop down list to be created whenever I have at least one character typed in the current text box. But I'm not sure how to do so. I assume I'd need to use jquery? But I'm still a newbie with web programming...
Please help! Many thanks!!!
You'd add fields and then apply a hidden value to them using jQuery's document ready function. Then apply a keyup function to the existing field you want it to trigger off of that calls show on the hidden item.
Here's the jquery I used in a wordpress page to do exactly that:
$(document).ready(function() {
$("#fieldtohide").hide();
$("#nonhiddenfield").keyup(function() {
$("#fieldtohide").show();
});
});

jquery validate form after being cloned.

I have a popup <div> which clones a hidden form and inserts this into the popup. Due to this being dynamically inserted I am not able to get the validate plugin to work.
Example: http://jsfiddle.net/MbNCh/1/
You will see that the inline form is validating perfectly altough if you click the popup link this form is not validating.
You can see that I am calling the plugin like this:
$page.find("form.validate").simpleValidate(simple_validate_options);
$popup.find("form.validate").simpleValidate(simple_validate_options);
Also is there anyway I can merge both the cached $page and $popup together?.
Since you are appending the cloned form on open popup link click event you should call simpleValidate plugin inside the click event after appending the html into popup content.
Here is the working demo - http://jsfiddle.net/MbNCh/2/

Categories

Resources