jquery to remove link from class

  • 1
  • Question
  • Updated 2 years ago
  • Answered
Need your help :)

I'm trying to remove the <a href linking on a div / class on a page that is a page includes. I'm having no luck with this syntax, am I way off? 



(function(skuid){
var $ = skuid.$; $(document.body).one('pageload',function(){ var myModel = skuid.model.getModel('MyModelId'); var myComponent = skuid.component.getById('MyComponentUniqueId'); $(".nx-field, nx-layout-above, a").each(function(){ if($(this).hasClass("nx-fieldtext")){ $(this).removeAttr("href"); }); })(skuid);
Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
Are you trying to make it so a user can't click on a Name field to navigate to that detail page?
Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
yes that is correct :)
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
OK - instead of doing a snippet, use a Template field (instead of model field) in your field editor.  Use triple braces instead of double and it will bring in the text of the name, and not an active hyperlink.  {{{Name}}} ... like that.  You have to have the Name field selected in your model, and the template needs to be related to the model for it to work.

Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
amazing, that's it! Thank you!
Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
After testing this out today, it would become a chore to tag a lot of fields and not to mention, the field isn't editable after this is applied. I think the jQuery route would be better for numerous fields requiring this. 

So, back to square one on this syntax :(

(function(skuid){
	var $ = skuid.$;
	$(document.body).one('pageload',function(){
		var myModel = skuid.model.getModel('MyModelId');
		var myComponent = skuid.component.getById('MyComponentUniqueId');
		        $(".nx-field, nx-layout-above, a").each(function(){
            if($(this).hasClass("nx-fieldtext")){
                $(this).removeAttr("href");
	});
})(skuid);
Photo of Gregory Smith

Gregory Smith, Employee

  • 304 Points 250 badge 2x thumb
How about something like:

skuid.$('.nx-fieldtext a').click(function(e){e.preventDefault()});
Photo of Gregory Smith

Gregory Smith, Employee

  • 304 Points 250 badge 2x thumb
Of course, you might also want to edit the css to avoid confusion:

.nx-fieldtext a, .nx-fieldtext a:hover{    color:inherit !important;
    text-decoration:none !important;
    cursor: text !important;
}

I would consider using a class for both the css and the js, so as to not affect every .nx-fieldtext a on the page, unless that is the intent.
Photo of Gregory Smith

Gregory Smith, Employee

  • 304 Points 250 badge 2x thumb
I would consider using a class for both the css and the js, so as to not affect every .nx-fieldtext a on the page, unless that is the intent.  You can add a classname, for instance, nolink to a field editor, a table, a wrapper etc. and any .nx-fieldtext a contained within will be affected: 
   skuid.$('.nolink .nx-fieldtext a').click(function(e){e.preventDefault()});
and
   .nolink .nx-fieldtext a, .nolink .nx-fieldtext a:hover{    color:inherit !important;
        text-decoration:none !important;
        cursor: text !important;
    }
(Edited)
Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
Thanks Greg! Between these two suggestions (@Chandra_V), I also used the theme builder to edit the link colors to match that of the body text to reduce program dependability within the syntax.