How can I use the GET Method with a hashtag in the URL?

Question

For example: www.example.com#?id=10

So far I am not getting any value from $_GET['id']. I tried to remove the hashtag from the URL with JavaScript, but nothing happens:

$(document).ready(function(){
   $(window.location.hash).modal('show');
   $('a[data-toggle="modal"]').click(function(){
      window.location.hash.replace('#', '') = $(this).attr('href');
   });
});

I know that I could use ajax, the thing is that I am unfamiliar with it when it comes to using GET and POST. I am trying to take this anchor href:

echo '<a  href="?id='.$row['id'].'" id="smallbtn" data-toggle="modal"
                          data-target="#small"  data-modal="small">';

And send it to the URL without refreshing the page. Is it possible to accomplish this?

`window.location.hash.replace('#', '') = $(this).attr('href')` that is an invalid assignment, you should be seeing an error in console. Also if you want to send something without refreshing the page you would need to use ajax, or if unwilling to learn that api you would have to do it through setting an iframe's src. But learning ajax would be a better choice. — Patrick Evans, Jul 08 '18 at 02:20
Possible duplicate of [Can I read the hash portion of the URL on my server-side application (PHP, Ruby, Python, etc.)?](https://stackoverflow.com/questions/940905/can-i-read-the-hash-portion-of-the-url-on-my-server-side-application-php-ruby) — , Jul 08 '18 at 02:25
@PatrickEvans Not technically sending anything, just updating the URL. Unless that's the same thing you are talking about. How would I implement the ajax with my code? — Laney Williams, Jul 08 '18 at 02:28

score 1 · Answer 1 · answered Jul 08 '18 at 03:52

You seem to be mixing up PHP and JavaScript since both statements you show are from both sides. So your question is not crystal clear...

When you click on an anchor link, the browser does this:

window.location = jQuery("#smallbtn").attr("href");

So you don't have to do that yourself if that's all that has to happen (obviously).

Now, you mention anchors (#something) but in your example, you have none of them. If you currently have an anchor in your URL and you are trying to get rid of it as the user clicks on the link, then that's already how that works. So again, nothing more to do.

If there could be an anchor in the "href" attribute and you do not want it, then you want to do something like this:

var href = jQuery("#smallbtn").attr("href"),
    parts = href.split("#");

window.location = parts[0]; // ignore anything after the '#'

However, either way, this will force a reload of the new location. From what you are saying, you want to "change the URL" (in the location bar) but not reload the page. This is done using the History API of the browser. Most support that feature now.

window.history.pushState(
    {
        "html": html,
        "pageTitle": page_title
    },
    "",
    url);

The pushState() defines the page HTML, title, and URL. It will not reload anything, nor change anything in the browser. That's your responsibility. The one thing that will change is the URL in the location bar. It gets set to 'url'.

To change your browser title you do:

document.title = page_title;

And to change your browsers HTML (assuming you want to change the entire page) you do:

jQuery(body).innerHTML = html;

All in all, though, you'll have to learn AJAX. Frankly, it's just using the jQuery.ajax object to send a GET or POST request to your PHP code which answers with XML or JSON (XML is nice with jQuery, it can parse it like the DOM) and use that data whenever you callback gets called to change the title, HTML, whatnot on the client's side. That's all there is to it!

I think that the hardest part is not AJAX in itself, but the fact that whenever you change the DOM, the existing jQuery() listeners fail to automatically acknowledge the new tags. This dynamic DOM handling is what makes "AJAX" complicated, without it really being part of AJAX (since AJAX is just the sending of a GET or POST and handling of the answer.)

Thank you so much. I'll definitely look into ajax. One more question, how can I implement `replace('#', '')` in my current code correctly? This: `window.location.hash.replace('#', '') = $(this).attr('href');` @AlexisWilke — Laney Williams, Jul 08 '18 at 11:25
That's what my second code sample is about. You get the `href` attribute, remove any `#....` from it, and put the rest in the `window.location` (i.e. `parts[0]`). If you don't have any `#...` in your `href` just doing `window.location = href` will do the trick. It will remove whatever hash tag you had there. — Alexis Wilke, Jul 08 '18 at 21:15
Thank you so much! In my latest question I am using the ajax post method with php. The problem is that php is not receiving post method data even though is was sent from ajax. I know because I check the network tab and everything was ok. Is this because the POST method does not update or is not dynamic? — Laney Williams, Jul 09 '18 at 12:21
You would need to post a new stackoverflow question with your code on both sides so we can help. Just like that, I have no clue. — Alexis Wilke, Jul 09 '18 at 19:01

How can I use the GET Method with a hashtag in the URL?

1 Answers1