Help with Gui Refresh problem

Hello! I am here! to ask for help. I am open to every idea as long as it makes sense

I know it sounds rude asking for help and saying as long as it makes sense but I am neither native english speaker nor I am good at english. so I don’t really know how to make a better speech
if it sound rude. sorry. I didn’t mean to be rude

here is the problem:

  1. What do you want to achieve? Keep it simple and clear!
    I am trying to refresh gui after “purchase” event simply Deletes the Button and re-creates them (removes the next Item’s l"ock"Image) but refreshing part is kinda “Ugly”
    Check the video to understand what I mean with ugly

It hurts eyes and kinda disturbing right?
so. I am trying to refresh gui without that Deleting and re-creating part but I can’t figure out how to do it
2. What is the issue? Include screenshots / videos if possible!
(Both are in same module script. just wanted to make things easier for readers)

local ShopGuiThing = script.Parent
local ServerStorage = game:GetService("ServerStorage")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local remotes = ReplicatedStorage:FindFirstChild("Remotes")

local players = game:GetService("Players")
local ScriptYapilabilirobjeler = game:GetService("Workspace"):WaitForChild("SccriptYapılabilirObjeler"):FindFirstChild("MagazaAcar")
local player = players.LocalPlayer
local TweenService = game:GetService("TweenService")
local toolConfig = require(ReplicatedStorage:WaitForChild("ToolConfig")) -- !!!!!!!!!!!!!!!!!
local DNAConfig = require(ReplicatedStorage:WaitForChild("DNAConfig")) -- !!!!!!!!!!!!!!!
local RankConfig = require(ReplicatedStorage:WaitForChild("RankConfig"))-- !!!!!!!!!!!!!!!!!!!!
local ToolModels = ReplicatedStorage:WaitForChild("ToolModels")
local formatNumber = require(ReplicatedStorage:WaitForChild("LİBBOS"):WaitForChild("FormatNumber"))
local Frame = ShopGuiThing.Frame
local Container =Frame.ShopMain.ScrollingContainer
local ItemTemplate = script.Template

local InfoFrame= Frame.ShopMain:WaitForChild("InfoFrame")
local InfoViewportFrame = InfoFrame:WaitForChild("ViewportFrame")
local InfoBuyButton = InfoFrame.ItemBuyButton
local InfoItemName = InfoFrame.ItemName
local InfoStrengthFrame = InfoFrame.ItemStrength
local InfoItemPrice = InfoFrame.ItemPrice
local InfoImageLabel = InfoFrame.ImageLabel
local BuyAllButton = InfoFrame.BuyAllButton
local UyariKutucusuSatinAlma = script.Parent.Warning

local ClickedItem
local CurrentShop
local scytheLevel = 0


local Shop = {}
Shop.__index = Shop



CurrentShop = true
local function clearContainer()
	for _, child in ipairs(Container:GetChildren()) do
		if child:IsA("TextButton") then
			child:Destroy()
		end
	end
end

function Shop.Buy()

-- ask server if player has enought money to buy items
	local ehe = remotes.ShopFireThingoBuyo:InvokeServer(ClickedItem.Name, CurrentShop)

	if ehe == "NotEnoughtMoney" then
		print("NotEnoughtMoney")
	elseif ehe == "Equipped" or ehe == "Purchase" then
	--	if has money then refresh gui and then change buttons
		Shop.new(CurrentShop)
		InfoBuyButton.BackgroundColor3 = Color3.fromRGB(77, 68, 198) 
		InfoBuyButton.Text = "Equipped"

	else
		InfoBuyButton.BackgroundColor3 = Color3.fromRGB(0, 255,255)
		InfoBuyButton.Text =  "Buy"
	end
	if CurrentShop == "Conkey" then
		InfoViewportFrame.Visible= true
		InfoImageLabel.Visible = false
	else
		InfoViewportFrame.Visible = false
		InfoImageLabel.Visible = true
	end
end
function Shop.new(shop: string)
	
	clearContainer()
	BuyAllButton.Visible = true
	CurrentShop = shop
	print("Tanratointiano")
	ShowInfoFrame(false)
	local list = if shop == "Scythe" then toolConfig elseif shop =="DNA" then DNAConfig else RankConfig
	
	local eheh1 =remotes.ShowScythes:InvokeServer(shop) 
	
	for _, toolTable in ipairs(list) do
	print(list)
		local object = setmetatable({}, Shop)
	print(object)
		
		object.Name = toolTable.ID
		object.Stat = if toolTable.Stat then toolTable.Stat else 0  
		object.Price = toolTable.Price	
		object.ImageId = if toolTable.ImageId then toolTable.ImageId else nil
		object.Visible = if toolTable.Visible then toolTable.Visible else nil
		object.Level = if toolTable.Level then toolTable.Level else nil

		print(object)
		local ItemClone = ItemTemplate:Clone()
		ItemClone.Parent = Container
		ItemClone.LayoutOrder = toolTable.order

		local ImageLabel = ItemClone.ImageLabel
		ImageLabel.Image = toolTable.ImageId

		local Image = ImageLabel.Image
		Image = toolTable.ImageId

		object.TemplateButton = ItemClone
		
		
		if object.Level > eheh1 +1 then
			object.TemplateButton.Lock.Visible = true
			object.TemplateButton.ImageLabel.Visible = false
		else
			object.TemplateButton.Lock.Visible = false
			object.TemplateButton.ImageLabel.Visible = true
        end
		object.TemplateButton.MouseButton1Click:Connect(function()
			object:Click(eheh1)

		end)	
	end
end

now just to clarify a few things: That “Ugly” thing happens because of "clearContainer()
But removing that part
turns Gui to this which is uglier than before


and it happens because of this part

local ItemClone = ItemTemplate:Clone()
ItemClone.Parent = Container

But I can’t remove this part because if I do. this part won’t work

object.TemplateButton = ItemClone
   	
   	
   	if object.Level > eheh1 +1 then
   		object.TemplateButton.Lock.Visible = true
   		object.TemplateButton.ImageLabel.Visible = false
   	else
   		object.TemplateButton.Lock.Visible = false
   		object.TemplateButton.ImageLabel.Visible = true
    end
   	object.TemplateButton.MouseButton1Click:Connect(function()
   		object:Click(eheh1)

so. I am open to every idea

1 Like

I would recommend building the new gui inside of a separate container and moving them into the GUI when you are done. This may eliminate the gap. You could also just simply update the information instead of entirely rebuilding the GUI. This would also give you a performance boost.

1 Like

Well I understand your idea and

But I don’t know how to do it excatly. I have tried it many times with different ways but I can’t

1 Like

Well firstly, what are you trying to update when you completely rebuild the page?

1 Like

Loop through all of the GUIs in the frame and set the appropriate properties as you set them when you first build the gui.

1 Like

The Image on the buttons.
you can see the anime girl image(Lock image) removes when you purchase a new item and shows the image of the Item

now as you can see from

This part generates new buttons everytime it is called and I have to delete every old buttons

1 Like

So on a refresh function, you would simply loop through all of the frames and set the image to either the lock or the normal image.

yes, the problem is for i,v in pairs (container:GetChildren())
only gives normal Image or lock Image not values
Like
there is a number value that increases everytime you have item let’s call it Level
if my Level is 2 I should be able to see 3rd Item’s normal Image which is Level+1
But
for i,v in pairs (container:GetChildren()) doesn’t give me the Level of that Item

Hi! I was wondering if you mean that when you try to refresh the GUI, the old buttons don’t delete? I am kind of confuse.

Hey! the buttons do delete, Just seems kinda ugly when they are deleted and re-created (Video1)
I am trying to find a way to refresh gui without deleting buttons
but Not deleting the buttons makes the gui uglier (Video2)

Why don’t you just change the script to check if the item is bought instead of refreshing the whole Gui?

if OwnScythe == true then
-- change button colors and words
end

Something like that.

because I am trying to remove lock image from the next Item not previous or current Item

Have the Locked image OVER the item, and when it is bought just :Destroy() or Transparency = 1 or remove the Locked image for the player instead of refreshing it over and over each time. Unless if you are really going for your style of code then I suggest you delete all the old buttons first, then put in the new ones, which I suppose you are already trying.

I am not trying to remove LOCK of the Item player BOUGHT
I am trying to remove LOCK of the NEXT ITEM
If player bought the Item no2
I want to Remove lock Of Item no3
NOT Item no1 or no2 or no4

I would recommend making a function for adding the properties to the image, then looping through all of the UI items and running that function onto them.