Streaming live at 10am (PST)

Refreshing image after changed url in memberstack via zapier

Hi all. I try to reload the page via javascript after my ZAP have changed the url of the member’s avatar in memberstack , the image have the custom attribut data-ms-member=avatar where “avatar” is a memberstack custom field containing the net url of the image. Everything work correctly but the user have to reload the page manually 2 or 3 times via the web browser to see the image change.

<script> 
	var Webflow = Webflow || [];
	Webflow.push(function() {
  $("#wf-form-avatarform").submit(function (event) {
        setTimeout(function () { location.reload(true);
        location.reload(true);
        location.reload(true); 
        }, 60000);
    });

});
</script>

as you can see i let a delay of 60 seconds before reloading the page so zapier have ennough time to upload the image and change the url in memberstack’s profile.

If I understand correctly, the user uploads an image on your webflow site which pushes to memberstack and then you want to refresh the webflow page to show the new image?

You should be able to load the new image without reloading the whole page. There isn’t really any way to use javascript to detect a change in the DOM, but if you think 60 seconds is enough, you could reload the image every 5 seconds for 60 seconds maybe?

You could build an interval function and call it when the user clicks a submit button.

function setCustomInterval(callback, delay, iterations) {
  var x = 0;
  var intervalID = window.setInterval(function () {

    callback()

    if (++x === iterations) {
      window.clearInterval(intervalID);
    }
  }, delay)
}

And then attach this function call to the submit button click or whatever event.

setCustomInterval(function () {
  $(#yourImageID).attr('src', 'url/of/image.png?' + new Date().getTime());
}, 5000, 12);

The date-time as a query string ensures the browser has to clear the cache and fetch new data, not the old image if it happens to have the same url. This call would reload the image src every five seconds 12 times (60 seconds).

Not entirely sure this is what you are after, but I hope it helps!

Thanks for the help, i have tried to implement that solution but i dont know where i make an error:

<script> 
function setCustomInterval(callback, delay, iterations) {
  var x = 0;
  var intervalID = window.setInterval(function () {

    callback()

    if (++x === iterations) {
      window.clearInterval(intervalID);
    }
  }, delay)
}

	var Webflow = Webflow || [];
	Webflow.push(function() {
  	$("#wf-form-avatarform").submit(
    	function (event) {
  			setCustomInterval(function () {
  				$('#avatarImage').attr('src', $('#avatarImage').attr('src') + '?t=' + new Date().getTime());
					location.reload(true);
        }, 1000, 12);
    	}
    );}
  );


</script>

the page is reloading just one time or i can’t see when it reload more times
i think the problem is with the timestamp which have no effect on the cache reloading. it doesnt reload the page from server. but when i reload the page manually 2 times the image changes, maybe memberstack is in fault here with his data-ms-member

this langage is horrible where we put a function in a function in a function and we dont remember how many parenthese we have to close.

thanks for the help.

I just have look in the console of the browser , the src of the image is not changed , so i dont need the timestamp , its juste a problem with member stack 's data-ms-member=“avatar” who dont change the src of the image after reload , how can i do for changing the src of the image referencing memberstack’s profile avatar image 's url

Unless you need an actual form to be submitted (if there are multiple input fields, for example), you can skip the event parameter. In fact, you could just attach the function call to a click.

$('#wf-form-avatarform').click(function () {
  setCustomInterval(function () {
    $('#avatarImage').attr('src', $('#avatarImage').attr('src') + '?t=' + new Date().getTime());
  }, 1000, 12);

The page will never reload at all. You just need the src url. I can’t see your site, so I don’t know exactly how to implement a solution. Also, the timestamp is just something random to add at the end of the query string to force the browser to fetch the image from the server fresh and new, not the cached version.

As far as having trouble nesting callback functions → it’s called Callback Hell and it’s a real thing. Welcome to javascript!