We Keep Coding

Javascript Bookmarklet Duplicating URI / URL

I have the following bookmarklet:
javascript:findlink=document.getElementsByClassName(%22download_link%22)[2].href;window.open('https://myfiledrive.com/users/files/add?url='+findlink,'_blank');void(0);
Example:
<a class="download_link" href="example.com/pdf1.pdf">
<a class="download_link" href="example.com/pdf2.pdf">
<a class="download_link" href="example.com/pdf3.pdf">
Basically, it searches the currently active page, for the third iteration of an tag with the class "download_link", and stores it in the variable "findink",
Then it loads 'https://myfiledrive.com/users/files/add?url='+findlink
In the above example it should load:
https://myfiledrive.com/users/files/add?url=example.com/pdf3.pdf
but what ends up happening is that this gets loaded:
https://myfiledrive.com/users/files/add?url=example.com/pdf3.pdf?url=example.com/pdf3.pdf
so basically it's duplicating url=
What am I doing wrong? Thanks.

The url param shouldn't be duplicated. You're not appending to findlink or anything. You can try the snippet below, it's exactly as you've posted.
Chrome will block the popup, but if you read the error message, there's no duplication going on:
Blocked opening 'https://myfiledrive.com/users/files/add?url=https://stacksnippets.net/example.com/pdf3.pdf' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
url is only in there once no matter how many times I click.
<a class="download_link" href="example.com/pdf1.pdf">1</a>
<a class="download_link" href="example.com/pdf2.pdf">2</a>
<a class="download_link" href="example.com/pdf3.pdf">3</a>
download

I want to change the main content dynamically with javascript instead of individual pages

My website is currently using .tpl template files to load different pages dynamically. That will load an entire page again, so header, sidebar (chat), main content and the footer.
In my index.php file there is a switch case which loads the page 'home' when you click on 'home' in the menu. (example)
But I don't want that. Because their is also a chat in the sidebar, and that reloads/resets eveytime you load a different page. So all previous messages will be gone. So what I do want is changing only the main content part. So header, sidebar and footer will stay and won't reload.
I tried to do it with javascript but that didn't work...
Can someone help me or atleast put me on the right path?
(And yes, I have been searching for the last hour on stackoverflow and google but couldn't find anything...)

What you need is called AJAX(With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.)
To use ajax u need Javascript to send the request to a PHP file that loads the smarty template that contains your main content and insert the html code back into the page:
<?php
//some-php-file.php
include("Smarty.class.php");
$smarty = new Smarty;
$smarty->display("main_content_part.tpl");
?>
//link on 'home' site
Home
//javascript(jquery) ajax request
$('#ajaxHomeBtn').click(function(e){
e.preventDefault();
$.get("some-php-file.php", function(smarty_html_data) {
$(".main-content").html(smarty_html_data);
});
});

Please follow following instruction :
Create separate .tpl file for header,footer,sidebar and contents files.
In main file include header,footer,sidebar and left one section for content.
3.Replace your .tpl (using id or class) file content using ajax call.
bind your url with function.
Sample code as below:
// sidebar.php
<ul>
<li><a onclick="changePage(this)" data-page="home.tpl">Home</a></li>
<li><a onclick="changePage(this)" data-page="aboutus.tpl">About Us</a></li>
</ul>
// master.php
<?php
include("header.php");
include("sidebar.php");
?>
<section id="fileContent">
</section>
<?php include("footer.php");
?>
<script href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function changePage(obj)
{
var Filename=$(obj).data('page')
$.get(Filename, function( data ) {
$( "#fileContent" ).html(data);
});
}
</script>

Anchor tag update div without page reload

I have this div which includes an anchor tag that loads a php script that essentially adds information to a database and returns back to this page. I want to use this achor tag to run that php script update the database and refresh this div without reloading the page. The php script need those two variables title and vote which used with the php $_GET[] function. Can this be done, and if so how? I have searched everywhere and no script seems to work. Will provide more information if needed. Thanks so much will give credit to everyone who helps.
<div class='like_box'>
<a href='#' class='counter' ><img src='img/like.png' class='vote'></a><p class='vote_text'>$like_num</p>
<p style='color: #fff;'>$like_username</p>
</div>
I've tried something like this
<script>
$('a.counter').click( function(e) {
e.preventDefault();
vote.php?vote=like&title=$title
});
</script>

Use this:
<div class='like_box'>
<a href='#' class='counter' ><img src='img/like.png' class='vote'></a><p class='vote_text'>$like_num</p>
<p class="vote_text1" style='color: #fff;'>$like_username</p>
</div>
In the javascript side (jquery)
$(".like_box a").click(function(event){
event.preventDefault();
$.ajax({
url: 'vote.php?vote=like&title=$title',
success: function(result){
// update $like_num and $like_username here
// if you do not have them binded use this
$('.like_box p.vote_text').text('<value from result>');
$('.like_box p.vote_text1').text('<value from result>');
}});
});

Jquery load url underground

I have this code
<div class="wrap-box-video" id="31">
<div class="addfav">
</div>
<img src="/etc.jpg" />
</div>
and with this code
$(document).ready(function(){
$("div.addfav").click(function(e){
window.location = "?wpfpaction=add&postid=" + $(this).parents(".wrap-box-video").attr("id");
});
});
i want to load the ?wpfpaction=add&postid=31 (in this exemple) but not to show in the url tab i want this to be underground. if i'm on exemple.com page and i click the addfav div i want the exemple.com to be the same but the script to work.

If you're talking about changing what text appears in the browser tab, you can alter the title element of the HTML rendered at you ?wpfaction endpoint.
If you want to change what the actual URL that appears in the URL bar, see Modify the URL without reloading the page

HTML button to load data and refresh UI

Here the situation:
In my html page I have a link, which onclick runs a PHP script.
<iframe style="display:none;" name="target"></iframe>
Load new tasks
I use an invisible iframe to execute the script but I stay on the same page.
This link executes script.php which updates mysql database, but in order to see new content the page must be reloaded.
Of course I can always create a separate button/link that reloads current page.
But I wonder if there is a way to execute the PHP script and reload current page with one html button.

Better use it this way:
1: Use a common Javascript Framework, for example JQuery
2: Create your Link and a Div for your Content:
Update my Data and reload my new Content
<div id="result"></div>
3: Use Jquery to add the click event to your link:
$('#reload').click(function(e) {
// Prevent from going to the link provided in href
e.preventDefault();
// make POST Request to script
$.post( "myScriptHandler.php", { value1: "1", value2: "2" })
.done(function( data ) {
// if done, refresh my Div with html content from your PHP Script
$('#result').html('')
$('#result').load('mydata.php');
});
}

You don't need AJAx - just return a script into the iframe which updates the toplevel page...
<?php
....
$new=run_updates();
print "<div id='newcontent'>$new</div>\n";
?>
<script>
var dest=parent.document.getElementById('oldcontent');
var src=document.getElementById('newcontent');
dest.innerHTML=src.innerHTML;
</script>
(not tested, YMMV)

I show you how to use Ajax in this case:
here is your html and js code:
<script type="text/javascript">
$(".link").on("click", function() {
$.ajax({
url: "your_php_script.php",
dataType: "json",
cache: false,
success: function(data) {
location.reload(true);
}
});
});
</script>
<html>
<body>
<a class="link" target="target">Load new tasks</a>
</body>
</html>
When you click the 'a' tag, the jQuery Ajax script call your php script, and when it return with success, then your page will be refresh.