problem when using href=

7 Posts

xputris Reply #1, 14 years, 9 months ago

I am having trouble with javascript:void(0) when using IE on my MODX site

The website URL is: http://gerritygroup.com.s136675.gridserver.com/properties/felicita-town-center.html

When you click on the map link it should open up the map on the same page but instead it shows an empty white box. For whatever reason it wont open the embed map code when using javascript:void(0) in my href tag. If I use href="#" MODX doesnt recognize this and tries to open up a new page rather then the map itself..

It seems to work in Firefox, Safari and Chrome.

Any help would be much appreciated

☆ A M B ☆
2,475 Posts

Everett Reply #2, 14 years, 9 months ago

I doubt this has anything to do with MODX... try viewing the source of your page and saving the static version as a straight HTML file. If the problem recurs on the static HTML page, then you know it's got nothing to do with MODX.

I've noticed inconsistent behavior amongst the browsers when it comes to this very issue. It's probably one of those cases where IE is WYSIWTF if you follow my drift.

Hosting stuff: http://fireproofsocks.com/
Coding stuff: http://craftsmancoding.com/
Blog stuff: http://tipsfor.us/

7 Posts

xputris Reply #3, 14 years, 9 months ago

Thanks Everettg_99,

It did actually work as a static page but for whatever reason using href="#" within MODX caused a little hick up in all browsers. MODX wanted to open up that "#" as a new page each time. I did however do some research and ended up finding this script which seems to work in IE9, I'll test it in the other browsers shortly.

<a href="javascript: return false;">

Thank you again for your response..

☆ A M B ☆
2,475 Posts

Everett Reply #4, 14 years, 9 months ago

Interesting. Do you have friendly URLs enabled? I've sometimes used :

<a href="">

to bypass this...

Glad you found a solution.

Hosting stuff: http://fireproofsocks.com/
Coding stuff: http://craftsmancoding.com/
Blog stuff: http://tipsfor.us/

156 Posts

smooth-graphics Reply #5, 14 years, 9 months ago

This is because you need the base href tag in MODX sites. If you do so, a short href="#xyz" will be broken. You have to work around that by submitting the whole path: <a href="[ [+ +base_url]]#xyz" in MODX sites.

//sorry: modx path had been parsed wink

[ed. note: smooth-graphics last edited this post 14 years, 8 months ago.]

☆ A M B ☆
2,475 Posts

Everett Reply #6, 14 years, 9 months ago

Good point smooth-g. I always add the base tag in my templates... that actually has more to do with Apache rewrite rules than anything else.

Hosting stuff: http://fireproofsocks.com/
Coding stuff: http://craftsmancoding.com/
Blog stuff: http://tipsfor.us/

24,544 Posts

BobRay Reply #7, 14 years, 9 months ago

If the tag is in this form, I think it should work (assuming that the base href tag is correct):

Revolution:

<a href=="[[~[[*id]]]]#>

Evolution:

<a href=="[~[*id*]~]#>

[ed. note: BobRay last edited this post 14 years, 8 months ago.]

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

70 Posts

jentree Reply #8, 14 years, 8 months ago

Another option would be to use some javascript (jquery in this example). If your anchor has a class or unique id you could do something like:

$('.myclass').click(function(e)
{
    e.preventDefault();

    // do something else
});

7 Posts

xputris Reply #9, 14 years, 8 months ago

Thank you Jentree,

I am going to gibe that a try as well

Happy New Year!

953 Posts

iusemodx Reply #10, 14 years, 8 months ago

I have been using this plugin: Web Root Relative Hrefs for ages - works perfectly.

You dont need to use the BASE HREF at all when using the plugin.

I have a slightly modified version which can be used if anyone is interested:

<?php
$webroot = '/';
$e = &$modx->event;
if ($e->name == 'OnWebPagePrerender') {
	$o = &$modx->documentOutput;
	$o = preg_replace('%href="(?!http)(?!/)(?!#)(?!javascript:)(?!{\$)(?!ftp:)(?!&#)(?!mailto)%i','href="'.$webroot,$o);
	$o = preg_replace('%src="(?!http)(?!/)(?!#)(?!ftp:)(?!mailto)%i','src="'.$webroot,$o);
	$o = preg_replace('%@import "(?!http)(?!/)(?!#)(?!ftp:)(?!mailto)%i','@import "'.$webroot,$o);
	$o = preg_replace('%action="(?!http)(?!/)(?!#)(?!ftp:)(?!mailto)%i','action="'.$webroot,$o);
}
$e->output($o);
?>

The only drawback that I have had is when using inline CSS, using background images - but again easy to solve by adding

[(base_url)]

in the images source path e.g

style="background-image:url([(base_url)]assets/images/myimage.jpg)"

Cheers [ed. note: iusemodx last edited this post 14 years, 8 months ago.]

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

problem when using href="#" tag