angularjs ng-href doesn't work in ie8 - html

We are building a site which needs to work in IE8( be functional at least), and we got some links which doesn't work, common for all of them is that they use ng-href instead of href which works fine.
so this does not work:
<a ng-href="/User/Index/{{item.MetaData.Author.Id}}">{{item.MetaData.Author.FullName}}</a>
but this does work:
{{item.MetaData.Author.FullName}}
After angular has done is bindings the link looks like this:
<a class="ng-binding" href="/User/Index/15143" ng-href="/User/Index/15143" jQuery191021026375357298033="135">Niclas Schumacher <!-- IE fix --></a>
I asssume that it is angular adding the IE fix for IE8.
other things made which angular work fine, but its pretty crusial that the links will work!
anyone who has had this error, or knows how to fix it ?
OR is it so VERY crusial to have ng-href instead of href, when using angularjs ?
Hope you can help, thanks in advance!

Encountered a similar problem (from the question's text I'm not sure if it's the same). Either way, here's my problem and what got me working:
Problem:
Apparently there are problems when using href or ng-href [1] in IE8 (I am using 1.2.18 at this time) in which they don't get evaluated.
Example:
If angular finds a link without both name and a href, it adds it automatically, therefor, a code like:
<a ng-href="redirectTo()">link</a>
will end up as
link
and the redirect to baseUrl due to "" (the first page of the application) is performed upon click and the ng-href does not override the value in href.
The trick I used was to convert the link to an anchor (to not have to change depending code)
<a name="someRandomName" ng-click="redirectTo()">link</a>
and change the return statement of redirectTo() to do a redirect (either with window.location.href or $location.path, depending on the URL needed) instead of simply returning the URL.
[1] ngHref: https://docs.angularjs.org/api/ng/directive/ngHref

Related

Go to link within same webpage in Angular

I'm just starting angular and am able to display the homepage via the url: http://localhost:8002/app/#/home
Now, I want to use a name tag, to go to 'FAQ' section within the same page by using:
FAQ and <section id="faq">
However, this is not working. Can anyone please guide me here ?
You can also use $anchorScroll (better solution). You can see an sample and more details here. I don't test ng-href but i think it is bad solution.
You should write in the href attribute #/faq, with a slash.
and another issue, is using ng-href, as written in angular docs(https://docs.angularjs.org/api/ng/directive/ngHref):
Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.

FancyTree: Adding a custom icon by HTML?

I am using HTML to do the basic FancyTree initialization of a folder tree control and I was wondering if I could also specify a custom icon for these folders, i.e.,
<li id="xyz' class="folder" data-icon="myFolderIcon.gif">Folder Name
In the definition of my FancyTree control, I specify an imagePath:
$("#tree").fancytree({imagePath: "skin-win8/",
but all I see is an empty spot where my icon should appear, even though I placed my custom icon in the skin-win8 folder. What's the simplest way to add a custom icon or two to a FancyTree control? I'm both a FancyTree and CSS neophyte, in case you were wondering :)
Sheldon
That looks ok to me. Basically the same as in this demo:
http://wwwendt.de/tech/fancytree/demo/sample-theming.html
Maybe simply a typo in your markup:
<li id="xyz' class="folder" data-icon="myFolderIcon.gif">Folder Name
(should be id="xyz" instead of id="xyz')
Thanks again to mar10 to pointing me in the right direction, even though his thought that I had a typo in my markup was not the actual culprit. But by saying that he didn't see anything wrong and referring me back to his demo for custom node icons, it got me thinking that perhaps I too was also experiencing an imagePath issue, like this previous custom-node question
So I went back to my FancyTree download and got the custom-node example working on my server, then I moved the page and its dependencies around till I got something similar to my situation. Once I had that working, I was able to use the same approach within my actual page...
I happen to keep all my FancyTree-related files in a directory called fancytree within my application's web folder, so I added a subfolder called custom there and set my imagepath in the following manner:
imagePath: "fancytree/custom/",
Once I did that, I was able to use my custom icon either by including it in the HTML definition of the node or by setting it within the Javascript function I used to initialize certain aspects of my tree. Hope this helps some other custom-node newcomer...
Sheldon

Chrome parses the url incorrectly

This is how I am adding image tag under div
<img src='/files/images/remove.gif' border='0' " +
" onClick='function(\"" + url + "\");' />";
When I open my page in Firefox, everything works fine and here the HTML gets generated in FF
<div class="myclass"><img border="0" onclick="myfunction("http://127.0.0.1:8080/abc/attachments/1d28bc6b-f637-426f-8bca-e27f1c6f2ed9/debug.txt");" src="/files/images/remove.gif">
</div>
But in Chrome HTML gets generated like this
<div class="myclass"><img src="/files/images/remove.gif" border="0" onclick="myfunction(" http:="" 127.0.0.1:8080="" abc="" attachments="" 1d28bc6b-f637-426f-8bca-e27f1c6f2ed9="" debug.txt");"="">
</div>
See the url it add extra quotes and = sign.
Can anyone please help me to understand what's wrong here, any workaround/solution for this problem?
Thanks.
Well, at first, it looks like a bug in your script that emits the contents of the onclick. But then, it'd show up also in other browsers..
However, let's try from this view and assume it is a bug in your code, not Chrome.
Is the onclick generated by JS code, or on the server? If on JS, then please show us the code that generated and set that onclick handler, just to be sure it is correct.
OTOH, if it is generated on the server (ie. PHP, ASP, Ruby, ..), then have you tried peeking what exactly is sent over the wire? Open Chrome's DeveloperTools, go to "network" and refresh the page. Then watch the 'responses' and check if the HTML code embedded in them is correct. If it is incorrect, then look for a bug in the serverside scripts. If HTML seen in responses is correct, then indeed it is the browser.
If this is the latter case - the fact that HTMLInspector shows you the tag/link as damaged, it does not mean it has to malfunction. The Inspector is only a software too, so it may have some bugs in parsing/displaying - but the HTML tag may be correct and work properly. I've seen similar mis-displays a couple of times with various URLs before, but the links always worked properly. Try opening the ChromeConsole and $jquerying the URL out of that onclick. It might happen that you'll get the correct result - in that case, that's just presentation bug and the click/link should work properly - so ignore it or report to Google as a bug. Were the obtained URL incorrect, I'd double- or triplecheck the HTML in Network/Response to ensure that it really really as properly formatted, and then I'd call it a bug and try to work it around - i.e. by setting it via JS in onload, etc..
You are using some server infrastructure in between that is not pure HTML or JS, so we can't help properly. You have onClick (looks like .net), +" " + in the middle, which is not pure HTML.
I created a replication here: http://jsbin.com/ubacak/latest Note, I changed your code and just had it as pure js + html and all is fine.

Meaning of "#" when it is used like this href="#"

I have been following this tutorial to learn how to use Scrapy. I am using greenbook as my sample site to test out the web scraping. One of the function: SgmlLinkExtractor takes in a parameter which is the href of the "next" page button . The problem is that for greenbook , the href for the "next" page button is a "#" if you inspect the element via firefox
These are my questions
1) What does "#" mean when used in this way : href="#"
2) How do i solve this issue
Thanks
You can use # to point to an ID on the page rather than redirect to a URL.
When you see stuff like "Click here to scroll to the bottom of the page`
The here href will be #bottomOfPage
http://jsfiddle.net/2q3NJ/
The attribute href="#" means the same as href="", i.e. a reference to the start of the current document. It is seldom used with the intention of linking to the start, however. Instead, it is used a placeholder that makes the a element formally a link, and also a link from styling point of view, but in a context where the element is expected to have an onclick event handler or to have its href value overwritten.
Cf. to Is an empty href valid? and Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
In your case, it sounds like the software you are using generates next page “links” that are not real links but driven by JavaScript and carrying href="#" as a placeholder only. This does not work with other software that expects href attributes to be real. It depends on both pieces of software whether and how you can make them work together.

Can a plain HTML link (A) reload a page without query string values

I want to essentially reload the page I'm on without some of the query strings which might be present (thus changing content on the page). I've found that leaving the href tag empty like so href="" works, but I wonder if this a safe method, ie. does it work in older browsers?
Edit:
In fact scrap that, leaving it blank doesn't work (some great testing by me there). So, I guess my question now is, how can I reload the same page without any query string values? And without knowing the file name and without using Javascript. I guess I'm looking for something like / or #.
I think I know a trick. When you use a <form> tag with empty action and no (or GET) method parameter it will use your url but will replace the GET parameters (query string) with the values in your form, so:
On page http://example.com/foo.html?query=string
<form action="">
<input type="submit" value="hello" />
</form>
If you click on the button you will get to:
http://example.com/foo.html (Firefox 8)
http://example.com/foo.html (Internet Explorer 9)
http://example.com/foo.html? (Chrome 15)
http://example.com/foo.html? (Safari 5)
Edit: the trailing question mark is likely a Webkit issue.
There is an interesting post about empty URLs. It refers to RFC 3986, which defines URLs.
Basically, from a spec point of view you should be save, in that href="" references the current page.
I assume that all browsers adhere to this, but this is just an educated guess. The HTML5 spec also allows empty URLs.
Edit: To meet the updated question, (almost) removing the query string can be done with href="?".
Empty href is an empty relative uri which should be resolved to base uri without problems.
Yes, you can try this: href="#".