I want to replace following HTML string:
</p><span onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">XXX</span><p><br></p>
with:
</p><button onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">YYY</button><p><br></p>
using jQuery. I have tried .replace() function, but its not working for some strange reason.
try give span an ID and
You can do:
$("#yourid").text("YYY");
or
$("#yourID").html("testing <b>YYY</b>");
Here you go with a solution https://jsfiddle.net/bqfv5fge/1/
var span = $('span:contains("XXX")');
span.after('<button>YYY</button>');
$(span[0].attributes).each(function() {
$('button:contains("YYY")').prop(this.nodeName, this.nodeValue);
});
span.remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">XXX</span><p>
test paragraph
</p>
Use jQuery contains to get the target element.
Reference Document: https://api.jquery.com/contains-selector/
First get the reference of span element, then add button next to span using jQuery after.
Then attach all the attribute to the button and then remove span.
Try this, but better to add an ID for selector.
$(document).ready(function(){
$('span').click(function(){
$(this).text('YYY') or $(this).html('YYY');
})
})
var attr ='';
$("span").each(function(){
$.each(this.attributes,function(){
attr += this.name+'="'+this.value+'"';
});
});
$("span").replaceWith('<button '+attr+'>'+$('span').text()+'</button>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span onclick="alert(event)" class="btn btn-sm btn-success xyz" contenteditable="false">XXX</span>
https://jsfiddle.net/s0bv09gm/.
If you just want to replace "span" with "button" tag:
$(document).ready(function(){
var x = '</p><span onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">XXX</span><p><br></p>';
alert(x.replace(/span/g,"button"));
});
https://jsfiddle.net/L26fvfvL/
If you want to replace XXX with YYY:
HTML Code:
<span onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">XXX</span>
JQuery Code:
$(document).ready(function(){
var x = $("span");
x.html(x.html().replace("XXX","YYY"));
})
https://jsfiddle.net/f7qsa6kw/
If you want to do both the things, apply the second step and then first step.
Related
I have a page with many articles. Each article has a delete button. How can I identify the button clicked for the article?
Currently I have this:
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
$('#delete-article').on('click', function(e) {
console.log('Test delete article');
});
This logs 'Test delete article' according to the number of articles on the page.
You can attach the event on button and use this object to refer the currently clicked button:
$('button').on('click', function(e) {
console.log(this.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
<button type="button" id="delete-article-2" class="btn btn-small btn-danger">Delete</button>
You can use your event variable to get the target of the event (that is, the element responsible) and from there get its id, like this:
let btnId = event.target.id;
However, for that to work properly you should assign unique ids to your buttons. If you want to provide other data (or you don't want to use id) you can append custom attributes, like data-value or similar, and use it like this:
let myValue = event.target.getAttribute('data-value');
You need to establish relation between article and corresponding button, one way to implement is by using HTML5 data attribute.
assign data-articleId to article id in button element and when you click the button you can access which button was clicked by using Jquery .data() function.
<button type="button" data-articleId='123' class="btn btn-small btn-danger delete-article">Delete</button>
$('.delete-article').on('click', function(e) {
$(this).data('articleId'); //will return 123;
console.log('Test delete article');
});
If all the buttons have this markup
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
Then the DOM sees them as just one button, you should find a way to attach unique ids to your buttons
You can get an object of clicked button then you can get any details from that object like an index or whatever you want.
$('#delete-article').click(function(){
console.log($(this));
console.log($(this).index());
});
You can directly achieve it by using the JavaScript.
document.addEventListener('click',(e)=>{
console.log(e.target.id)
})
<button type="button" id="delete-article1" class="btn btn-small btn-danger">Delete1</button>
<button type="button" id="delete-article2" class="btn btn-small btn-danger">Delete2</button>
<button type="button" id="delete-article3" class="btn btn-small btn-danger">Delete3</button>
<button type="button" id="delete-article4" class="btn btn-small btn-danger">Delete4</button>
<button type="button" id="delete-article5" class="btn btn-small btn-danger">Delete5</button>
<button type="button" id="delete-article6" class="btn btn-small btn-danger">Delete6</button>
<button type="button" id="delete-article7" class="btn btn-small btn-danger">Delete7</button>
I have a button that leads to a modal view. I try to intercept the value with JS.
It works like this:
<button type="button" class="btn btn-outline-primary btn-sm"
data-toggle="modal" data-target="#myModal" data-person-id="something">
Edit
</button>
JaveScript:
var bookId = $(e.relatedTarget).data('person-id');
It doesn't work like this:
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#myModal" data-th-id="${person.getId()}">
Edit
</button>
JS:
var bookId = $(e.relatedTarget).data('id');
or
var bookId = $(e.relatedTarget).data('th-id');
var is undefined it says.
Since I use Thymeleaf I need to catch the value with data-th-id.
Any idea how to get the value
Complete JS
$('#myModal').on('shown.bs.modal', function (e) {
$('#myInput').focus();
var bookId = $(e.relatedTarget).data('id');
alert(e.relatedTarget.nodeName);
alert(bookId);
});
data-person-id="something" is a data attribute, and is accessed with $('...').data('person-id').
data-th-id="${person.getId()}" isn't a data attribute. It's just a different way of saying th:id, which outputs the id="..." attribute of a tag. You can't use jQuery's .data() method on non-data attributes, instead you use attr() -- $(e.relatedTarget).attr('id');
I want to create the event based on data attribute instead of class name
<button type="button"
class="btn btn-danger approvalbtn" data-approvestatus="N" data-dismiss="modal">Reject</button>
Now I have added attribute as `$('.approvalbtn').prop("disabled",true);`
I want to check with data-approvestatus="N" in jquery
$('button[data-approvestatus=N]').click(function(){
alert("Clicked");
//$(this).prop("disabled",true) you can disable it too
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button"
class="btn btn-danger approvalbtn" data-approvestatus="N" data-dismiss="modal">Reject</button>
You're looking for the attribute selector! This is how:
$("[data-approvestatus='N']").prop("disabled", true);
Docs: https://api.jquery.com/attribute-equals-selector/
I have a couple of buttons
<button id="btn-ok[1]" class="btn-ok"></button>
<button id="btn-failed[1]" class="btn-failed"></button>
<button id="btn-ok[2]" class="btn-ok"></button>
<button id="btn-failed[2]" class="btn-failed"></button>
<button id="btn-ok[3]" class="btn-ok"></button>
<button id="btn-failed[3]" class="btn-failed"></button>
And I am running differnt jquery functions for btn-ok and for btn-failed.
I would like to use the index number of the id. How can I obtain it?
<script>
$(document).ready(function() {
$('#btn-ok').click(function() {
console.log('I would like to print the index of the pressed button here. (i.e. 1,2,3)');
});
});
</script>
Use html5's data attributes and separate the index and status into separate elements - I added some teext to each button so it could be easily seen and then the click grabs the data-attributes and console.logs the values.
$(document).ready(function() {
$('.btn').click(function() {
var index = $(this).data('index');
var status = $(this).data('status')
console.log(index + ' / ' + status);
}); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button data-index="1" data-status ="ok" class="btn btn-ok">1 Ok</button>
<button data-index="1" data-status ="failed" class="btn btn-failed">1 Failed</button>
<button data-index="2" data-status ="ok" class="btn btn-ok">2 OK</button>
<button data-index="2" data-status ="failed" class="btn btn-failed">2 Failed</button>
<button data-index="3" data-status ="ok" class="btn btn-ok">3 OK</button>
<button data-index="3" data-status ="failed" class="btn btn-failed">3 Failed</button>
Create a collection of all those buttons to index against. Note that index() is zero based
var $buttons = $('.btn-ok, btn-failed').click(function(){
alert($buttons.index(this));
})
Or for more specifc target:
var $buttons = $('.btn-ok, btn-failed');
$('#btn-ok\\[1\\]').click(function(){
alert($buttons.index(this));
})
Or use data attributes instead of messing around with [] in ID
<button class="btn-ok" data-index="1"></button>
..
$('.btn-ok').click(function(){
alert($(this).data('index'));
})
HTML id's shouldn't use an index. Instead use a class to hold the selector and a data attribute to hold the other values you'll need like this:
The HTML:
<button class="btn-ok" data-index="1">Ok</button>
The JS:
$('.btn-ok').click(function() {
$(this).data('index');
});
The fiddle:
https://jsfiddle.net/kLvqe8dw/2/
did you mean to get id ?
$("button").click(function(){
alert($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-ok[1]" class="btn-ok">ok[1]</button>
<button id="btn-failed[1]" class="btn-failed">failed[1]</button>
<button id="btn-ok[2]" class="btn-ok">ok[2]</button>
<button id="btn-failed[2]" class="btn-failed">failed[2]</button>
<button id="btn-ok[3]" class="btn-ok">ok[3]</button>
<button id="btn-failed[3]" class="btn-failed">failed[3]</button>
I want to change the content of a span in my form
HTML:
<form action="javascript:submit()" id="form" class="panel_frame">
<label>Origin:</label>
<div class="input-group" id="input-group">
<input type="text" id="origin" name="origin" class="form-control">
<span class="input-group-btn">
<button id="btn-default" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>
</span>
</div>
What I want change is che content of <span class="input-group-btn"> with
<button id="btn-default" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
So what change is: the icon pushpin to remove and the action useCurrentPosition to clearPosition.
I' using jquery and despite I've read other answer about similar question on Stack like: How can I change the text inside my <span> with jQuery? and how to set a value for a span using JQuery I haven't solved the issue.
I tried:
$("#input-group span").html('
<button id="btn-default" class="btn btn-default" type="button" onclick="br_bus.useCurrentPosition()">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>
');
,giving an id to the span and also modify the full div, but none solved my problem.
What am I missing?
Here's a way to overcome the problem of changing the onclick attribute, which is bad practice, without storing a Global var, and using jQuery delegation (learn to use it, it's really good):
$(document).on('click','.btn', positionChange); // Give that button an id on his own and replace '.btn' with '#newId'
// Not using an anonymous function makes it easire to Debug
function positionChange(){
var $btn = $(this), // Caching jQuery elements is good practice
$span = $btn.find('span'), // Just caching
pushpinApplied = $span.hasClass('glyphicon-pushpin'); // Check which icon is applied
( pushpinApplied ) ? useCurrentPosition() : clearPosition();
$span.toggleClass( 'glyphicon-pushpin glyphicon-remove' );
}
Rather than changing the function called in the onclick attribute I suggest having a flag in one function to define the logic it should follow.
For example:
function positionChange(this){
var $this = $(this);
if(!$this.data("currentpositionused")){
//useCurrentPosition() code here
$this.data("currentpositionused", true);
}
else {
//clearPosition() code here
$this.data("currentpositionused", false);
}
Then change your HTML to:
<button class="btn btn-default" type="button" onclick="positionChange(this)">
If you want to change only the onclick attribute of the button inside the particular span you can use the following in your script.,
$(document).ready(function(){
$("span.input-group-btn button").attr("onclick","clearPosition()");
});
EDIT
$(document).ready(function(){
$("span.input-group-btn button").attr("onclick","clearPosition()");
$("span.input-group-btn button span").attr("class","Your_class");
});
And also learn about how to change/add/remove attribute values....
Try this:
$("span.input-group-btn").html('<button class="btn btn-default" type="button" onclick="clearPosition()">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>');
Is it like This ?
how to change onclick event with jquery?
$("#id").attr("onclick","new_function_name()");
jquery change class name
$("#td_id").attr('class', 'newClass');
If you want to add a class, use .addclass() instead, like this:
$("#td_id").addClass('newClass');