none
Opening a link in a modal dialog window RRS feed

  • Question

  • hello ,

    I have created a share point webpart using c# code ( with no aspx file ). and i have a line in with i have added a link and i would like that the link should be opened in a modal dialog window like in sharePoint.

    my code is :

     str2 = string.Concat(new object[] { obj2, "<p>", this.FirstWords(this.StripTagsCharArray(item[this.BodyField].ToString()), Convert.ToInt32(this.NumWords)), "... <br/><a href=\"",web.Url, "/Lists/", this.Text, "/DispForm.aspx?ID=", item.ID, "\" > read more</a></p></div></div></div>" });

    I have referenced the function that open url in modal dialog window like this : 

    string str = "<script type=\"text/javascript\">function OpenDialog(URL) {var options = SP.UI.$create_DialogOptions();"+" options.url = URL; options.width = 600; options.height = 400; SP.UI.ModalDialog.showModalDialog(options);}</script>"

    I would like to call my function in the href attribute of my link "red more" but i get syntax error because of special characters.

    How to call this function correctly ?

    Thanks.

    Monday, July 15, 2013 1:02 PM

Answers

  • Hello!

    To create dialog options you needn't use SP.UI.$create_DialogOptions(), it's enough to use something like

    var opt = {url: url, autoSize: true, dialogReturnValueCallback: function(res, retVal) { alert('hello'); }};

    So, I use the following html code for link that must be opened in the modal dialog

    <a target="_blank" onclick="javascript:this.href = unescapeProperly(escape(this.href)); (function (url) {var opt = {url: url, autoSize: true, dialogReturnValueCallback: function(res, retVal) { if (res === SP.UI.DialogResult.OK) { /*do something useful*/ } }}; SP.UI.ModalDialog.showModalDialog(opt);})(this.href); return false;"
                        href="/_layouts/MySite/MyPage.aspx?ID=<%# Eval("ID") %>">
     Some Link
    </a>



    .Net Follower (http://dotnetfollower.com)

    Monday, July 22, 2013 9:01 PM
  • One way is to add a label control to the webparts controls, then add the <a> tag to the labels text property. You can get the display from url from the list.

    E.g.

    private Label readMore;
    
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        readMore = new Label();
        Controls.Add(readMore);
    }
    
    
    protected override void OnPreRender(EventArgs e)
    {
    	base.OnPreRender(e);
    	SPList list = SPContext.Current.Web.Lists.TryGetList("Mylist");
    	if (list == null) return;            
    	SPListItem item = list.Items[0];
    	var url = String.Format("{0}?ID={1}", list.DefaultDisplayFormUrl, item.ID);
    	readMore.Text = String.Format("<a onclick=\"javascript:SP.UI.ModalDialog.OpenPopUpPage('{0}',null,600,400);return false;\" href=\"#blank\">Read more...</a>",url);
    }


    Regards, Matthew
    MCPD | MCITP
    My Blog
    Please remember to click "Mark As Answer" if a post solves your problem or "Vote As Helpful" if it was useful.

    I just added a webpart to the TechNet Gallery that allows administrative users to upload, crop and format user profile photos. Check it out here: Upload and Crop User Profile Photos

    Monday, July 15, 2013 2:40 PM

All replies

  • Hi Lamine,

    You can use the onclick event of the anchor tag with the SP.UI.ModalDialog.OpenPopUpPage without having to create options. It might be more straight forward. Return false so that the browser doesn't navigate to the url in the href property of the anchor tag:

    <a onclick="javascript:SP.UI.ModalDialog.OpenPopUpPage(url,callbackFunction,width,height);return false;" href="">read more</a>
    The MSDN documentation for OpenPopUpPage is here: http://msdn.microsoft.com/en-us/library/ff410825(v=office.14).aspx


    Regards, Matthew
    MCPD | MCITP
    My Blog
    Please remember to click "Mark As Answer" if a post solves your problem or "Vote As Helpful" if it was useful.

    I just added a webpart to the TechNet Gallery that allows administrative users to upload, crop and format user profile photos. Check it out here: Upload and Crop User Profile Photos


    • Edited by Matthew Yarlett Monday, July 15, 2013 1:20 PM Added a link to the MSDN documentation
    Monday, July 15, 2013 1:20 PM
  • hi matthew ,


    i have mentionned that i get syntax error when adding attritube href that call a javascript function and i get the same error when trying your solution.

    my problem is syntax because  i have coded all in c# so we have to code all in a string variable.

    how to write your code correctly using a string variable without forgotting the " " and the "/" ? 

    thanks.


    • Edited by PiingPoint Monday, July 15, 2013 1:52 PM aaaaaaaaaaaaaaa
    Monday, July 15, 2013 1:51 PM
  • One way is to add a label control to the webparts controls, then add the <a> tag to the labels text property. You can get the display from url from the list.

    E.g.

    private Label readMore;
    
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        readMore = new Label();
        Controls.Add(readMore);
    }
    
    
    protected override void OnPreRender(EventArgs e)
    {
    	base.OnPreRender(e);
    	SPList list = SPContext.Current.Web.Lists.TryGetList("Mylist");
    	if (list == null) return;            
    	SPListItem item = list.Items[0];
    	var url = String.Format("{0}?ID={1}", list.DefaultDisplayFormUrl, item.ID);
    	readMore.Text = String.Format("<a onclick=\"javascript:SP.UI.ModalDialog.OpenPopUpPage('{0}',null,600,400);return false;\" href=\"#blank\">Read more...</a>",url);
    }


    Regards, Matthew
    MCPD | MCITP
    My Blog
    Please remember to click "Mark As Answer" if a post solves your problem or "Vote As Helpful" if it was useful.

    I just added a webpart to the TechNet Gallery that allows administrative users to upload, crop and format user profile photos. Check it out here: Upload and Crop User Profile Photos

    Monday, July 15, 2013 2:40 PM
  • Hi Matthew ,

    it dont work for me.

    I have first referenced the sharepoint javascript libraries sp.core.js , sp.js and SP.UI.Dialog.js in a string variable with my CSS styles sheet.

    Then i have added a onclick event on my <a> tag and set the href attribute to # like you have mentioned in your code.

    When i click on the my link nothing happen and i dont see my sharepoint popup.

    Javascript is activated in my IE navigator and all thing seem to be Ok.

    How to get rid of this error;

    This is my code in one line :

                                       

    string url = web.Url + "/Lists/" + this.Text + "/DispForm.aspx?ID=" + item.ID;

    str2 = string.Concat(new object[] { obj2, "<p>", this.FirstWords(this.StripTagsCharArray(item[this.BodyField].ToString()),Convert.ToInt32(this.NumWords)), "... <br/><a onclick=\"javascript:SP.UI.ModalDialog.OpenPopUpPage(url,null,600,400);return false;\"  href=\"#\">Lire l'article</a></p></div></li>" });

    Thanks.

    Thursday, July 18, 2013 11:59 AM
  • Hi Lamaine,

    You don't need to reference sp.js and sp.ui.dialog.js in your webpart. These will already be loaded by the masterpage.

    Have you used the Internet Explorer developer tools (F12) to see if there is a JavaScript error happening when you click on the link?


    Regards, Matthew
    MCPD | MCITP
    My Blog
    Please remember to click "Mark As Answer" if a post solves your problem or "Vote As Helpful" if it was useful.

    I just added a webpart to the TechNet Gallery that allows administrative users to upload, crop and format user profile photos. Check it out here: Upload and Crop User Profile Photos

    Friday, July 19, 2013 12:58 PM
  • hi matthew ,

    after using F12 in IE , i have noticed a javascript error " URL is indefined " when clicking on my <a> tag.

    my url seem to be ok as  i mentionned in last reply. a solution for this ?

    Thank you.

    Saturday, July 20, 2013 4:27 PM
  • Hi Lamine,

    The url needs to be in quotes, because it's a string being passed to the function. Try this:

    string url = web.Url + "/Lists/" + this.Text + "/DispForm.aspx?ID=" + item.ID;
    
    str2 = string.Concat(new object[] { obj2, "<p>", this.FirstWords(this.StripTagsCharArray(item[this.BodyField].ToString()),Convert.ToInt32(this.NumWords)), "... <br/><a onclick=\"javascript:SP.UI.ModalDialog.OpenPopUpPage('url',null,600,400);return false;\"  href=\"#\">Lire l'article</a></p></div></li>" });


    Regards, Matthew
    MCPD | MCITP
    My Blog
    Please remember to click "Mark As Answer" if a post solves your problem or "Vote As Helpful" if it was useful.

    I just added a webpart to the TechNet Gallery that allows administrative users to upload, crop and format user profile photos. Check it out here: Upload and Crop User Profile Photos

    Saturday, July 20, 2013 8:22 PM
  • Hi Matthew ,

    Now , i have my popup dialog window but nothing in it ( error HTTP 404 : NOT FOUND). I don't see my page opening in the popup window.

    as you see , my code is OK and the url is OK it's  the url of the displayform of my item.

    Any help will be apprecieted.

    Thank you matthew





    • Edited by PiingPoint Monday, July 22, 2013 9:24 AM dddddddddddd
    Monday, July 22, 2013 8:55 AM
  • HTTP 404 is a file not found message. Can you try using the following code to set the URL of the items display form:

    var url = String.Format("{0}{1}?ID={2}", list.ParentWeb.Url, list.DefaultDisplayFormUrl, item.ID);

    Regards, Matthew
    MCPD | MCITP
    My Blog
    Please remember to click "Mark As Answer" if a post solves your problem or "Vote As Helpful" if it was useful.

    I just added a webpart to the TechNet Gallery that allows administrative users to upload, crop and format user profile photos. Check it out here: Upload and Crop User Profile Photos

    Monday, July 22, 2013 10:49 AM
  • Matthew ,

    i get the same error  404 NOT FOUND when trying your code.

    a solution for my popup ?

    Thanks

    Monday, July 22, 2013 11:34 AM
  • Have you used the Internet Explorer developer tools (F12) to inspect the html output to the page? Double check the URL is correct.

    Regards, Matthew
    MCPD | MCITP
    My Blog
    Please remember to click "Mark As Answer" if a post solves your problem or "Vote As Helpful" if it was useful.

    I just added a webpart to the TechNet Gallery that allows administrative users to upload, crop and format user profile photos. Check it out here: Upload and Crop User Profile Photos

    Monday, July 22, 2013 12:15 PM
  • Hello!

    To create dialog options you needn't use SP.UI.$create_DialogOptions(), it's enough to use something like

    var opt = {url: url, autoSize: true, dialogReturnValueCallback: function(res, retVal) { alert('hello'); }};

    So, I use the following html code for link that must be opened in the modal dialog

    <a target="_blank" onclick="javascript:this.href = unescapeProperly(escape(this.href)); (function (url) {var opt = {url: url, autoSize: true, dialogReturnValueCallback: function(res, retVal) { if (res === SP.UI.DialogResult.OK) { /*do something useful*/ } }}; SP.UI.ModalDialog.showModalDialog(opt);})(this.href); return false;"
                        href="/_layouts/MySite/MyPage.aspx?ID=<%# Eval("ID") %>">
     Some Link
    </a>



    .Net Follower (http://dotnetfollower.com)

    Monday, July 22, 2013 9:01 PM