I realize I'm almost replicating a excel table; in a plugin, the intended behavior is:
when a is clicked a within it containing a value is replaced with an that get's the same value and so can be edited. It works but the problem is when clicking the newly created text input the value is reset or erased to ''.
I don't know what does that, I've tried the event listener, I've tried to .unbind focus, click, on click, on focus because it seems reclicking the text box fires something that erases it. I used F12 event listener and stepped into everything but i think it might be something jquery does on its own by default, but i would like to know if anyonw knows what is causing this behavior.
$( "td" ).click(function(event)
{
var value = $( this ).text(); // gets the text inside section inside the td
var column = $( this ).get( 0 ).id; //gets id="" of the td that is how I indentify columns
var parent = $( this ).parent().get( 0 ).id; //gets the id of the row <tr id="x"><td id=">
if( column == "a" || column == "b" )
{
return;
}
else if ( column == "d" || column == "c" )
{
$( this ).children().replaceWith( '<input type=email value=' + value + '>' );
$( this ).children().focus();
}
else
{
$( this ).children().replaceWith( '<input type=text value="' + value + '">' );
$( this ).children().focus();
}
$( this ).children().focusout(function(event){
var new_value = $( this ).val();
$( this ).parent().addClass( "edited" );
$( this ).replaceWith( '<section>' + new_value + '</section>' );
});
A similar question has been asked here but it does not solve my question nor fix my problem. They suggested he .append the new html instead of injecting it. So maybe there are problems with using the ".replaceWith()?"... idk, i've searched everywhere.
You're replacing the cell with an input which has value={the text}/
Therefore .text() will now return nothing.
Example:
html:
<table>
<td id="only_text"><p>some text</p></td>
<td id='input_text'><input type="text" value="some text 2"/></td>
</table>
js:
$(function(){
console.log($('#only_text').text());
console.log($('#input_text').text() +'');
})
You can see the example in this fiddle: http://jsfiddle.net/qzbrzm4x/ (open your console and run)
Related
I am trying to loop over all forms on a page, then see if they have a "missing-field" data variable. Once found, I then want to highlight that field.
Currently I have it working to detect if the data var exists, but now I can't quite get it right where I see if a field with that name exists. Pointers appreciated.
Here is what I have so far:
$( "form" ).each(function( index )
{
if (undefined !== $( this ).attr('data-missing') && $( this ).attr('data-missing').length)
{
field_name = $( this ).attr('data-missing');
if ($( this + " input:text[name="+field_name+"]").length)
{
alert('this part isnt working...');
}
}
});
To query any DOM element with a specific name in JQuery, you can just do this:
$('[name="field_name"]')
To query an element which is a child of another element, you can use this syntax:
$('parent > child')
So your code would be:
...
field_name = $( this ).attr('data-missing');
if ($( `${field_name} > input:text[name="${field_name}"]`).length)
{
alert('Value missing');
}
field_name needs to be a selector of some sort. I don't know what the contents of data_missing are, but they'd need to be an id (like #form1) or something similar.
I want to get the clicked html elements and edit it after some times.
What I tried?
I tried the below one, but I can get the exact html element in html text format, but I can not able to change it. How can I change the value.
var _targetevent;
$( "body" ).click(function( event ) {
_targetevent=event;
console.log( "clicked: " + event.target); //<p>This is the old one</p>
});
function undateit()
{
_targetevent.target="<b>This is the new div</b>";
}
1.Call undateit() inside click()
2.Use innerHTML along with _targetevent.target
Example:-
var _targetevent;
$( "body" ).click(function( event ) {
_targetevent=event;
console.log( "clicked: " + event.target.id); //get id of the clicked element
undateit(); //call function on click
});
function undateit(){
//use outerHTML to completly replace div with new-one
_targetevent.target.outerHTML="<b>This is the new div</b>";
/* if you want to change only content inside element then use inner HTML
_targetevent.target.innerHTML="<b>This is the new div</b>"; //use innerHTML
*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="mydiv">Check change</div>
</body>
I make input form using static row in 7 rows. How can I get selected value in each textbox when drop down list selected? I tried to use jQuery to do it, but my code is getting error (all textbox changed). So, below is my jQuery code:
<script>
$(document).ready(function() {
$('[name="nm_pot_part_shortage[]"]').on('change', function() {
$('[name="nm_maker[]"]').val($(this).val());
});
});
</script>
Image of my form:
You must escape bracket notation by using double slashes for selector having name like $('[name="nm_pot_part_shortage\\[\\]"]'), otherwise you will get an error, see following code :
$( '[name=nm_pot_part_shortage\\[\\]]' ).on( 'change', function () {
// get current value
var selectVal = $( this ).val();
// find the input by traversing up the parent first using .closest()
// and use .find() to find particular input exist on the same rows with
// select element, so this never go down to match another input exist on
// another rows
$( this ).closest( 'tr' ).find( '[name=nm_maker\\[\\]]' ).val( selectVal );
});
DEMO(example given were using table)
Better case is just give all the select and input with the same class name for each element. As example give class name myselect to select element and myInput for input element, at the end JS code would be :
$('.mySelect').on('change', function () {
var selectVal = $( this ).val();
$( this ).closest( 'tr' ).find( '.myInput').val(selectVal);
});
Native Javascript:
1) Give each dropdown an ID. This can be done in the HTML or dynamically in javascript.
2) Assign a function to each dropdown for an onclick event.
3) Retrieve the value as such:
function dropdownClicked(){
var ID = this.id;
var element = document.getElementById(ID);
var value = element.value;
}
What I'm trying to achieve is get an attibute from another attribute in the same element. For example:
<script>
$("#step1").click(function() {
// Get the attribute 'next' and get its value.
});
</script>
<button id="step1" next=".openNextModal">
Your need to use attr()
<script>
$("#step1").click(function() {
// Get the attribute 'next' and get its value.
var next = $( this ).attr( 'next' );
//if you are looking for next attribute value of the next element
console.log( $( next ).attr( 'next' ));
//if this is an input element and you are looking for its value
console.log( $( next ).val());
//if this is an not input element and you are looking for its html
console.log( $( next ).html());
});
</script>
Try like following.
$("#step1").click(function() {
console.log($(this).attr('next'));
});
I would like to get the value of an input and return it to a span. I would like to update the span each time the input is changing. The problem is that i will use it for a colorpicker so the user will not usualy write the color value(maybe paste it). So everytime the input textfield will be updated by the colorpicker js i want to update my own field.
I created a simple code to help you understand what i want to do.
Pressing the + you will change the value of the input field and i would like to get that value and print it in the span. Thank you.
HTML ::
<div>
<input type="text" class="mariinsky" /><button id="inside">+</button>
</div>
<button id="outside">Button</button><br />
input value = <span></span>
JS ::
var i = 0;
jQuery('button#outside').click(function() {
jQuery('div').toggle();
});
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i);
i++;
});
$( '.mariinsky' ).change( function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});
http://jsfiddle.net/existence17/9V8ZU/1/
Add .change() to the end of your '+' handler:
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i).change();
i++;
});
That will force the change event to fire and then your code will update the span.
For live DOM changes, use the jQuery on function - the following code would work in your case:
var i = 0;
jQuery('button#outside').click(function() {
jQuery('div').toggle();
});
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i);
i++;
});
$( 'button#inside' ).on('click', function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});
jQuery doesn't automatically trigger events through code. You need to do so manually using the .trigger() method.
Adding one line did it for me: jQuery('.mariinsky').trigger("change").
Here's a working example: http://jsfiddle.net/9V8ZU/2/
Also a useful question for reference: How to trigger jQuery change event in code
please use this :
$( '.mariinsky' ).on('keypress keyup keydown click copy cut paste', function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});
Fiddle example
all the rest of the provided answers aren't covering the entire options.