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/
Related
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.
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.
After an Ajax request, I want to reset my form elements to their original value, except for three select input, because their values are going to be used frecuently.
I declared this variable outside of "document ready":
var estado_inicial_cuerpo;
I tried this in "document ready" function:
estado_inicial_cuerpo=$("#formulario_venta").clone().children('#id_bodega_idbodega').remove().children('#id_caja_idcaja').remove().end();
And in the "success" part of the ajax (or if you like, in some button that activates this code), this one:
$('#formulario_venta').html(estado_inicial_cuerpo);
But, in the console I can see that the page is like loaded two times by using that code, and also, the entire form gets in blank, all the elements disappear.
The ID of my form is formulario_venta and id_caja_idcaja , id_bodega_idbodega are the ID's of the select inputs that I want to skip.
Now I tried this inside of the "document ready" code:
estado_inicial_cuerpo=$("#formulario_venta").not("#id_bodega_idbodega, #id_caja_idcaja").html();
Now the form don't dissapear, but everything is restored, including the elements that I wrote inside "not".
Have you tried:
$('#formulario_venta').find('input, textarea, select').not("#id_bodega_idbodega, #id_caja_idcaja").val("");
That way you say all inputs will have value = "" (empty) except the one that are inside .not()
.find('input, textarea') are the type of inputs your form might have
How about trying just
estado_inicial_cuerpo = $("#formulario_venta").html()
Do you have any sample?
First clear html from element then assign again.
$('#formulario_venta').html('');
$('#formulario_venta').html(estado_inicial_cuerpo);
Issue:
I am attempting to append an input field from a modal window, containing a value inserted by the user, to an existing panel. So far the user is able to create the new field from the modal and add it, however, as this is part of an edit page, I want their input to be added to an input field. Here is the working code: BOOTPLY EXAMPLE. I want the newly generated field to be formatted the same as the existing fields because it will become part of a giant form allowing it to be submitted and update the operational page.
Question:
Will I have to format this within the append function itself where I declare the other formatting constraints? or can I somehow set the attributes within the 'cloudcontainer' div where the input is being appended to? Also, should I be using .html function instead of append? Performance is really not a concern here.
Thanks
You have to append exactly same formatted input tag as you have generated in the beginning and then add the form value to it
$("#clickme").click(function(){
$('.cloudcontainer').append('<div class="cloud"><p><b>'+$('#fieldtitle').val()+': </b><input style="display: inline; width: 325px;" class="form-control" id="projectName" type="text" value="'+$('#fieldvalue').val()+'" </input></p></div>');
});
Demo
In your JavaScript, on the line where you append fields you should do something like this:
$('.cloudcontainer').append('<div class="cloud"><p><b>'+$('#fieldtitle').val()+': </b>'+'<input type="text" value="' + $('#fieldvalue').val() + '"></p></div>');
I don't know if this is possible or not.
I have a dynamic form with contents that are dynamically created. Every time a button is clicked, a new div element is added. And what I wanted to do is to make the previous div not editable, that is, the input fields could not be used, buttons could not be clicked.
Is it doable?
Thanks.
Try something like this:
// Disable all input-like elements in the divs except for the last div
$(".divclass:not(:last-child) :input").attr("disabled", true);
Where divclass is the class of the divs you mentioned.
Example: http://jsfiddle.net/grc4/LrxkU/2/
Maby something like this? http://jsfiddle.net/ng4Ct/2/
If you can access your previous div elements you can add attribute disabled="disabled" to them.
You can fire the code that adds the disabled attribute to required elements on the same button click function.
Well, you can either access the specific elements inside the DIV and disable them using Javascript, or you can access the DIV and then loop through all the elements inside (probably preferable), and disable them automatically with Javascript.
Of course it depends on how your code is written, can you provide some of the code that generates the DIVs?