Ajax to assign src to Iframe Dynamically in MVC3

Question

Hi i am basically new to Ajax and having a tough time writing it..

I want to assign src value to Iframe which is fetched from the database
Table is HobbyMasters

 HobbyName
 HobbyUrl

I write a function and fetch the url from the table now when i click on Hobbyname which is displayed as link i want that url to be loaded inside the Iframe.

Initially i wrote a javascript:

<script type="text/javascript">
$(document).ready(function () {
    $('a').click(function (e) {
        e.preventDefault();
        $('iframe').attr('src', "Dancing");
    });
}); </script>

But here the src is static and through javascript i am not able to assign fetched value from databse to src attribute
So thought of writing Ajax..

I have tried something but it is incomplete.Please Help me with this:

 <script type="text/javascript">
$(document).ready(function () {          
$('a').click(function (e) {
          e.preventDefault();
        var filename = $(this).text();

        var Hobbyurl = '@Url.Action("FetchUrlByHobbyName")';
        $.ajax({
            type: "POST",
            url: Hobbyurl ,
            data: { data: filename },
            success: function (returndata) {
             Here i want to assign the fetched src from function FetchUrlByHobbyName to Iframe src
         $('iframe').attr('src', filename);
            }
        });
    });

Function inside the Controller:

 [HttpPost]
    public ActionResult FetchUrlByHobbyName(string Hobbyurl)
    {
        HobbyMasters hobbymaster = new HobbyHomeService().FetchHobbyMasterByHobbyName(Hobbyurl);

        string url=hobbymaster.InformationUrl;
        if (HttpContext.Request.IsAjaxRequest())
            return Json(new{src=url});
        return View();
    }

score 0 · Answer 1 · answered Apr 24 '12 at 07:45

0

If @Url.Action("FetchUrlByHobbyName") returns the url of the hobby , you can do

<script type="text/javascript">
$(document).ready(function () {          
$('a').click(function (e) {
          e.preventDefault();
        var filename = $(this).text();

        var Hobbyurl = '@Url.Action("FetchUrlByHobbyName")';
        $.ajax({
            type: "POST",
            url: Hobbyurl ,
            data: { data: filename },
            success: function (returndata) {
             Here i want to assign the fetched src from function FetchUrlByHobbyName to Iframe src
         $('iframe').attr('src', returndata);
            }
        });
    });

The best method would be to return the data associated with json and get the url from the json object

success: function (returndata) {
    jsonObj = jQuery.parseJSON( returndata)
    $('iframe').attr('src', jsonObj.url);
}

answered Apr 24 '12 at 07:45

Sethunath K M

4,702
3
28
42

Hi i am trying ur ajax function can u help me a little more i have written function FetchUrlByHobbyName() in my contrller and am able to fetch the record but i am not understanding how shal i return that fetched value to ajax. I have updated my question can u please see and help me. – user1274646 Apr 24 '12 at 08:43
Does this help you ? http://stackoverflow.com/questions/227624/asp-net-mvc-controller-actions-that-return-json-or-partial-html – Sethunath K M Apr 24 '12 at 09:07
i tried something see my updated question but it is giving an error that jsonObj.url is Null.Please tell me how shal i return the value – user1274646 Apr 24 '12 at 09:41
If you have firebug installed , please check the "Net" panel to see what the server returns – Sethunath K M Apr 24 '12 at 09:57
if i return like this: return Json(url); Then i get an Exception Error – user1274646 Apr 24 '12 at 10:37

Ajax to assign src to Iframe Dynamically in MVC3

1 Answers1