javascript not working dynamically created javascript alink

Question

This isnt working, not sure what is wrong. I dont want to use href onclick at all, i usually use an id on ahref links then execure javascript that way but i need to pass parameters from the link to the function, not sure if there are other alternatives?

code using the parameters isnt shown, its basiacly a forum link but its loading the topic into a div

function changetotopicdetails(topicid, topicname) {
    $('#loadingAjaxs').show();
    $('#flubestext').hide();

<a href="javascript:changetotopicdetails(@following.Id, @following.ShortName);">@following.Title</a>

I would usually do something like

$('#changeuserstwohour').click(function () {
       $('#userswrap').load('@Url.Action("TrendingUsersMenutwohr", "Trending")');
    });

but by doing so i cant send parameters to the function during a loop (list of topics)

any suggestions?

Answers pointed out that i need the variables passed to a new {}

$('#changeuserstwohour').click(function () {
       $('#userswrap').load('@Url.Action("TrendingUsersMenutwohr", "Trending", new {@theid = id, @thename = name})');
    });

blackeyebeefhorsefly · Accepted Answer · 2013-09-28 20:26:10Z

1

You could do your usual click function, eventListener or bind and use data values to indicate you username and trending values.

so your tag would look like

<a href="#" data-id='@following.Id' data-short-name='@following.ShortName'>@following.Title</a>

and then your usual click function which would look like

$('#changeuserstwohour').click(function () {
   $('#userswrap').load('@Url.Action($(this).data(id), $(this).data(short-name)');
});

you may need to use .each() if you have multiples or call it after each ajax load to make sure its listening to the new objects. I haven't tested this as I dont really have the functions but this should work! Please let me know how it goes and if you have another question :)

answered Sep 28, 2013 at 20:26

blackeyebeefhorsefly

1,9441 gold badge15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mxadam Over a year ago

hey i dont think this works for what I need, its great tho as didnt know this was possible. but the formatting of this may make it not work?

mxadam Over a year ago

getting unexpencted character $ $('#contentwrap').load('@Url.Action("Detail", "Topics", new {@id = $(this).data(id), @name = $(this).data(short-name)})', function () { $('#loadingAjaxs').hide(); $('#flubestext').show(); window.history.pushState(null, 'title', '/users'); })

blackeyebeefhorsefly Over a year ago

Hi, I think you may need to get rid of the first $? ;)

Tetsujin no Oni Over a year ago

You need to look at what you're doing here - you're mixing jquery syntax into razor markup. All of the razor code runs before the HTML is sent to the browser, so you cannot use a Url.Action helper and pass it jquery method results. For what you're doing in that comment, you'd simply call write $('#contentwrap').load('@Url.Action("Detail","Topics", new { id=CSharp_Variable_With_Id, name=CSharp_Variable_WithName})', function(){callbackStuffHere();}

Tetsujin no Oni · Accepted Answer · 2013-09-28 20:36:50Z

1

A combination of both techniques provided so far is what you're probably really after.

Your markup for your individual action links would look like:

 <a href="#" class="selectorForYourActions" data-id='@following.Id' data-short-name='@following.ShortName'>@following.Title</a>

and then your on-click callback which would look like

$('#idOfContainerYourLoopCreatesItemsWithin').on("click", "a.selectorForYourActions", function () {
   $('.userswrap').load('@Url.Action($(this).data(id), $(this).data(short-name)');
});

This will catch any dynamically created items that match that class if they are created within the element selected by the ID selector, but only handle clicks on anchor tags with the marker class, so you can both have many of those anchors with unique (or no) Ids and anchors with normal (or different) functionality.

answered Sep 28, 2013 at 20:36

Tetsujin no Oni

7,3652 gold badges31 silver badges46 bronze badges

6 Comments

blackeyebeefhorsefly Over a year ago

Thanks for copying my answer?

Tetsujin no Oni Over a year ago

I started by doing it as edits to your answer, then realized they were more than grammar alterations. You'll note that it's presenting the case using jquery.on, event bubbling, and limiting. That's more than an 'edit' worth of difference, IMO. If you prefer I'll just gut your answer to replace it with my version as an edit....

blackeyebeefhorsefly Over a year ago

Ok, no worries then, theres no need to 'gut' my answer.

Tetsujin no Oni Over a year ago

"Gut" might be overly strong a term, but it was going to involve a lot of edits that weren't the sorts of improvements usually covered by the usage of 'edit' was my point.

blackeyebeefhorsefly Over a year ago

That's okay, I'm sorry I jumped to conclusions. :)

|

Collectives™ on Stack Overflow

javascript not working dynamically created javascript alink

2 Answers 2

4 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related