"Simultaneously updating the UpdatePanel, triggering a JavaScript postback, and modifying the querystring in a SharePoint Search

Struggling with a tricky issue here. Let me try to clarify:

I have a SharePoint results page where I'm using a Search Results Core WebPart. Now, I want to modify the parameter in the querystring upon postback so that the WebPart displays different results based on the parameter. For example, the querystring could look like interactivemap.aspx?k=Country:Romania which would filter the results for Romania.

The initial challenge is that I need to achieve this using JavaScript. So, I make the call:

document.getElementById('aspnetForm').action = "interactivemap.aspx?k=Country:" + country;

This may seem straightforward, but the reason for incorporating JavaScript is because there's a flash applet present on the page, and the JavaScript calls stem from it. It's crucial that when these JavaScript calls occur, the page undergoes a PostBack without reloading the flash applet.

To tackle this, I turned to ASP.Net AJAX and encapsulated the search results webpart within an update panel. If I utilize a button within the UpdatePanel to trigger the PostBack, the UpdatePanel functions as intended, rendering only a portion of the search results webpart without refreshing the flash applet.

The problem arises when I attempt to perform a postback from JavaScript. I utilized __doPostBack() as I've done successfully previously. It functions independently, but fails when preceding it with the aforementioned JavaScript (I also tested triggering click() on a hidden button). The code snippet is provided below.

I suspect the issue lies with the scriptmanager not facilitating partial rendering when the form post action has been altered.

My queries are as follows:

A) Is there an alternative method to adjust the search results webpart parameter that doesn't involve employing the querystring?

or

B) Can any workaround be implemented to change the querystring during an AJAX postback while achieving partial rendering?

    <asp:content contentplaceholderid="PlaceHolderFullContent" runat="server">
          <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
          <SPSWC:pagelevelerror runat="server" id="PageLevelError"/>
          <script type="text/javascript">
              function update(country) {
                  //__doPostBack('ContentUpdatePanel', '');
                  //document.getElementById('aspnetForm').action = "interactivemap.aspx?k=ArticleCountry:" + country;
                  document.getElementById('ctl00_PlaceHolderFullContent_UpdateButton').click();
              }
          </script>
            <div id="flashFeature">  
             <object type="application/x-shockwave-flash" data="_layouts/HFT/flashApplets/interactiveMap/interactiveMap/interactiveMapAssets/IMap.swf" width="100%" height="500px" id="flashContent" style="visibility: visible;">
                    <param name="bgcolor" value="#cccccc"><param name="allowfullscreen" value="true">
                    <param name="allowscriptaccess" value="always">
                    <param name="flashvars" value="ASSETS_FOLDER=_layouts/HFT/flashApplets/interactiveMap/interactiveMap/interactiveMapAssets/">
                    <param name="movie" value="_layouts/HFT/flashApplets/interactiveMap/interactiveMap/interactiveMapAssets/IMap.swf">
                    <embed src="_layouts/HFT/flashApplets/interactiveMap/interactiveMap/interactiveMapAssets/IMap.swf" width="100%" height="500px"></embed></object> 
            </div>
           <div onclick="update('Romania');">Romania</div>
           <div class="firstDataTitle">
          <div class="datatabletitleOuterWrapper">
              <div class="datatabletitle">
                  <span>Content</span></div>
          </div>
             <div class="datatableWrapper">
                 <div class="dataHolderWrapper">
                     <div class="datatable">
                         <div>
                            <div class="searchMain">          
                                <div class="searchZoneMain">
                                 <asp:UpdatePanel runat="server" id="ContentUpdatePanel"  UpdateMode="Conditional">                              
                                 <ContentTemplate>
                                     <WebPartPages:webpartzone runat="server" AllowPersonalization="false" title="    <%$Resources:sps,LayoutPageZone_BottomZone%>" id="BottomZone" orientation="Vertical" QuickAdd-GroupNames="Search" QuickAdd-ShowListsAndLibraries="false"><ZoneTemplate>   </ZoneTemplate></WebPartPages:webpartzone>
                                     <asp:Button id="UpdateButton" name="UpdateButton" runat="server" Text="Update"/>
                                  </ContentTemplate>
                                </asp:UpdatePanel>
                                </div>
                            </div>    
                        </div>                        
                 </div>                           
             </div>
         </div>
         </div>  
    </asp:content>

Answer №1

My recommendation would be to eliminate the UpdatePanel and opt for a more efficient solution using "proper" ajax such as with jQuery, allowing you to update your web part data based on the retrieved information.

It's evident that the UpdatePanel is often seen as a quick fix with limitations. Yet, it's hard to justify the extra overhead it brings without a solid reason.

- Michael

Answer №2

The search results web part will accept queries submitted in a posted form, as the advanced search box does not automatically set the query string.

If you are looking for the specific field names related to this topic, please visit my blog at

By following this method, you should be able to go back to your original testing process using a button within an update panel. It is even possible to utilize the standard advanced search box (with certain fields disabled) inside the update panel.

Keep in mind that posted fields and rendered controls essentially serve the same purpose, regardless of the control type being used. You can include one of the text boxes from the advanced search box as a hidden field within the update panel along with your button. This setup creates a standard form within the update panel.

Answer №3

Your explanation is almost there in helping me find a solution. However, your article only mentioned the fields rendered by the advanced search webpart, not the posted fields. My query does not rely on input fields; instead, it is triggered by a JavaScript function.

I attempted to use the code below, which brought me closer to solving the issue. The problem lies in the fact that everything functions correctly except for the partial render when the JavaScript is executed. I am puzzled as I have specified the eventTarget as the button ID, which is a child of the updatepanel.

Here's the code snippet I'm working with:

WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$PlaceHolderFullContent$UpdateButton", "", false, "", "interactivemap.aspx?k=ArticleCountry:" + country, false, true));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The assignment of type 'string' to type 'UploadFileStatus | undefined' is not permissible

import React, { useState } from 'react'; import { Upload } from 'antd'; import ImgCrop from 'antd-img-crop'; interface uploadProps{ fileList:string; } const ImageUploader:React.FC <uploadProps> ...

Issue with image magnification on Internet Explorer 9 using the Cloud Zoom plugin extension for Joomla

Recently, I've been utilizing a Joomla plugin called cloud zoom to enhance our gallery by providing an image magnification effect when hovering over the large image. You can see it in action on this link here. While it works flawlessly on most browser ...

Is it possible to configure Nginx mime types within a Docker container?

My docker-compose.yml file looks like this: version: "1.0" services: web: container_name: webserver image: nginx volumes: - ./nginx.conf:/etc/nginx/nginx.conf:ro - ./frontend:/frontend ports: - "8001:80&qu ...

`In AngularJS, the same URL ('/') can display different templates depending on the user's login status.`

What is the most effective way to configure routing and templates in AngularJS to display a distinct front end and login area for visitors, while presenting a dashboard to logged-in users all on the same base URL ('/')? These two pages have comp ...

Jest may come across test suites, but it discreetly disregards the individual tests

Having encountered an issue with Jest testing in a Nuxt/Vue v2 project, I found that after making some changes, the tests were no longer running. The unit tests were either passing or failing initially, but suddenly stopped running altogether. ----------|- ...

Approach to retrieving data with Nodejs API

Currently, I am working on a project with Node.js and using Express.js. My goal is to retrieve data from a MySQL database, but I encountered the following error: "await is only valid for async function" How can I resolve this issue? Below is the ...

Ways to modify an object similar to manipulating an array collection

Hey there, I've heard that iterating and editing objects (not arrays) is not the best practice. Is there a more efficient way to do it as easily as it can be done with an array of objects? Check out this link for reference new Vue({ el: '#app ...

JavaScript - turn off online connectivity

Is there a way to test my website for offline use by disabling connectivity on the bootstrap before anything loads, so that all data will be loaded from cache? I have tried various offline libraries such as this one, but I haven't found a way to prog ...

Is it possible for me to create a lineString connecting two points in OpenLayers3?

I need to create a lineString connecting my two given points, such as [-110000, 4600000] and [0, 0]. ...

PHP enables real-time control of a pop-up message box

I am currently working on a real-time project and looking for a way to send live announcements or pop-up alerts that can be controlled by admins to all users on the webpage. Although I found a solution called Realtime announcer online, our company policy ...

"Enhancing user experience with Ajax by dynamically loading diverse content via

My goal is to change the URL in the address bar and add a class to the anchor tag when clicking on a tab. I came across a great example on jsfiddle that someone shared on stackoverflow. http://jsfiddle.net/VcQKr/2/ The issue I'm facing is that while ...

What is the most efficient approach for handling numerous transactions individually through AJAX calls?

Just a heads up: there's quite a bit of pseudo code coming up, but it's necessary to illustrate my issue. My solution involves more complex management of ajax icons and statuses, but I've simplified it for clarity. Essentially, I'm fac ...

Tips on preventing the occurrence of double encoding in raw JSON output from a view

I am encountering a JavaScript error while attempting to parse JSON data obtained from my controller: Uncaught SyntaxError: Unexpected token & in JSON at position 1 at JSON.parse () at stores:76 This is the code I use to serialize my list of elem ...

The post request is successful in Postman and cURL, however, it faces issues when executed in Angular

A remote server and a local client are set up to communicate through a simple post request. The client sends the request with one header Content-Type: application/json and includes the body '{"text": "hello"}'. Below is the s ...

What is the best way to ensure that a navbar dropdown appears above all other elements on

I'm having trouble creating a navbar dropdown with material design. The dropdown is working fine, but the issue I'm facing is that other elements are floating above it. https://i.stack.imgur.com/aJ0BH.png What I want is for the dropdown to floa ...

Having trouble showing the fa-folders icon in Vuetify?

Utilizing both Vuetify and font-awesome icons has been a successful combination for my project. However, I am facing an issue where the 'fa-folders' icon is not displaying as expected: In the .ts file: import { library } from '@fortawesome/ ...

Tips for passing mapped data as props to a different component in a React application

I am trying to pass mapped data as props to another component. The code I have written is as follows: <div className={styles.myTeamFlex}> {userTeams.map((team, index) => ( <TeamCard key={team + index} active={active} in ...

Posting values using AJAX in PHP - A guide

test.html <html> <!-- To access the complete PHP-AJAX tutorial, please visit http://www.php-learn-it.com/tutorials/starting_with_php_and_ajax.html If you found this tutorial helpful, a backlink to it would be greatly appreciated. ...

Need to know how to invoke a function from an http callback function that resides in a separate file? Simply use the `app.get("/", callbackFun)` method

Directory Organization: testAPI contactDetail dispMobNo.js myModule.js index.js index.js const express = require("express"); const app = express(); const port = process.env.port || 3000; const getCustNo = require("./cont ...

Extracting Unprocessed Data with Node.js Express

I am currently working with an Express server that handles a login form page: const app = express(); // part A app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.urlencoded()); app.get('/login', ...