I am using bootstrap and JQuery.
HTML
<div>
<ul>
<li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li>
</ul>
</div>
<button type="button" id="disableButton"
class="btn btn-primary" onclick="changeSpan();">Change</button>
JavaScript
function changeSpan() {
$('#monitorStatusSpan span').text('disssssssssssssssssss');
}
Here is the fiddle. http://jsfiddle.net/alamzeeshan/5bw8d2ta/7/
But still the span text is not getting changed.
Does anyone know what am I missing?
Currently, you're looking for a span inside your #monitorStatusSpan (#monitorStatusSpan span).
function changeSpan() {
$('#monitorStatusSpan span').text('disssssssssssssssssss');
}
It's enough to only look for the ID like this:
function changeSpan() {
$('#monitorStatusSpan').text('Your text here');
}
You have incorrect selector. Selector you have used finds #monitorStatusSpan element and then span element in it. which do not exist.
As IDs are unique, you can simply use id selector to target the required element:
function changeSpan() {
$('#monitorStatusSpan').text('disssssssssssssssssss');
}
working demo
HTML
<div>
<ul>
<li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li>
</ul>
</div>
<button id="disableMonitorButton" class="btn btn-primary">Change</button>
JS
$("#disableMonitorButton").click(function() {
$('#monitorStatusSpan').html('disssssssssssssssssss');
});
PS. DONT USE inline JS!
Try this
function changeSpan() {
$('#monitorStatusSpan').text('disssssssssssssssssss');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li>
</ul>
</div>
<button type="button" id="disableButton" class="btn btn-primary" onclick="changeSpan();">Change</button>
Your current selector selects all span's inside element with id #monitorStatusSpan but in this element there are not any span's.
For your current selector html should look like this
<span id="monitorStatusSpan"><span>TEST</span></span>
Related
I'm trying to do something like a social network, but I'm having problems with jquery, I want, by clicking the comment button, the user is taken to the comment field, but I'm not able to use $(this).
When the user click here
The code:
<button type="button" class="btn btn-default abreComentarios" >
<span class="fa fa-comments-o"></span>
</button>
The field:
The code:
<div class="comentar">
<textarea class="txtComentario form-control caixaComentario" placeholder="Seu comentário" onkeypress="comentarEnter()"></textarea>
</div>
My jquery:
$('body').on('click', '.abreComentarios', function() {
//console.log('entrou');
$(this).next('.caixaComentario').focus();
});
Remember, I'm using a foreach, so I have to use $(this)
Your next() isn't .caixaComentario but .comentar,
So use the next() but then you'll have to use find() (or children()) to focus the textarea
$('.abreComentarios').on('click', function() {
//console.log('entrou');
$(this).next('.comentar').find('.caixaComentario').focus();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-default abreComentarios">click</button>
<div class="comentar">
<textarea class="txtComentario form-control caixaComentario" placeholder="Seu comentário"></textarea>
</div>
Solved, i just did it:
1- Added a data-id with the id of the post in the button
<button type="button" class="btn btn-default abreComentarios" data-id="'.$post->id.'"><span class="fa fa-comments-o"></span></button>
2- Added the same id in the end of the name of class "caixaComentario"
<div class="comentar">
<textarea class="form-control caixaComentario'.$post->id.'" placeholder="Seu comentário" onkeypress="comentarEnter()"></textarea>
</div>
3- Call without $(this) on jQuery
$('body').on('click', '.abreComentarios', function() {
var id = $(this).data("id");
$('.caixaComentario'+id).focus();
});
and Worked :D
$(this) will be your <button>, but calling .next(".caixaComentario") will look for a sibling element to the button. If your <button> and <div class="comentar"> are siblings, the .next(".caixaComentario") will not match any elements as they aren't siblings. The would be a niece/nephew.
Try changing .next(".caixaComentario") to .next("div .caixaComentario")
How can I select a button based on its value and click on it (in Javascript)?
I already found it in JQuery:
$('input [type = button] [value = my task]');
My HTML Code for the Button is :
<button type="submit" value="My Task" id="button5b9f66b97cf47" class="green ">
<div class="button-container addHoverClick">
<div class="button-background">
<div class="buttonStart">
<div class="buttonEnd">
<div class="buttonMiddle"></div>
</div>
</div>
</div>
<div class="button-content">Lancer le pillage</div>
</div>
<script type="text/javascript" id="button5b9f66b97cf47_script">
jQuery(function() {
jQuery('button#button5b9f66b97cf47').click(function () {
jQuery(window).trigger('buttonClicked', [this, {"type":"submit","value":"My Task","name":"","id":"button5b9f66b97cf47","class":"green ","title":"","confirm":"","onclick":""}]);
});
});
</script>
What is the equivalent in JS and how may i click on it
(probably like this: buttonSelected.click(); ) .
And how do i run the javascript of the button clicked ?
Use querySelector to select it. Then click()
Your HTML has a button and not an input element so I changed the selector to match the HTML.
let button = document.querySelector('button[value="my task"]');
button.click();
<button type="submit" value="my task" id="button5b9f54e9ec4ad" class="green " onclick="alert('clicked')">
<div class="button-container addHoverClick">
<div class="button-background">
<div class="buttonStart">
<div class="buttonEnd">
<div class="buttonMiddle"></div>
</div>
</div>
</div>
<div class="button-content">Launch</div>
</div>
</button>
Otherwise, use this selector:
document.querySelector('input[type="button"][value="my task"]')
Note that if you have multiple buttons with the same value you'll need to use querySelectorAll and you'll get a list of all the buttons.
Then you can loop over them and click() them all.
Edit - new snippet after question edit
jQuery(function() {
jQuery('button#button5b9f66b97cf47').click(function() {alert('success')});
document.querySelector('button[value="My Task"]').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" value="My Task" id="button5b9f66b97cf47" class="green ">
<div class="button-container addHoverClick">
<div class="button-background">
<div class="buttonStart">
<div class="buttonEnd">
<div class="buttonMiddle"></div>
</div>
</div>
</div>
<div class="button-content">Lancer le pillage</div>
</div>
you can try:
var elements = document.querySelectorAll("input[type = button][value=something]");
note that querySelectorAll returns array so to get the element you should use indexing to index the first element of the returned array and then to click:
elements[0].click()
and to add a event listener u can do:
elements[0].addEventListener('click', function(event){
event.preventDefault()
//do anything after button is clicked
})
and don't forget to add onclick attribute to your button element in html to call the equivalent function in your javascript code with event object
I am not recommended this way because of excess your coding but as you mentioned, below are the equivalent way.
$(document).ready(function() {
var selectedbuttonValue = "2"; //change value here to find that button
var buttonList = document.getElementsByClassName("btn")
for (i = 0; i < buttonList.length; i++) {
var currentButtonValue = buttonList[i];
if (selectedbuttonValue == currentButtonValue.value) {
currentButtonValue.click();
}
}
});
function callMe(valuee) {
alert(valuee);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="button" class="btn" value="1" onclick="callMe(1)" />
<input type="button" class="btn" value="2" onclick="callMe(2)" />
<input type="button" class="btn" value="3" onclick="callMe(3)" />
Using JavaScripts querySelector in similiar manner works in this case
document.querySelector('input[type="button"][value="my task" i]')
EDIT
You might save your selection in variable and attach eventListener to it. This would work as you desire.
Notice event.preventDefault() -function, if this would be part of form it would example prevent default from send action and you should trigger sending form manually. event-variable itselfs contains object about your click-event
var button = document.querySelector('input[type="button"][value="my task" i]')
button.addEventListener('click', function(event){
event.preventDefault() // Example if you want to prevent button default behaviour
// RUN YOUR CODE =>
console.log(123)
})
Ok, so, I have a question.
I am getting the element ID like this.
<td id="ctl00_cphRoblox_lstItemsForResale_ctrl1_Td1" class="PriceBuyContainer">
document.getElementById("ctl00_cphRoblox_lstItemsForResale_ctrl1_Td1")
And this is below it.
<div class=" roblox-buy-now btn-primary btn-small PurchaseButton " data-item-id="168167114" data-item-name="Wanwood Visor" data-userasset-id="1941846042" data-product-id="20655974" data-expected-price="114" data-asset-type="Hat" data-expected-currency="1" data-expected-seller-id="6141596" data-bc-requirement="0" data-seller-name="laughableblox">
Buy Now
<span class="btn-text">Buy Now</span>
</div>
How would I get data-expected-price="NUMBERHERE" by using?
document.getElementById("ctl00_cphRoblox_lstItemsForResale_ctrl1_Td1")`
Use JQuery's .data() function. First you can grab the td element via jQuery:
var el = $("#ctl00_cphRoblox_lstItemsForResale_ctrl1_Td1");
Then find it's first child element and use use .data() to return the expected-price data attribute's value:
alert(el.find('> div').data('expected-price'));
jsFiddle
I have a dynamically created 3 options list which are attached at the end of a table row. I want to hide or disable Edit and Copy options if certain conditions are not met when page loads. How can i do this using either jQuery of JavaScript.
<div class="btn-group ewButtonGroup open">
<button class="dropdown-toggle btn btn-small" data-toggle="dropdown" href="#">Options <b class="caret"></b></button>
<ul class="dropdown-menu ewMenu">
<li><a class="ewRowLink ewView" data-caption="View" href="teamsview.php?showdetail=&TeamID=1">View</a></li>
<li><a class="ewRowLink ewEdit" data-caption="Edit" href="teamsedit.php?TeamID=1">Edit</a></li>
<li><a class="ewRowLink ewCopy" data-caption="Copy" href="teamsadd.php?TeamID=1">Copy</a>
</li>
</ul>
</div>
I have tried the following code which deosnt work.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink ewView span').text();
if ( Week_Check > 10) {
$('.ewRowLink ewView').hide();
}
});
</script>
You have a bad jQuery selector. If you want to hide an element having both of those classes you want to go this way:
$('.ewRowLink.ewView').hide();
By using $('.ewRowLink ewView').hide(); you basically state: hide all ewView (?) elements that are inside other elements having ewRowLink class.
You can use .off() to unbind the event:
$('.ewEdit, .ewCopy').off('click');
or if you want to hide:
$('.ewEdit, .ewCopy').hide();
Yet you need to mention on what condition you want to do this.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink, #ewView').find('span').html();
if ( Week_Check > 10) {
$('.ewRowLink, .ewView').hide();
}
});
</script>
Here is my HTML code that is generated by PHP.
<p id="resp19" class="resp">
<img src="logos/RO.png"><br>
<b>CompanyRO</b>
<span class="fprice">XXXXXX</span>
<span class="f_row">
<input name="first_row" type="radio">AAAAAAAAAA</span><br>
<span class="buts"><input class="f_det" value="Details" onclick="ShowDetails(resp19)" type="button">
<input class="f_det" value="Share" type="button"></span>
<span style="display: none;" class="details_content">
Detalii
</span>
After this, I'm hidding this span $('.details_content').hide();.
I want that when I press the Details button, the span with details_content is shown, only for this <p>.
How can I do that ?
You need to pass string to function onclick="ShowDetails(resp19)":
onclick="ShowDetails('resp19')"
Then in function ShowDetails write:
function ShowDetails(someId) {
$('#' + someId + ' span.details_content').show();
}
Also as you use jQuery better to attach click events using click() method:
Html:
<input id="details_button" class="f_det" value="Details" type="button">
JS:
$('#details_button').click(function() {
ShowDetails('resp19');
});
Note that you using <p> element that is for paragraphs and they are inline elements. Better usage will be <div> or other block elements.