Gadget Element

Just starting out? Need help? Post your questions and find answers here.
User avatar
Alexi
Posts: 4
Joined: Tue Feb 25, 2014 6:56 pm

Gadget Element

Post by Alexi »

How can i get the div element of an gadget for js? Actually a findElementByID can't work for all gadgets as some of them doesnt store an ID. GadgetID() in some way?
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: Gadget Element

Post by eddy »

I don't know if all SB gadgets are DIV-based gadget.

Code: Select all

Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
  Protected gadgetObject=GadgetID(Gadget) 
  !if (v_gadgetObject && v_gadgetObject.div) { return v_UseJquery? $(v_gadgetObject.div):v_gadgetObject.div; }
EndProcedure 
User avatar
Alexi
Posts: 4
Joined: Tue Feb 25, 2014 6:56 pm

Re: Gadget Element

Post by Alexi »

Thank you eddy, but is that the object to access like this?

Code: Select all

! myDiv.style.color = 'red';
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: Gadget Element

Post by eddy »

like that:

Code: Select all

#Window = 0


Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
  Protected gadgetObject=GadgetID(Gadget) 
  !if (v_gadgetObject && v_gadgetObject.div) { return v_UseJquery? $(v_gadgetObject.div):v_gadgetObject.div; }
EndProcedure 

OpenWindow(#Window, 0, 0, 0, 0, "noty", #PB_Window_Background)
ButtonGadget(1, 10, 10, 100, 30, "OK")
ButtonGadget(2, 10, 40, 100, 30, "RUN")

;***** change button background color ********

buttonDIV=GadgetElement(1,#False)
!v_buttonDIV.firstChild.firstChild.style.backgroundColor='red';   // using DOM properties

buttonJquery=GadgetElement(2,#True)
!v_buttonJquery.find('.dijitButtonNode').css({'backgroundColor':'red'}); // using Jquery methods
Last edited by eddy on Sat Apr 12, 2014 6:52 pm, edited 4 times in total.
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Gadget Element

Post by Peter »

Alexi wrote:Thank you eddy, but is that the object to access like this?

Code: Select all

! myDiv.style.color = 'red';
ButtonGadgets (for example) consist of several divs and spans.

Code: Select all

<div style="position: absolute; left: 10px; top: 10px; width: 100px; height: 30px;">
	<span class="dijit dijitReset dijitInline dijitButton" role="presentation" widgetid="dijit_form_Button_0">
		<span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:__onClick" role="presentation">
			<span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_0_label" tabindex="0" id="dijit_form_Button_0" style="-webkit-user-select: none; width: 98px; height: 28px;">
			<span class="dijitReset dijitInline dijitIcon dijitNoIcon" data-dojo-attach-point="iconNode">
			</span>
			<span class="dijitReset dijitToggleButtonIconChar">●</span>
				<span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_0_label" data-dojo-attach-point="containerNode" style="display: table-cell; width: 98px; height: 28px; color: red;">Button1</span>
			</span>
		</span>
		<input type="button" value="" class="dijitOffScreen" data-dojo-attach-event="onclick:_onClick" tabindex="-1" role="presentation" data-dojo-attach-point="valueNode">
	</span>
</div>
If you want to color the buttontext, you have to look at a span with class "dijitButtonText":

Code: Select all

Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
  Protected gadgetObject=GadgetID(Gadget) 
  !if (v_gadgetObject && v_gadgetObject.div) { return v_UseJquery? $(v_gadgetObject.div):v_gadgetObject.div; }
EndProcedure

OpenWindow(0, 10, 10, 300, 300, "")

ButtonGadget(0, 10, 10, 100, 30, "Button1")
ButtonGadget(1, 10, 50, 100, 30, "Button2")

GE1 = GadgetElement(0,#True)
GE2 = GadgetElement(1,#True)

! v_GE1.find(".dijitButtonText").css("color", "red");
! v_GE2.find(".dijitButtonText").css("color", "blue");
Greetings ... Peter
firace
Posts: 28
Joined: Tue Jan 02, 2018 6:59 pm

Re: Gadget Element

Post by firace »

These examples no longer seem to work (buttongadget color doesn't change for me)
Could anyone have a look please?
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Gadget Element

Post by Peter »

At some point after 2014 (I don't remember exactly when) Fred changed the variable notation.
SB-Help wrote:Here are the naming rules to use when accessing SpiderBasic items: - JavaScript variable name is the same in lowercase with a 'v_' prefix.

Code: Select all

Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
  Protected gadgetObject=GadgetID(Gadget) 
  !if (v_gadgetobject && v_gadgetobject.div) { return v_usejquery? $(v_gadgetobject.div):v_gadgetobject.div; }
EndProcedure

OpenWindow(0, 10, 10, 300, 300, "")

ButtonGadget(0, 10, 10, 100, 30, "Button1")
ButtonGadget(1, 10, 50, 100, 30, "Button2")

GE1 = GadgetElement(0,#True)
GE2 = GadgetElement(1,#True)

! v_ge1.find(".dijitButtonText").css("color", "red");
! v_ge2.find(".dijitButtonText").css("color", "blue");
firace
Posts: 28
Joined: Tue Jan 02, 2018 6:59 pm

Re: Gadget Element

Post by firace »

Peter wrote: Sun Jun 19, 2022 9:46 am At some point after 2014 (I don't remember exactly when) Fred changed the variable notation.
SB-Help wrote:Here are the naming rules to use when accessing SpiderBasic items: - JavaScript variable name is the same in lowercase with a 'v_' prefix.
That was it! Thanks again.
Post Reply