I am calling showedit function with argument. But when i alert it in the function it is showing partial value.
Here is the HTML code:
<a href="javascript:void(0)" onclick="showedit(856478546521458789);">
<i class="fa fa-pencil-square-o" aria-hidden="true" style="font-size: 20px;float: right;"></i>
</a>
Here is the Javascript code:
function showedit(id) {
alert(id);
document.getElementById("update_status_" + id).style.display = "block";
document.getElementById("status_" + id).style.display = "none";
}
Can you tell me what is the problem?
Send the argument as a string. See the code snippet below:
<a href="javascript:void(0)" onclick="showedit('856478546521458789');">
<i class="fa fa-pencil-square-o" aria-hidden="true" style="font-size: 20px;float: right;"></i>
</a>
It is happening because it is exceeding JavaScript's MAX_INT value.
Related
help me get the value from the button, I can not
my code:
<i class="fas fa-shopping-cart"></i> press
<script>
funk = (a) => {
console.log(a.value)
}
</script>
Set a value in HTML and retrieve it on click with getAttribute
<i class="fas fa-shopping-cart"></i> press
const funk = (a) => {
console.log(a.getAttribute("value"))
}
There's a few issues in your code:
The link will transfer the page, so you probably need to preventDefault
a elements don't have a value attribute. Use a data attribute to add custom metadata to an element
Use an unobtrusive event binding, not outdated onclick attributes
Here's a corrected version using plain JS:
document.querySelectorAll('.price-button').forEach(el => {
el.addEventListener('click', e => {
e.preventDefault(); // stop the page transfer
const button = e.target;
console.log(button.dataset.value);
});
});
<a href="#" data-value="123" class="price-button">
<i class="fas fa-shopping-cart"></i>
press
</a><br />
<a href="#" data-value="456" class="price-button">
<i class="fas fa-shopping-cart"></i>
press
</a>
And the same thing in jQuery, as you tagged that as well:
jQuery($ => {
$('.price-button').on('click', e => {
e.preventDefault(); // stop the page transfer
const $button = $(e.target);
console.log($button.data('value'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<a href="#" data-value="123" class="price-button">
<i class="fas fa-shopping-cart"></i>
press
</a><br />
<a href="#" data-value="456" class="price-button">
<i class="fas fa-shopping-cart"></i>
press
</a>
On my site I have a menu to the right of the navigation bar. It displays the search when it is available on the current page.
I want to display an icon when the search is available.
All search blocks have the class .views-exposed-form and appear in #navbar-collapse-second
I added to my icon, the class .icon-navbar-alert-disable which is used to hide the icon.
How to remove the .icon-navbar-alert-disable class when the .views-exposed-form class is present in #navbar-collapse-second ?
Here is the css code to hide the icon :
.region-navigation-menu-second .navbar-toggle-second .icon-navbar-alert-disable {
display: none;
}
Here is the code of the button of my manu with the icon :
<div{{ attributes }}>
<a class="navbar-toggle-second collapsed" data-toggle="collapse" data-target="#navbar-collapse-second" aria-expanded="false">
<div class="icon-navbar">
<span class="fa-layers fa-3x">
<i class="far fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-filter" data-fa-transform="shrink-9"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times" data-fa-transform="shrink-8"></i>
</span>
</span>
</div>
<div class="icon-navbar-alert icon-navbar-alert-disable">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-filter fa-stack-1x fa-inverse"></i>
</span>
</div>
</a>
</div>
Here is the page concerned, this is the menu on the right :
https://www.s1biose.com/boutique/ma-boutique-pro
I started a JS code but it is not complete :
$('#navbar-collapse-second') ???.views-exposed-form??? {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
});
UPDATE
(function ($) {
if ($('#navbar-collapse-second').hasClass('views-exposed-form')) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
})(window.jQuery);
enter image description here
Are you looking for the hasClass selector in jQuery?
If so wrap it in a if statement and inside you can show the result you'd like from it;
if ($('#navbar-collapse-second').hasClass('views-exposed-form') === false) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
I want to get text of an email behind canvas, but not finding a way to do it.
I am trying the following code
from selenium import webdriver
driver=webdriver.Chrome()
driver.get('https://thatsthem.com/phone/806-241-6888')
table=driver.find_element_by_css_selector('.row.clearfix.mt15').get_attribute('innerHTML')
When I print table I don't see variable behind canvas (like var p1 = "makaya0";). They can be seen in source code when I open "View Page source" on browser. How we can access that variables and get text from them?
Below is page Source
<ul class="list-unstyled list-inline record-list">
<li>
<span class="label label-info"> <i class="fa fa-check"></i> Mobile</span>
</li>
<li>
<i class="fa fa-phone" data-toggle="tooltip" title="Phone Number"></i>
<h3>
<span itemprop="telephone">806-241-6889</span>
</h3>
</li>
<li>
<span class="label label-success"><i class="fa fa-check"></i> Valid Email Address</span>
</li>
<li>
<i class="fa fa-envelope" data-toggle="tooltip" title="Email Address"></i>
<canvas id="c59baf787024e2" width="160" height="20" class="email"></canvas>
<script id="t2i">
var p1 = "makaya0";
var p2 = "923#yah";
var p3 = "oo.com";
var c59baf787024e2 = document.getElementById("c59baf787024e2");
var c59baf787024e2_context = c59baf787024e2.getContext("2d");
c59baf787024e2_context.fillStyle = "#353535";
c59baf787024e2_context.font = "98% sans-serif";
c59baf787024e2_context.textBaseline = "bottom";
c59baf787024e2_context.fillText(p1 + p2 + p3, 0, 20);
document.getElementById("t2i").parentElement.removeChild(document.getElementById("t2i"));
</script>
</li>
<li itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<i class="fa fa-home" data-toggle="tooltip" title="Address"></i>
<a class="no-linky" href="https://thatsthem.com/address/8114-Sherman-Ave-Lubbock-TX-79423">
<span itemprop="streetAddress">8114 Sherman Ave</span>
<br/> <i class="fa-placeholder"></i>
<span itemprop="addressLocality">Lubbock</span>
<span itemprop="addressRegion">TX</span>
<span itemprop="postalCode">79423</span>
</a>
</li>
</ul>
the values you are talking about are javascript variables.
they're not 'text' per say.
to run a script in javascript through selenium, you can do:
output = self.driver.execute_script("return p1;")
and it will put the value of variable p1 in javascript into the output variable in python.
This assumes the variable p1 is in the global context, which it seems to be in your case.
I have set up a client-side translation of my web page using translate.js. If a user clicks on say, French, I would like that to move to the position of English and for English to move to the position of French. I tried the following:
$('.img-btn').click(function(){
var clickedId = $(this).attr('src');
alert('you clicked on button #' + clickedId);
$('.img-btn.active').attr('src', clickedId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="language-select">
<a class="lang_selector trn" href="#" role="button" data-value="fr"><img id="French" class="img-fluid rounded-circle img-btn" src="img/flags/fr.jpg" alt="French"></a>
<a class="lang_selector trn" href="#" role="button" data-value="it"><img id="Italian" class="img-fluid rounded-circle img-btn" src="img/flags/it.jpg" alt="Italian"></a>
<a class="lang_selector trn" href="#" role="button" data-value="en"><img id="English" class="img-fluid rounded-circle img-btn active" src="img/flags/en.jpg" alt="English"></a>
<i class="fa fa-angle-right fa-2x" aria-hidden="true">
</div>
But it doesn't seem to work (not even the alert did). Any ideas?
Good afternoon,
I think you want something like this:
$('.lang_selector').click(function(){
var clickedId = $(this).children(':first').attr('src');
alert('you clicked on button #' + clickedId);
var lastChild = $('div#language-select > i:last-child');
var lastLink = $('div#language-select > a:last-of-type');
//Insert current clicked element to last position
lastChild.before($(this));
//Insert the element that was last before the first element
$('div#language-select > a:first-of-type').before(lastLink);
});
I guess you want something like this. Live link
$('.img-btn').click(function(){
var clickedSrc = $(this).attr('src');
var activeSrc=$('.img-btn.active').attr('src');
alert('you clicked on button #' + clickedSrc);
$('.img-btn.active').attr('src', clickedSrc);
$(this).attr('src', activeSrc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="language-select">
<a class="lang_selector trn" href="#" role="button" data-value="fr"><img id="French" class="img-fluid rounded-circle img-btn" src="http://www.theodora.com/gif2/france_fan.jpg" alt="French"></a>
<a class="lang_selector trn" href="#" role="button" data-value="it"><img id="Italian" class="img-fluid rounded-circle img-btn" src="http://www.theodora.com/flags/new9/italy-s.gif" alt="Italian"></a>
<a class="lang_selector trn" href="#" role="button" data-value="en"><img id="English" class="img-fluid rounded-circle img-btn active" src="http://www.theodora.com/flags/new12/bangladesh-s.gif" alt="English"></a>
<i class="fa fa-angle-right fa-2x" aria-hidden="true">
</div>
put your function in ready document or use the bubbling concept like so , to make sure the code will applied after the page creation :
$('body').on('click','.img-btn',function(){
var clickedId = $(this).attr('src');
alert('you clicked on button #' + clickedId);
$('.img-btn.active').attr('src', clickedId);
});
$(document).ready(function() {
setInterval(function() {
$("#appointment").html('<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-bell fa-fw"></i><span class="badge" prettydate data-date-format="YYYY.M.D h:m:s"><?php echo $date;?></span> <i class="fa fa-caret-down"></i></a>');
}, 1000);
});
I have used prettydates jquery to show the time in a way that it shows how long ago.. (https://fengyuanchen.github.io/prettydate/)
but I have inserted this html tag after loading the full script so i couldn't get the actual(long ago..) part I actually get the date that is printed by the php. It doesn't change.. how can i make it?
Prettydate has an autoUpdate option designed for what you're doing.
$(".prettydate-auto-update").prettydate({ autoUpdate: true, duration: 1000 });
Here's a js fiddle as an example.
https://jsfiddle.net/y7bu12kk/2/
You can try manually initiate it:
$(document).ready(function() {
setInterval(function() {
$("#appointment").html('<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-bell fa-fw"></i><span class="badge prettydate" prettydate data-date-format="YYYY.M.D h:m:s"><?php echo $date;?></span> <i class="fa fa-caret-down"></i></a>');
}, 1000);
$(".prettydate").prettydate();
});