jQuery: encodeURI with a space

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

LVL 1
trevor1940Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

zephyr_hex (Megan)DeveloperCommented:
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.
0
trevor1940Author 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

0
zephyr_hex (Megan)DeveloperCommented:
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.
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

trevor1940Author 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
0
Chris StanyonWebDevCommented:
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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
trevor1940Author Commented:
Thannx Chris
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.