asp.net mvc and jquery loading a page

Question

I developed a plugin architecture application. Each time a plugin is added, a link is added to the main MVC app using jquery, the script is loaded dynamically from a js file in the plugin (DLL) and that link will be the entry point to the new module, the script successfully adds the link to the razor page but when I click on the link it does not work.

Here is the code.

Ps: I am not really good at javascript so forgive me if am making a stupid mistake in my code and couldn't find the solution.

$(document).ready(function () {

    $("#myLinkDiv").append('<a id="aLink" href="#">ClickMe</a>');

    $("#aLink").click(function () {
        event.preventDefault();
        $.ajax({
            url: '/Candidate/CreateCandidate/',
            type: 'GET',
            success: function (data) {
                return data;
            }
        });
    });
});

Shyju · Accepted Answer · 2017-02-25 18:00:45Z

1

Looks like you are dynamically injecting the new link element(a tag) to the DOM. In that case, you need to register the click event after injecting the element to DOM Or use the jquery on method to register event handlers which works with current and future DOM elements(dynamically injected after the DOM is rendered).

$(function(){

   $(document).on("click","#aLink",function (e) {
      e.preventDefault();
      alert("Going to make ajax call now");
      //your code to make ajax call
   });

});

It might be a good idea to narrow down the jQuery selector on which you are registering the event handlers. For example, If you know you are adding the link to the id "myLinkDiv", You may replace the jQuery selector to that.

$("#myLinkDiv").on("click","#aLink",function (e) {

});

Here is a working sample. http://jsbin.com/zuciwoloba/edit?html,js,output

I am also a little confused with your ajax code. In the success handler you are having a return statement, which does not makes sense. Usually you want to update the DOM / show a message to user when the ajax call is successful.

$.ajax({
    url: '/Candidate/CreateCandidate/',
    type: 'GET'
}).done(function(res){
    alert("Success.Check browser console for server response");
    console.log(res);
}).fail(function(){
    alert("Failed.Check browser network tab for server response");
    console.log(res);
});

edited Feb 25, 2017 at 18:00

answered Feb 25, 2017 at 17:41

Shyju

220k106 gold badges420 silver badges499 bronze badges

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

2 Comments

Haytham Over a year ago

Yes thank you , i saw it , am getting the success message but am not redirected to the page.the status of the response is 200 but i do not get redirected to the page.

Shyju Over a year ago

If you want to redirect you can do this window.location.href="yourNewUrl";., But if you are trying to redirect, what is the point of the ajax call ? You can do a normal form submit and return a RedirectToActionResult from server.

Vishal Kumar Sahu · Accepted Answer · 2017-02-25 17:42:15Z

0

To introduce an element after creation of DOM you need to bind event listener to newly introduced element - Please do something like this... (You missed to pass event)

$(document).on('click',"#aLink",function (event) {

instead of $("#aLink").click(function () {

answered Feb 25, 2017 at 17:42

Vishal Kumar Sahu

1,4843 gold badges18 silver badges29 bronze badges

2 Comments

Haytham Over a year ago

Thank you for replying I modified the code like you and Shyju suggested , now the alert appears that means the event is fired but the call to the server is not working and i do not get the page that i want , there is a mistake in the jquery code??.

Vishal Kumar Sahu Over a year ago

That is different issue... @Shyju deserves a +1 as he helped you to remove the main flaw in your code.

Collectives™ on Stack Overflow

asp.net mvc and jquery loading a page

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related