[SOLVED] How to find parent with class="swipeout"?


#1

Im trying to mimic the “swipe to delete” and close a “li” when I click on the class “betald” in the swipeout-action-right, so I wonder what is wrong with my code, why isn´t it working?

So when I click on the class “betald” I’m trying to get this to work:
$$(this).parent('.swipeout').css('transform','translateX(-100%)');

This is the li:

<li data-id="<% = rs("produkt_id") %>" class="swipeout">
      <div class="swipeout-content item-content" style="flex-wrap:wrap;padding:0px 0px 0px 0px;">
        <div class="item-media" style="width:100%;">
        <%if rs("big_image")<>"" then%>
        <div style="background-image: url('<%=rs("big_image")%>');" class="listimage"></div>
        <%else%>
        <div  class="listimage"></div>
	<%end if%>
        </div>
        <div class="updatepilen"></div>
        <div class="item-inner" >
         <div class="item-title-row">
          <a href="/showbloggpost/?tabell=<%=tabell%>&folderName=<% = folderName %>&postid=<% = rs("produkt_id") %>" data-force="true" data-ignore-cache="true" data-view=".view-main">
            <div class="item-title" dir=auto style="color:#222;">Produkt id: <%=rs("produkt_id")%></div>
          </a>
          </div>
          <div class="item-subtitle" style="height:auto;max-height:170px;padding-right:20px;white-space: normal;" dir=auto>
          Ordernummer: <%=rs("ordernummer")%> <br>
          <%if rs("betald")="true" then%>Produkten är betald<br><%else%><span style="color:#f00;">Produkten är ej betald!</span><br><%end if%>
          <%if rs("produkthamtad")="true" then%>
          <span style="color:#F90;">Produkten är hämtad! <%=rs("hamtaddatum")%></span><br>
          <%if fnamn<>"" then%>
          <a href="/showpersonal/?personal_id=<% = personal_id %>" data-force="true" data-ignore-cache="true" >Utlämnad av: <%=fnamn%>&nbsp;<%=enamn%></a> <br>
          <%end if%>
         <%end if%><br>
         <%=rs("artikel")%><br>
	 <%=rs("texten")%>
          
          </div>
        </div>
      </div>
       <div class="sortable-handler"></div>
      <div class="swipeout-actions-right" style="margin-right:-1px;">
      
        ////----when I click on the class "betald" here---------------------
        <a href="#" data-id="<% = rs("produkt_id") %>" data-ordernummer="<%=rs("ordernummer")%>" class="betald" >Betald?</a>
       
      
        <a href="#" data-id="[<% = rs("produkt_id") %>]" class="swipeout-delete bg-color-orange" data-confirm="Vill du uppdatera produkten som hämtad?" data-confirm-title="Hämtad?" data-close-on-cancel="true">Hämtad?</a>
             
      </div>
      <input type="hidden" name="newsId" value="<% = rs("produkt_id") %>">
    </li>

I get no errors?
Any input really appreciated, thanks!


#2

I guess it should be .parents(…)


#3

Thanks Vladimir, I had to use “closest” to make it work.

$$(this).closest('.swipeout').animate({'height':0},{duration: 600,});

But I have another question, if I put it inside a confirm it does´t work, it is not finding “this” I guess.

So how can I get below to work?

$$(page.el).on("click",".betald", function(){
	produkt_id = $$(this).attr('data-id');
	ordernummer=$$(this).attr('data-ordernummer');
	
         //if I have it here it works-----------
	 $$(this).closest('.swipeout').animate({'height':0},{duration: 600,});
		
app.dialog.confirm('Vill du uppdatera produkten som både kontant betald och hämtad?','ÅTERVINN MERA', 
      function () {	
		
					    var data;
						app.request({
							method: 'POST',
							url: 'hamtlistanupdate.asp',
							data: {
							  produkt_id : produkt_id,
							  ordernummer : ordernummer,
							  betald :'true'
							  
							   },
						    success: function (data) { 
							//if I have it here it does´t work--------
                            $$(this).closest('.swipeout').animate({'height':0},{duration: 600,});
							  app.dialog.alert(data,"ÅTERVINN MERA")
							}
						});
},
      function () {
        //app.dialog.alert('You clicked Cancel button');
		return false;
      }
    );  
});

Thanks a lot.


#4

Just save it to something in the beginning, e.g. var clicked=this

https://link.medium.com/wZtXYRJnuU


#5

Thanks a lot Vladimir, works great!