Changing G+ url parameter without refreshing the page - javascript

I have a link that a user can share on fb and G+.
The user can modify that link and he did it with an ajax call so the page is not refreshing.
My gplus button code :
<link rel="canonical" href="{{ url }}" />
<g:plus action="share" style="height: 28px;" ></g:plus>
when the user changes the url I update the href attribute too :
$.post(url,{
someParams:"someValues"
},function(data){
.
.
.
// updating the href attribute with the new modified url
$('link[rel="canonical"]').attr("href",data.url);
}
The problem is that the G+ button still load the old url.
But only by refreshing I get the new one.
My question is how can i change the G+ url without refreshing the page ?

Is this what you want (obviously changing that prompt for your ajax callback logic)?
http://jsfiddle.net/coma/2783J/6/
HTML
<!-- Place this tag where you want the +1 button to render. -->
<div id="gplus"></div>
<button>change it!</button>
JS
$(function() {
var container = $('#gplus');
var render = function(url) {
container.html('<g:plusone href="' + url + '"></g:plusone>');
gapi.plusone.go('gplus');
};
$('button').click(function(event){
var url = prompt('Give me an URL');
render(url);
});
render(location.href);
});
Be aware that I'm loading the plusone.js in the external resources of that jsfiddle.
BTW, why did you use the Symfony2 tag?

Related

send data in load data

Hı,
I have a script that loads my div tag some PHP files like this;
$(".loaddiv").click(function() {
var url = $(this).attr("id") + ".php";
$("#orta_load").load(url);
console.log("loading " + url);
});
when ı click a button; its load of some PHP files into orta_load div tag without refresh (that is the problem)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Dahili Branşlar</span>
<span>Cerrahi Branşlar</span>
<div id="orta_load">
loading page
</div>
How can send data to another page which is upload?
for example, ı have a contact page that name is contact.php.
When I press submit button I should send all data to thanks.php page without refresh the main page
I tried lot of ways but I could not do this. when I press the button the page is refreshed or it is not send the data
What should I do?

Append the values to the URL on Form in Javascript

I have a form link on multiple pages. All I need when I click on a form link for page A it should display as www.form.com?referrer=Page A on URL and when I submit the form, I have created a hidden field referrer, when I received it on my email on the referrer field it should show "page A".
I have this HTML code which was working fine however, I do not want to do it manually on every page, as soon as a user clicks on the form link or received the form it should automatically updated:
<a target="_blank" title="Click Here" href="https://myform.com/forms/land_discount?referrer= Beach Club">
Here is the JavaScript for my Form:
Discount Form
See if this is what you are trying to do:
// I'm going to use jQuery, it's easier for me
$(document).ready(function(){
// I used a class so it doesn't do it to every <a> tag
$('a.use_refer').click(function(e){
// Stop the button from submitting normally
e.preventDefault();
// Create a new url
// You may or may not want to use encodeURIComponent() on the path value
var newUrl = $(this).attr('href')+'?referrer='+document.location.pathname;
// Go to the new page
window.location = newUrl;
});
});
</script>
Click Here
Assuming you Page A is the last directory of the path. And wrap this for when the DOM is ready.
Note the changes to the HTML with the addition of the id= tag.
On "Page A"
HTML:
<script type="text/javascript" src="https://myform.com/forms/js.php/test"></script>
<noscript>
Game Form
</noscript>
Javascript:
var url = document.getElementById('formRef').getAttribute("href");
document.getElementById('formRef')
.setAttribute('href', encodeURI(url + '?referrer=' + window.location.href.slice(window.location.href.lastIndexOf('/') + 1)));
On "Landing Page"
HTML:
<a id="landingPage" target="_blank" title="Click Here" href="https://myform.com/forms/land_discount">
Javascript:
var href = document.getElementById('landingPage').getAttribute('href');
if(window.location.href.indexOf('referrer=') > -1){
document.getElementById('landingPage').setAttribute('href', encodeURI(href + window.location.href.slice(window.location.href.indexOf('?referrer='))));
}

How can I load PHP GET values using jquery .load()

I am trying to load data from another page. The data that I am trying to load is simple PHP $_GET value that was passed through a URL
The $_GET value should be loaded only when the following link has been clicked on.
The data only loads when I use the following href link :
<a id="pizza" href="#">Pizza</a>
However when I use this href tag
<a id="pizza" href="menu.php?test_val=1">Pizza</a> <!-- The link is on the same as the menu.php page >
The content does not get loaded. I figured out that it doesn't get loaded because I set the content to display only when the link gets clicked on like so...
<script>
$("#pizza").on("click", function(){
$("#item_description").load("item-details.php");
})
</script>
The problem is when I click on the link it starts a new XHTTP request and doesn't reach the
$("#item_description").load("item-details.php");
Because nothing is being clicked on when there is new XHTTP request.
The item-details page just echo's out the value that was sent
<?php
echo $_GET['test_val'];
?>
Can anyone please help me come up with a solution??
Thanks!!
use
<a id="pizza" href="#">Pizza</a>
to keep your link format and you can use
$("#item_description").load("item-details.php?myvar=1&mysecondvar=2");
to pass your value to your PHP script
you can read GET value by parsing :
window.location.href
if needed

Creating a link to an id that refreshes the page

I am working on a project that uses javascript to make tabs. It has 3 tabs.
Tab three has an id of tab3, what I need is a refresh button that will be on tab3 that will refresh the page. Problem I'm having is if you click on tab3 it will display tab3 data, but it does not change the url. So the refresh button isn't working.
I tried an onclick javascript that reloads the page using location.reload() which reloads the page but not to the tab3. So I put that on a link,
<a href="<?php echo $_SERVER['REQUEST_URI']; ?>#tab3" onclick="reloadPage();" >Refresh</a>
This will link to the correct location, the URL then has #tab3 at the end, then the Javascript runs and it reloads back to the url without the #tab3.
So I then tried this that I saw somewhere.
Go
Which links, but doesn't reload.
What is the best way to do this?
Try this-
<a href="#tab3" onclick="location.reload();" >Refresh</a>
Using window.location is the solution, however if the current location is already the same as the new url that is assigned, then browser will not re-load the page.
The only trick would be to make the new url look "new". This can be done by adding a random identifier as querystring parameter.
In the form:
http://hostname?<dynamic/random>#tab3
Example:
Go
In head put,
<script type='text/javascript'>
function goto(link) {
window.location = link
}
</script>
and do this to your button
<a onclick=goto("<?php echo $_SERVER['REQUEST_URI'] . '#tab3'; ?>"); >GO </a>
if you want to refresh the page and aslo goto same place this code will work
<form method=post action="">
<input type=hidden name=value value="#tab3" />
<input type=submit value=GO />
</form>
<?php
if (isset($_POST['value']))
{
header('Location: http://'. $_SERVER[HTTP_HOST] . $_SERVER[REQUEST_URI] . $_POST["value"]);
}
?>

can't seem to get this ajax code to work? Won't display "dynamically"

I have a live search bar where if the user types in "M" only results that have an M are shown and so on, i've made each result into a link so when the user clicks it, it'll load to a different page.
Now, I can make it load to another page, however I'm trying to do it on the same page but it just wont work.
The search code is simply a form that takes text, then im using the xmlhttp method to make it live.
Now, displaying it is as follows: (I have given it a class to use in the ajax)
echo "<a href = 'display.php' class='display'>" . $row['carName'] . "</a>";
Ajax:
$(document).ready(function() {
$(".display").each(function(){
var btn = $(this);
btn.on("click",function(){
$("#displayDiv").empty();
$.post("display.php",function(data) {
$("#displayDiv").append(data);
Any help? Currently, clicking it just loads test.php on which I have some text to see its working. I'm trying to get it to load dynamically on the right.
Thanks.
EDIT: it loads test.php which is:
<html>
<body>
<div id="displayDiv">
<h2> Test </h2>
</div>
</body>
</html>
EDIT2: div id which is in the same page as script:
<html>
<div id="displayDiv" style="width: 40%; float:right">
</div>
It's just following the link when you click on it. To stop this you need to change the event handler to:
btn.on("click",function(e){
e.preventDefault();
// rest of your code
});
$(document).ready(function() {
$(".display").on("click", function(e) {
$("#displayDiv").empty();
$.post("display.php", function(data) {
$("#displayDiv").append(data);
}
);
e.preventDefault();
});
});

Categories

Resources