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>
Related
Please help me.
I want to detect the tapping on td. But I also need to get the one of the p tag (cal_date) value when tapped.
How can I get the cal_date value?
JQUERY CURRENT CODE:
$( document ).on ( "tap", "td", function(event) {
//code here
// i want to get the cal_date value in this block
});
I can't not use this way, because it will only can detect tap on the p.cal_date tag, not on the td tag...
$( document ).on ( "tap", ".cal_date", function(event) {
});
HTML:
<td><p class="cal_date" id="">7</p><br><p class="cal_rooms">16</p></td>
Find the .cal_date element inside the tapped TD, and get it's text
$(document).on ("tap", "td", function(event) {
var value = $(this).find('.cal_date').text();
});
Inside the tap handler this refers to the tapped tdelement, so you can use .find() to get the cal_date element within it
$(document).on("tap", "td", function(event) {
//code here
// i want to get the cal_date value in this block
var cal_date = $(this).find('.cal_date').text()
});
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'));
});
So I am trying to edit the colour of a button when clicked.
here is my html and javascript
html:
<button type="submit" class="btn" id="hello-1" value="hello">Submit</button>
Here is my JS:
//Name:buttons.js
//Created by: Jonathan
//Created on: 25/09/15.
'use stict';
$( document ).ready(function(){
$('hello-1').click(function(){
document.getElementById('hello-1').style.background = "linear-gradient(#337AB7,#215480)";
});
});
I can't understand why it's not working. Any help?
Your selector is wrong. When you're selected an element by id with jQuery, you must add the # character before the id.
So instead of $('hello-1') use $('#hello-1')
$(document).ready(function() {
$('#hello-1').click(function() {
document.getElementById('hello-1').style.background = "linear-gradient(#337AB7,#215480)";
});
});
Edit:
Also when you are inside the click event handler you don't need to select the element again because this will point to the target element so your event handler can be as follows:
$(document).ready(function() {
$('hello-1').click(function() {
this.style.background = "linear-gradient(#337AB7,#215480)";
});
});
If you're using jQuery why not use it to change css? Also you're missing the #.
$( document ).ready(function(){
var $button = $('#hello-1');
$button.click(function(){
$button.css('background', "linear-gradient(#337AB7,#215480)");
});
});
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)
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.