jQuery: encodeURI with a space

trevor1940
trevor1940 used Ask the Experts™
on
Hi can some say why  the href with the space in doesn't do anything after the alert box show "My%20Word"
Did a var_dump of $_GET and nothing
Also nothing in the network tab of dev tools

$(document).on("click", "a", function(evt) {
     evt.preventDefault() ;
     var ID = "Wrap_" + $(this).attr('id');
     var link = encodeURI($(this).attr('href'));
     alert(link);
     $('#'+ ID).load(link);
});

<a href="myfile.php?param=My Word">My Word</a>
<a href="myfile.php?param=My word">MyWord</a>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2010
Commented:
If you do a console.log(ID) after line 3, you will see why.

Your links don't have an id attribute but you're attempting to get the value of the id attribute.

Author

Commented:
Apologies that was a typo

Just tried to recreate the issue at home and realised your 1/2  correct, the <a  id='My Word'> is being created by php with a space which is causing the error

In the code bellow is it possible to load the response from myfile.php into the next div with class='resp'?
Yes I need to remove the id's

<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
    <script>
      
      $(document).on("click", "a", function(evt) {
     evt.preventDefault() ;
     var ID = "Wrap_" + $(this).attr('id');
     var link = encodeURI($(this).attr('href'));
     alert(link);
     $('#'+ ID).load(link);
});
    </script>
  </head>
  <body>
    <div>
      <a id="My Word" href="myfile.php?param=My Word">My Word</a>
      <div id='Wrap_My Word' class='resp'></div>
      <a id="MyWord" href="myfile.php?param=MyWord">MyWord</a>
      <div id='Wrap_MyWord' class='resp'></div>
      
    </div>
  </body>
</html>

Open in new window

Top Expert 2010

Commented:
I believe you may want to use an AJAX call for this, if I'm understanding your end goal.  You want to get a response from myfile.php and output that response on the current page, right?  Then AJAX would be the way to go.  Make an AJAX call to myfile.php, and in the success callback of the AJAX call, use jQuery to add the response payload to your current page.
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

Author

Commented:
Maybe I'm not explaining my intention

When you make an AJAX call the response needs to go some place usually an HTML element with a unique id
Because the way the HTML is being constructed the ID's may have a space in it eg <div id='Wrap_My Word'> which is invalid

Instead of loading the AJAX response into $('#Wrap_My Word').load(link); which fails due to the space

How do I locate the next  sibling, I think it's called,  <div class='resp'></div> this is immediately after the 'clicked' anchor
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
You can just use the next() method with the resp class name. Something like this should get you started:

$('a').click(function(e) {
    e.preventDefault();
    $(this).next('.resp').load( $(this).attr('href') );
});

Open in new window

Author

Commented:
Thannx Chris

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial