# Using With SPA

Many sites update content dynamically, and it’s possible to do this with Whisk SDK.

## Updating Widget

For example, your user switches from one recipe page to another and you want to update the recipe URL for the widget. For that, you need to remove the old widget definition and create a new one.

```javascript
whisk.queue.push(function () {
  // Creating widget
  whisk.shoppingList.defineWidget('myWidget', {
    recipeUrl: 'https://first-recipe-url',
  });
  // Removing widget
  whisk.remove('myWidget');
  // Creating new widget
  whisk.shoppingList.defineWidget('myWidget', {
    recipeUrl: 'https://second-recipe-url',
  });
});
```

Make sure you call display with updated widget id:

```javascript
whisk.queue.push(function() {
    whisk.display('myWidget');
});    
```

## Updating Event Listeners

Same logic applies for event listeners. Whenever you want to update listener just remove it and create a new one.

```javascript
whisk.queue.push(function () {
  // Creating listener
  whisk.listeners.addClickListener('myButton', 'shoppingList.addRecipeToList', {
    recipeUrl: 'https://first-recipe-url',
  });
  // Removing listener
  whisk.listeners.removeClickListener('myButton');
  // Creating new listener
  whisk.listeners.addClickListener('myButton', 'shoppingList.addRecipeToList', {
    recipeUrl: 'https://second-recipe-url',
  });
});
```

## Subscriptions

Whenever you remove widget or event listeners, all subscriptions will be removed as well. So whenever you update your widget or event listener don't forget to subscribe to desired events again.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.whisk.com/shopping-list-sdk/basic-setup/using-with-spa.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.