I have a like link using twitter bootstrap.
<i class="icon-thumbs-up"></i><span class="badge">${fn:length(page.likes)}</span>
When the user clicks on like link the value within the span should be incremented.
Since i have for every comment a like button i dont know how to perform this task from a single javascript because how i can make sure which span to update.
Also one more thing i have this like button as a hyperlink with href="#". so the page is jumping to the top eveytime i click on the like link. Any idea how i can solve the problem.
For your second problem you could use <a href="javascript:void(0)">
For the first problem, where is your like button? You could always assign a unique id for each of you spans, then onclick the like button , you could use :
document.getElementById("spanUiqueId").innerHTML = parseInt(document.getElementById("spanUiqueId").innerHTML)+1;
For your existing dom structure just go for
$('.icon-thumbs-up').parent('a').click(function() {
var count = parseInt($('badge').text())+1;
$('badge').text(count);
}
If you wanna give id or class to a then replace $('.icon-thumbs-up').parent('a') with whatever new selector
Two things to explain here:
first : parseInt makes sure that number is passed for the incrementation, it is recommended way because of possibility of this creating silent error in js, passing wrong value tu text of your counter and breaking your page
second: I use +1 instead of ++ because ++ and -- tend to be instable depending on lots of things, so I use them never or only in for loop.
You can use jQuery for that:
Make the <a> tag have a class, for example "likeLink":
<a class="likeLink" href="#"><i class="icon-thumbs-up"></i></a><span class="badge">${fn:length(page.likes)}</span>
<script>
$("a.likeLink").click(function() {
$(this).next().text($(this).next().text()+1);
});
</script>
$(this).next() gets the next sibling of the element, in this case the <span>.
For your second question, what do you want the like button to do? If you just want it to appear as a link, you can change the "href" attribute of the link:
<a href="javascript:void('0')">
This would just do nothing, but keep the link.
Related
I have this HTML code
<li class="menu-level-1">
<a href="/Public/app/#/calendar">
<i class="site-menu-icon material-icons">date_range</i>
<span>
Calendar
</span>
</a>
</li>
I don't know exactly what I need to select in CYPRESS for automation to press the calendar button. I don't have a unique css or id class so I can't isolate it from the rest of the menu items. I only have what is seen in this code.
I think you want to click the element <a href="/Public/app/#/calendar"> since it has the href.
There's lots of ways to target it, the one to use depends on what is unique on the page
cy.contains('a', 'Calendar').click() // if the word Calendar only appears on this link
cy.get('a[href="/Public/app/#/calendar"]').click() // specifies by the link itself
cy,get('i.site-menu-icon').parent().click() // if the icon is the unique thing
You can use custom xpath like //*[text()="Calendar"]
If you have found many others on your web page, you can give an index like //*[text()="Calendar"][1] make sure here the index always starts with 1, not 0.
I want do to click and display in textarea.
The problem is once I click the fullname, the fullname will display in textarea;
and then click ic, the ic will display in textarea but replaced the fullname.
What should I do to make fullname,ic,hp not replace each other? I want to let user click by the variable they want, therefore I didnt do 3 variables insert in one click.
<span onclick=\"insert_user_eh_name('".$row['fullname']."','','');\">".$row['fullname']."</span>
<span onclick=\"insert_user_eh_name('','".$row['ic']."','');\">".$row['ic']."</span>
<span onclick=\"insert_user_eh_name('','','".$row['hp']."');\">".$row['hp']."</span>
function insert_user_eh_name(fullname,ic,phone){
jQuery("#text-area").val(fullname+ ic +phone);}
So, if you're using jQuery, here's the solution you would want:
var insertIntoTextArea = null;
$('.data').on('click', function(){
insertIntoTextArea += $(this).text();
$("#text-area").val(insertIntoTextArea);
});
Now, you can create the identifier any way you would like, but I used a class just to make it easier. One thing to remember is it's not usually a good idea to mix JS and PHP together. It just ends up being a mess and you'll run into so many problems. Also, it's not how jQuery is meant to operate.
That said, what I did was create a click event handler that will know that on click, append it to the textarea's value and make sure it is ADDED to the existing data, rather than overwrite what they previously had in the textarea.
Does this help?
Here's a JSfiddle just in case
embeded JS code you write in HTML is really strange, but if you don't want the string to replace each other in val, why not add them? for example:
// fullname click
var val = $('#text-area').val()
$('text-area').val(val + fullname)
All you need to write is about string process
I'm working on making a timer application, but at the moment, I have the timers set to their default values, 5:00, until the image above is clicked. The code for clicking the image is this:
<img src="images/Icons/image.png" id="id">
When that is clicked, I want it to adjust the following span code:
<span id="timer" class="one" name="blue1">5:00</span>
However, there are many parts to the code and with my CSS styles, I can't really spare the ID or class variables, so I'd like to use JavaScript to target this timer by its one unshared name, which is the name="blue1". Here is my JavaScript for now.
function BlueTimer1() {
document.getElementsByName('blue1').innerHTML="blah";
}
Obviously it will actually do something once I am done with it, but for now I just need to be able to modify the text within the span, I don't care what it edits it to.
Thanks for any assistance.
Actually document.getElementsByName('blue1') will return a collection/array like object of spans even there is only one so you need to select the first one using:
document.getElementsByName('blue1')[0].innerHTML="blah";
So it'll work, but if you use getElementById('timer') then you can do it usong:
document.getElementById('timer').innerHTML="blah";
Make sure you have only one element using one id, which means an id must be unique.
I have a few 'headlines' which, when clicked, I would like for them to expand/change colour etc. I shtere any way of changing the div on click of one of the headlines so that whichever one I click will have it's properties changed. One problem is that it will need to be a single instance...When you click on another 'headline' after clicking one previously, the one clicked before hand will need to be changed back.
So...if 'current' is the one that they have just clicked:
<script>
Function ClickedHeadline() {
document.GetElementByID('current').style.width="auto"
document.GetElementByID('current').style.BackgroundColor="#999"
}
</script>
Maybe it can run a script before the one above to tell the div that has the id 'current', will change back and then run the above script...
I don't think I've explained this very well but I hope you can get what I'm trying to do. It just saves me from making a function every time I make another headline along with all the id's, It'll just get extremely confusing after a while.
I agree with the case sensitive and just think is better to add the objet who you want to modify like this :
function ClickedHeadline(o) {
o.style.width="auto";
o.style.backgroundColor="#999";
}
And in the html you just add
onClick="ClickedHeadline(this);"
I think it's better, you can reuse the function now :) .
Javascript is case sensitive, replace with this
function ClickedHeadline() {
document.getElementById('current').style.width="auto";
document.getElementById('current').style.backgroundColor="#999";
}
(i advise of use always semicolon)
I have this HTML:
Track Your Package »
Somebody on this site was able to provide me with a script to prefix the URL with the domain http://www.example.com/ Here's the script:
$(document).ready(function(){
$('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick', $('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick').replace("window.open('", "window.open('http://www.example.com/"));
});
However, I am having a little trouble with this:
The first issue is where there is multiple instances of the element. Here's a fiddle: http://jsfiddle.net/VMmZx/
Instead of one anchor being signed with ID=4 and the other with ID=5 as intended, they're both being signed with ID=4.
The idea is, each window.open function should be prefixed with http://www.example.com however, the remainder of the URL should remain intact...
The second problem I'm encountering is when the element does not exist on a page, the remainder of the jQuery fails...
Here's another fiddle: http://jsfiddle.net/VPf32/
The <a> should get the class foo, but since the element does not exist on the page, the jQuery does not execute.
Since the JavaScript is being included in the HTML template of the ASP.NET server, this can create many problems.
I hope I've been clear and you can help me. Thanks.
You can use .each() to iterate over each matching element and change them individually:
$('a[onclick^="window.open(\'TrackPackage.asp"]').each(function(index, element) {
element = $(element);
element.attr('onclick', element.attr('onclick').replace(/open\('/, 'open(\'http://www.example.com/'));
});
However, I don't think using links with a href of # and an onclick opening a window is as semantic as it could be. If possible, try changing the markup to this:
Track Your Package »
Now if someone is curious where it will lead them, the browser can show something useful in the status bar when you hover over it.
If you need to adjust the behavior further, add a class and bind for the click event. When they click, prevent the default action and open the window yourself, as you did before.
Why are you doing the click even inline like that? I would just output the links like:
Link Text
And then:
$('a[target=_blank]').click(function(){
var prefix = 'http://domain.com';
window.open(prefix + $(this).attr('href'));
});