locked
Passing a query string parameter to a newform.aspx modal dialog RRS feed

  • Question

  • I have a page with a few Web Parts, one of which is a List View Web Part.  This page has a query string parameter 'FilterValue1' that is populated with a Vendor ID.  I am trying to pass that parameter to the newform.aspx modal dialog that pops up when a user clicks "add new item" on the List View Web Part.   I am using a bit of jQuery and SPServices to do this.

        //Gets the supplierID from the URL and adds it to the Add new item link
        var queryStringVals = $().SPServices.SPGetQueryString();
        var supplierID = queryStringVals["FilterValue1"];
    		
        $('#WebPartWPQ10 #idHomePageNewItem').attr('href', function (i, val) {
    	return val + "&SupplierID=" + supplierID;
    	});
    	
    	var href = $('#WebPartWPQ10 #idHomePageNewItem').attr('href');
    	$('#WebPartWPQ10 #idHomePageNewItem').attr('onclick', function () {
    		return 'javascript:NewItem2(event, "' +  href + '");javascript:return false;';
    	});

    The 'Add new item" link does show the SupplierID parameter in both the href and onclick attributes.  However the value does not seem to pass to newform.aspx modal dialog.  When I debug my application, I see two query string parameters, IsDlg=1 & RootFolder=     {null}

    I also tried removing the blank RootFolder parameter and moving the SupplierID parameter to the beginning of the list of parameters like so:

    $('#WebPartWPQ10 #idHomePageNewItem').attr('href', function () {

    return "http://[My Server]/[My Site]/_layouts/listform.aspx?SupplierID=" + supplierID + "&PageType=8&ListId={GUID}"; });


    When I debug the application with this code, the only query string parameter I see is 'IsDlg=1'   The RootFolder is gone like I expected it to be but my SupplierID parameter is still missing. Any ideas on how I can get the supplierID to show up in the query string parameters of the newform.aspx page (modal)?


    James Grizzle
    ---
    http://www.linkedin.com/in/jamesgrizzle

    Thursday, May 17, 2012 9:33 PM

Answers

  • Hi CapnGrizzle,

    The cause of this issue is that when you call url like: /siteurl/_layouts/listform.aspx?PageType=6/8&, it will call Microsoft.SharePoint.ApplicationPages.ListFormRedirect, the method will accept the expected parameter, and do redirection, you can check the listform.aspx page content at: 14/TEMPLATE/Layouts/ folder.

    As Prashant said, please try to redirect to NewForm/EditForm page directly instead of through listform.aspx page with your parameters. This will solve the issue.

    Thanks,
    Qiao


    Qiao Wei

    TechNet Community Support

    • Marked as answer by CapnGrizzle Thursday, May 24, 2012 3:13 PM
    Tuesday, May 22, 2012 9:06 AM
  • Since this has so many views, I thought I should post the full solution.  This uses jQuery and SPServices.

    This goes on the initial page:

    <script type="text/javascript">    
    //Gets the supplierID from the URL and adds it to the Add new item link     
    $(document).ready(function() { 

    //Gets the supplierID from the URL var queryStringVals = $().SPServices.SPGetQueryString(); var supplierID = queryStringVals["FilterValue1"]; //replaces the onlick attribute of the add new item link with a NewForm.aspx and my query string variable var incidentHrefandSupplierID = "http://sp2010/sites/MySite/Lists/MyList/NewForm.aspx?SupplierID=" + supplierID; //console.log(incidentHrefandSupplierID); $('#WebPartWPQ10 #idHomePageNewItem').attr('href', '#'); $('#WebPartWPQ10 #idHomePageNewItem').attr('onclick', function () { return "javascript:showDialog('" + incidentHrefandSupplierID + "');" //console.log(this.onclick); });

    });

    //this lives outside of the document.ready function
    function showDialog(URL) {

    var options = {
    title: "New Item",
    width: 800,
    height: 600,
    url: URL
    };
    SP.UI.ModalDialog.showModalDialog(options);

    }

    </script>

    And then I used this script on the Newform.aspx page to populate a lookup column.  The SPComplexToSimpleDropdown function was used so that i could use the same solution for Firefox/IE. 

    <script type="text/javascript">     
    //Gets the supplierID from the URL and adds it to the Add new item link      
    $(document).ready(function() {          
    var queryStringVals = $().SPServices.SPGetQueryString();         
    var supplierID = queryStringVals["SupplierID"];         
    //console.log(supplierID);
              $().SPServices.SPComplexToSimpleDropdown({             
    columnName: "SupplierID",         
    }); 
             
    //like :contains but matches the text exactly
    $.expr[':'].textEquals = function(a, i, m) {             
        return $(a).text().match("^" + m[3] + "$");         
    };          
    var selectedSupplierID = $("option:textEquals('" + supplierID + "')").val();         
    $("select[title=SupplierID]").val(selectedSupplierID);         
    $("select[title=SupplierID]").change();       
    });   
    </script> 


    James Grizzle
    ---
    http://www.linkedin.com/in/jamesgrizzle







    • Marked as answer by CapnGrizzle Tuesday, July 24, 2012 8:12 PM
    • Edited by CapnGrizzle Tuesday, July 31, 2012 1:05 PM
    Tuesday, July 24, 2012 8:08 PM

All replies

  • Hey,

    As per my understanding,you have created a List View Web part and when any one click on any item you are appending certain parameters(QueryString) to the url.

    why you are using SPServices and JQuery to acheive it.

    When you can easily achieve it through C#.

    Maintain a string which will append your query string parameters in the C# code and just pass the parameters to the modal dialog.


    "The Only Way To Get Smarter Is By Playing A Smarter Opponent"

    Friday, May 18, 2012 10:40 AM
  • Thank you for your reply!  The only time the query string would need to be passed is once a user clicks the "Add new item" link. 

    I chose jQuery / SPServices because of my experience with the tools, I am already using both on the page for other solutions, and because I did not believe the solution would be very complex if I used jQuery / SPServices.  It seems I may have been a little incorrect on that last assumption....

    Please let me know if I correctly understand your proposal.  Your suggestion is to create an event receiver that checks the URL for query string parameters once a user clicks the 'Add new item" link? 

    Unfortunately, the query string never makes it to the newform.aspx modal dialog, so adding an event receiver to the list that checks for the query string on item adding would not help me in this situation.  I have taken a query string from the page and added to both the href and onclick attributes of the 'Add new item" link.  Unfortunately, once a user clicks the 'Add new item' link, the modal dialog does not retain the query string parameter.  The onlick and href attributes point to this link:  http://[My Server]/[My Site]/_layouts/listform.aspx?PageType=8&ListId={GUID}&RootFolder=&SupplierID={My query string parameter} but when I inspect the page using the IE developer tools, I can see that the newform.aspx page that opens in the modal does not have my query string parameter.


    James Grizzle
    ---
    http://www.linkedin.com/in/jamesgrizzle

    Friday, May 18, 2012 2:05 PM
  • Hi,

    I had the same requirement and I am also opening a page in SP modal dialog box with a query string parameter. But this dialog box is opened on click on a custom button created in SP ribbon. But i believe you can use this code.

    CommandAction

    ="javascript:

                          var web;var context;var dialog;

                          SP.SOD.executeOrDelayUntilScriptLoaded(Associations, 'SP.js');

                          function Associations(){

                         

                          var _html = document.createElement('span');

                          _html.style['margin'] = '5px';

                          _html.innerHTML = '

    &lt;img src=&quot;/_layouts/images/loading16.gif&quot;/&gt;Please wait while the content loads...';

                          var options = { html: _html, title: 'Loading..' };

                          dialog = SP.UI.ModalDialog.showModalDialog(options);



                              context = SP.ClientContext.get_current();

                              web = context.get_web();

                              context.load(web);

                              context.executeQueryAsync(Function.createDelegate(this, OpenAssociations), Function.createDelegate(this, OpenAssociationsStatic));}

                           

                            function OpenAssociations(){

                              var items = SP.ListOperation.Selection.getSelectedItems(context);

                              var selecteditems = '';

                              for (var item in items)

                                  selecteditems = selecteditems + items[item].id + '|';

                              var PageUrl = web.get_serverRelativeUrl() + '/Pages/custompage.aspx?Cards=' + selecteditems;

                              var options = {url : PageUrl, title : 'Custom Page', width: 800, height : 600};

                              if (dialog!= null)

                                dialog.close();

                              SP.UI.ModalDialog.showModalDialog(options);}

                             

                            function OpenAssociationsStatic() {if (dialog!= null) dialog.close();}

                           

    "


             

    EnabledScript="javascript:

                        function enableViewAssociations()

                               {

                                 var items = SP.ListOperation.Selection.getSelectedItems();

                                 return (items.length > 0);

                               }

                               enableViewAssociations();

    ">


    -Prashant

    Friday, May 18, 2012 2:28 PM
  • Thanks for your reply!  It seems you are loading a page in the modal dialog and populating the query string with the selected items.  That is a cool solution but unfortunately doesn't get me any closer to passing the query string parameters specifically to the newform.aspx modal....

    James Grizzle
    ---
    http://www.linkedin.com/in/jamesgrizzle

    Friday, May 18, 2012 3:06 PM
  • I can't be the only person who has ever wanted to pass a value to a newform.aspx modal...

    James Grizzle
    ---
    http://www.linkedin.com/in/jamesgrizzle

    Sunday, May 20, 2012 3:21 PM
  • Can you try something like this...I have not tried it at my end

    web.Url + "/Lists/Projects%20List/Ne

    wForm.aspx?RootFolder=" + web.ServerRelativeUrl + "%2FLists%2FProjects%20List&Source="+ web.Url  + "?variable1= " + Server.UrlEncode(var1) + "&variable2=" + Server.UrlEncode(var2);


    -Prashant

    Monday, May 21, 2012 8:03 AM
  • Hi CapnGrizzle,

    The cause of this issue is that when you call url like: /siteurl/_layouts/listform.aspx?PageType=6/8&, it will call Microsoft.SharePoint.ApplicationPages.ListFormRedirect, the method will accept the expected parameter, and do redirection, you can check the listform.aspx page content at: 14/TEMPLATE/Layouts/ folder.

    As Prashant said, please try to redirect to NewForm/EditForm page directly instead of through listform.aspx page with your parameters. This will solve the issue.

    Thanks,
    Qiao


    Qiao Wei

    TechNet Community Support

    • Marked as answer by CapnGrizzle Thursday, May 24, 2012 3:13 PM
    Tuesday, May 22, 2012 9:06 AM

  • In a Content Editor in the page containing the List

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script><script type="text/javascript">

    function showModal(){
    SP.UI.ModalDialog.showModalDialog({

      url: "/subSite/Lists/Announcements/NewForm.aspx?IsDlg=1&System=Site-1",

      title: "Create New Item",

      dialogReturnValueCallback: function() {

      window.location = window.location.href;

       }

    });
    }

    $(document).ready(function () {

    $("#idHomePageNewAnnouncement").attr('href', 'javascript:showModal()');
    $("#idHomePageNewAnnouncement").attr('onclick', 'javascript:showModal()');


    });</script>


    ****************************************************

    In a Content Editor in the NewForm.aspx page, set Parameter 'System' to a dropdown Choice

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script><script type="text/javascript">

    function getParameterByName(name) {
       
        var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
                        
        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    }

    var system = getParameterByName('System');

    $(document).ready(function(){

         $('#DropDownChoice option[value='+system+']').attr('selected', 'selected');
    });


    </script>


    Wednesday, May 23, 2012 12:18 PM
  • Since this has so many views, I thought I should post the full solution.  This uses jQuery and SPServices.

    This goes on the initial page:

    <script type="text/javascript">    
    //Gets the supplierID from the URL and adds it to the Add new item link     
    $(document).ready(function() { 

    //Gets the supplierID from the URL var queryStringVals = $().SPServices.SPGetQueryString(); var supplierID = queryStringVals["FilterValue1"]; //replaces the onlick attribute of the add new item link with a NewForm.aspx and my query string variable var incidentHrefandSupplierID = "http://sp2010/sites/MySite/Lists/MyList/NewForm.aspx?SupplierID=" + supplierID; //console.log(incidentHrefandSupplierID); $('#WebPartWPQ10 #idHomePageNewItem').attr('href', '#'); $('#WebPartWPQ10 #idHomePageNewItem').attr('onclick', function () { return "javascript:showDialog('" + incidentHrefandSupplierID + "');" //console.log(this.onclick); });

    });

    //this lives outside of the document.ready function
    function showDialog(URL) {

    var options = {
    title: "New Item",
    width: 800,
    height: 600,
    url: URL
    };
    SP.UI.ModalDialog.showModalDialog(options);

    }

    </script>

    And then I used this script on the Newform.aspx page to populate a lookup column.  The SPComplexToSimpleDropdown function was used so that i could use the same solution for Firefox/IE. 

    <script type="text/javascript">     
    //Gets the supplierID from the URL and adds it to the Add new item link      
    $(document).ready(function() {          
    var queryStringVals = $().SPServices.SPGetQueryString();         
    var supplierID = queryStringVals["SupplierID"];         
    //console.log(supplierID);
              $().SPServices.SPComplexToSimpleDropdown({             
    columnName: "SupplierID",         
    }); 
             
    //like :contains but matches the text exactly
    $.expr[':'].textEquals = function(a, i, m) {             
        return $(a).text().match("^" + m[3] + "$");         
    };          
    var selectedSupplierID = $("option:textEquals('" + supplierID + "')").val();         
    $("select[title=SupplierID]").val(selectedSupplierID);         
    $("select[title=SupplierID]").change();       
    });   
    </script> 


    James Grizzle
    ---
    http://www.linkedin.com/in/jamesgrizzle







    • Marked as answer by CapnGrizzle Tuesday, July 24, 2012 8:12 PM
    • Edited by CapnGrizzle Tuesday, July 31, 2012 1:05 PM
    Tuesday, July 24, 2012 8:08 PM