How to change a URL query parameter without reloading the page

[frequentish]

Is there a way to programmatically change a query param without reloading the page in bubble?

[bentoj72]

I have also this doubt.

[manikandan]

Yes, Possible.

Use HTML element add your code inside the <script></script> tag.
Example :

> <script>
>     var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?debug_mode=false';
>     window.history.pushState({ path: newurl }, '', newurl);
>     </script>

[boston85719]

Does the Bubble dynamic expressions recognize these altered URL values as parameters or path segments to be used?

For example, most plugins that currently allow for URL manipulation do not provide a value that can be returned for the dynamic expression Get data from URL parameter or path or path segments as a list, so those URL manipulation plugins are often not as useful as they could be.

Does this code work any differently?

[varshneyandson]

i’ve made a plugin that works with the get data from url parameter. haven’t released it yet as i’d like to test it more.

if you’d like to try it out, i can add your app the plugin’s app list

[sudsy]

If I understand the question, Bubble can do this, and there’s no need for a plug-in. Just use the Go to page action to navigate to the current page. See screenshot below and example here.

[boston85719]

Does your plugin allow for the removal of a URL parameter? That in my mind is the most important aspect to the URL manipulation that is missing. As @sudsy mentioned, the go to page navigation currently allows the parameter to be changed or added, however, it is missing the ability to remove it completely (not just an empty value, but to remove the parameter) so that there are no empty parameters.

[sudsy]

@boston85719

the go to page navigation currently allows the parameter to be changed or added, however, it is missing the ability to remove it completely

That’s interesting. I’ve never actually tried that using native Bubble; but then, in the “real world”, I actually use Sudsy for all same-page navigation. It allows for that and so much more.

For one thing, it’s context aware - thereby enabling different workflows for the same URL, depending on how the URL was arrived at (e.g. via initial page load, workflow navigation, hyperlink click, or history navigation).

So for instance, a popup (such as a login) could be displayed when a specific query parameter or hash token is present, but only when that URL is first visited and not when using the browser’s forward and back buttons. Or maybe a cart should be cleared when “#success” is in the redirect URL from an attempted Stripe checkout. The possibilities are endless.

-Steve

[boston85719]

@sudsy I am probably going to ask a few dumb questions right now, but I am gearing up for creating a personal project that will be my first truly one page app.

Currently I create a reusable element to have all the functionality for a specific feature set such as messaging, and then I drop it onto the page inside of a group. I do this rather than building all functions on the same page and slowing down the editor.

When working like this I use the navigation go to page action to get better communication between page and reusable elements as the URL is the only ‘universal’ data storage device available natively in Bubble.

I saw on your page that it is compatible with reusable elements

1. Would this allow me to set a parameter in the URL without having to denote the specific page? My thought here is that currently the way I use the workflow go to page action requires I denote which page to add or change the parameter. This limits my ability to use the same reusable element on various pages (of course could add conditional workflows but…);

So does the plugin allow for a function that is just ‘add parameter to URL’ and you could and would only need to set the parameter value and not the complete URL?

Also, you have a warning

If I am planning on making a one page app and was expecting to just use the index page, it seems like the plugin would not function based on Bubble limitations.

2. Is the proper approach to just have two pages, an index and a ‘main’ page that once the user navigates to the index page they are automatically redirected to the ‘main’ page where all the functionality of the app lives so as to make use of the all of the plugins features and capabilities?

[varshneyandson]

Yes, it has an add and delete feature.

[sudsy]

@boston85719

I am probably going to ask a few dumb questions right now

There is no such thing as a dumb question. Only dummies don’t ask questions.

 

@boston85719

Would this allow me to set a parameter in the URL without having to denote the specific page?

You should shift your thinking away from “pages” toward “URLs”. My plugin works only within the context of the current page and only with URLs. To achieve what you’d want, you’d simply “navigate” to the desired URL - i.e. one without the QS param. That can be done using a hyperlink OR via a workflow action. The page won’t reload; the URL simply updates and Sudsy notifies your app of such.

So yes, you can achieve what you want - just not exactly how you might have thought. You’d simply use the dynamic expression builder to specify the destination URL / route.

 

@boston85719

If I am planning on making a one page app and was expecting to just use the index page, it seems like the plugin would not function based on Bubble limitations.

That’s exactly right. Bubble assumes that the first path parameter following the domain is an actual Bubble page. If it’s not, you get a 404. That’s just how Bubble works whether or not the plug-in is installed.

 

@boston85719

Is the proper approach to just have two pages, an index and a ‘main’ page that once the user navigates to the index page they are automatically redirected to the ‘main’ page where all the functionality of the app lives so as to make use of the all of the plugins features and capabilities?

That’s how some users are doing it. I’m probably not in a position to make a recommendation, as the best approach depends on your app and your desired UX. I’d probably use the index page as a landing page and have the app reside at https://mysite.com/app.

The way I use Sudsy most of the time, though, is not for SPA, but rather as a way to “segment” my application for organizational and SEO purposes. It also makes the app easier to maintain IMO.

For instance, an app I’m currently building has an eateries page, but that one page has the following “routes” (among others):

• https://mysite.com/eateries
  List of restaurants.

• https://mysite.com/eateries?search=jojo
  Popup to search for a specific eatery.

• https://mysite.com/eateries/jojos-cafe
  Detail view for individual restaurant.

• https://mysite.com/eateries/jojos-cafe/location
  Popup with map and directions to individual restaurant.

Similarly, there’s a single Bubble account page with different “routes” for managing one’s profile, viewing orders, managing payment methods, etc.

For working with query string parameters, Sudsy publishes a list of custom objects - each having a “Name” and “Value” attribute. So, to get the value of a specific qs param, you’d filter the list with a constraint where Name = the_name and get :first item's Value. To check if a particular qs param is present would be a similar approach but check if :first item is empty. IOW, you would not use Bubble’s built-in mechanism for getting / setting query string parameters. Rather, standard list filtering techniques would be used instead.

Hope that helps somewhat. If you have any other questions, let me know.

-Steve

[boston85719]

Yes, thank you for the answers. I’ll have to install and play around a bit to see firsthand how it is working to map out my approach with it.

[sudsy]

Keep in mind, also, that there are 3 separate demos - the simplest of which is the Quick Start. It shows how “nested” URLs can be used to display a hierarchy of initially-hidden views. Edit mode is accessible from the nav menu (as are other demos). There’s pretty thorough documentation as well.

[paterson.damian]

Not sure if you have tried this plugin ? But it may be what you are looking for.

Note - I’m in no way affiliated to the plugin, just happened to be scrolling through the forum and thought it may help.

Remove empty URL parameters Plugin for Bubble, by Mintflow

[boston85719]

I have not tried this plugin. I’ll give it a test. Thanks for mentioning it.

[grace.hong]

Hi there - just launched a feature, so you can change URL parameters more easily! Learn more: [Feature] Enable navigating to a dynamic page