Develop Reference

Jquery click function for a second time do not works

when user click for a second time click do not work, user need to reload the page again to it works
<script>
$(document).ready(function() {
$("#like_post").click(function(e) {
// $("#like_post").on("click", "#like_post", function (e) {
e.preventDefault();
var post_info = $("#post_info :input").serialize();
$.post("backend/ajax/like_post.php", post_info).done(function(data) {
$("#like_post").html(data);
$("#like").load(location.href+" #like>*","");
}).fail(function() {
//alert("Error submitting forms!");
})
})
})
</script>
this is the backend return from db
if user liked it will show
<div id="like_post><a href="" id="l"><input type="hidden" value="unlike" name="like_button" /><i style="color:red" class="fa fa-heart fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="'.$lang['you_liked_it'].'"></i>
</a></div>
else it will show
<div id="like_post"> <a href="" id="l"><input type="hidden" value="like" name="like_button" /><i class="fa fa-heart-o fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="'.$lang['like_it'].'"></i>
</a></div>
the same validation is on frontend where is will change the hidden input to like, or unlike , my backend check is fine and returning all ok when I check the html response, but the problem is that jquery do not work when user like and unlike without reload the page, it just get the first click and after that user need to reload the page to it works.
I had a similar issue before and it was something with event delegation.

Use the comment line in your code without "#like_post":
$("#like_post").on("click", function (e) {
});

How to click at element in my side menu

I've trying click at my element which it is on a side menu, after the click, the system opens a new window, which is like a frame.
But, using Xpath, protractor clicks at the element (I can see it because the element turns yellow when the mouse is houver) but the windown doesn't open.
I think protractor is click at the wrong place.
How can fix it?
the HTML:
<ul style="margin:10px 0 0 0; padding: 0">
<li class="menu-content-item ng-star-inserted" title="Principal">
<a class="ng-star-inserted">
<i class="" data-first="P"></i>
<span class="sidebar-title-menu"> Principal </span>
<i class="zmdi zmdi-chevron-right"></i>
</a>
</li>
</ul>
I already tried:
browser.driver.manage().window().maximize();
and
const menuPrincipal = element(by.css('div[title=Principal]'));
I'm using protractor helper so my code is like this:
async entraNoMeucomOLink() {
try {
const menuPrincipal = element(by.xpath('/html/body/application/pjmt-layout/div[1]/pjmt-bar/div/pjmt-menu-vertical/div[1]/div/ul/li/a/');
protractorHelper.waitForElementVisibility(menuPrincipal, 'MENU PRINCIPAL NAO ESTA VISIVEL', 5000);
browser.actions().mouseMove(elemento).click().perform();(menuPrincipal)
}
The element is like this :

It's not clear what you want. I change your code. Try this one and give feedback, please)
async entraNoMeucomOLink() {
const menuPrincipal = $('.sidebar-title-menu');
protractorHelper.waitForElementVisibility(menuPrincipal, 'MENU PRINCIPAL NAO ESTA VISIVEL', 5000);
await menuPrincipal.click();
}

Open all pdf documents in a new tab with a single click

I have a problem with popup blockers and window.open in chrome (Microsoft Edge works).
I read that browser allows window.open only with user interaction, so only the first pdf is opened:
//Show all pdf
$scope.showPdf = function(pdfList){
for(var i = 0 ; i < pdfList.length; i++){
window.open(document.getElementById(pdfList[i].name).href, '_blank');
}
}
In HTML code I have:
<div class="input-group">
<i class="fa fa-file-pdf-o" aria-hidden="true" style="color:red;"></i>
<a id="{{pdf.name}}" data-ng-href="pdf/{{pdf.id}}/{{pdf.name}}" target="_blank"><span> </span>{{pdf.name}}</a>
</div>
<button id="pdfButton" type="button" class="btn btn-primary"
data-ng-click="showPdf(pdfList)">Show all</button>
Is there a workaround to open all my files in a new tab? Thanks

how to display box on same page when a link is clicked

I am making php based web application .I'd like to have a box displayed on the same page when a link is being clicked using java script.How can i achieve this??
I have tried the below code
<script>
function a()
{
document.getElementsById("a").style.visibility="visible";
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="" onclick="a()">
Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;visibility:hidden">
</div>

The method of document is wrong.
It should be getElementById, you could use Google chrome DEV tools (Ctrl + shift + i on windows, ⌘ + option + i on Mac) to debug your code.

You needed to fix getElementsById isn't plural, should be getElementById
To stop the page reloading on click, set href="javascript:a()"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script>
function a()
{
document.getElementById("a").style.visibility="visible";
}
function close_a()
{
document.getElementById("a").style.visibility="hidden";
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="javascript:a()">
Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;visibility:hidden">
<i class="fa fa-times-circle"></i> Close Me
</div>
added function to close and font awesome

Change your code to this and the box will be displayed:
<script>
function a()
{
document.getElementById("a").style.display="block";
return false;
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="#" onclick="return a()">
Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;display: none">
</div>
There was an error in your code. getElementById is correct, and your <a> link refresh the page, correct method to avoid refresh is to change onclick="a();" to onclick="return a();" so that javascript look for return of function, and in function, we return false, therefore keep page same and avoid refresh.
Additionally you can add content to your box:
<script>
function a()
{
document.getElementById("a").style.display="block";
document.getElementById("a").innerHTML="<b>your other contents inside the box</b>";
return false;
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="#" onclick="return a();">
Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;display: none">
</div>

Share javascript sdk not poping up on IE7 and IE8

Inserting the following code does not work on IE7 and IE8. When clicking the link the share dialog should pop up but it does not in these browsers.
'<div class="facebookshare-box-wrapper">
<a href="#"
onclick="
window.open(
\'https://www.facebook.com/sharer/sharer.php?u=\'+encodeURIComponent(location.href),
\'facebook-share-dialog\',
\'width=626,height=436\');
return false;">
<span>Share on Facebook</span>
</a>
</div>'
On fiddle:
http://jsfiddle.net/Am4ND/

I fixed the problem, look at the [result on JsFiddle]http://jsfiddle.net/Am4ND/5/).
<a href="#" onclick="javascript:share();">
<span>Share on Facebook</span>
</a>
<script>
function share() {
window.open(
"https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(location.href),
"facebooksharedialog",
"width=626,height=436");
return false;
}
</script>
I cleaned and refactored your code, be careful about parameter delimiters.