0

I am having trouble in calling typescript method on button click in SPFx with no JavaScript framework.

for Example:

private _renderListCustomer(items:ISPListCustomerItem[]):void{

   let html:string=`<table width='100%' border=1 id="tblEmployees" class="table">`;

   html+=`<thead>

          <th scope="col">Customer Id</th>

          <th scope="col">Name</th>

          <th scope="col">Address</th>

          <th scope="col">Type</th>

          <th scope="col">Update</th>

       </thead><tbody>`;

debugger;

type NewType = ISPListCustomerItem;

items.forEach((item:NewType)=>

{

html+= `<tr>

          <td>${item.CustomerID}</td>

          <td>${item.CustomerName}</td>

          <td>${item.CustomerAddress}</td>

          <td>${item.CustomerType}</td>

          <td><button id="${item.ID}" item-id="${item.ID}" type="submit" class="update btn btn-primary" data-toggle="modal" onClick=${this.BindItem(item.ID)} data-target="#DivUpdateItem">Update</button></td>

        </tr>`;

});



html+=`</tbody></table>`;

const listContainer:Element=this.domElement.querySelector("#spListContainer");

listContainer.innerHTML=html;

}

Method to called 


// Id:number

public BindItem(id:number):void{

pnp.sp.web.lists.getByTitle("Customers").items.getById(id).select("*,CustType/Id,CustType/CType").expand("CustType").get().

then((item:ISPListCustomerItem)=>{console.log(item); 

   document.getElementById('txtTitleUpdate')["value"]=item.Title ,

   document.getElementById('txtCustomerIDUpdate')["value"]=item.CustomerID,

   document.getElementById('txtCustomerAddressUpdate')["value"]=item.CustomerAddress,

   document.getElementById('txtCustomerNameUpdate')["value"]=item.CustomerName,

   document.getElementById('txtCustomerTypeUpdate')["value"]=item.CustomerType,

   document.getElementById('ddlCustTypeUpdate')["value"]=item.CustType.ID}).

 catch((error)=>{ alert(error); error; })

}

But method is not getting called on button click.

Any help would be appreciated, thanks in advance.

  • have you tried using type="button" instead of type="submit"? – Ganesh Sanap Jan 31 at 7:36
  • Are you getting any error in console? If yes, please add an error message you are getting. – Ganesh Sanap Jan 31 at 7:41
  • No i am not getting any exception in console. – nitin chaudhary Jan 31 at 9:34
0

Try the code below: (Not a good practice to repeat loops but it was the only thing working for me)

private _renderListCustomer(items:ISPListCustomerItem[]):void{

    let html:string=`<table width='100%' border=1 id="tblEmployees" class="table">`;

    html+=`<thead>

      <th scope="col">Customer Id</th>

      <th scope="col">Name</th>

      <th scope="col">Address</th>

      <th scope="col">Type</th>

      <th scope="col">Update</th>

   </thead><tbody>`;

    debugger;

    type NewType = ISPListCustomerItem;

    items.forEach((item:NewType)=>

    {

    html+= `<tr>

          <td>${item.CustomerID}</td>

          <td>${item.CustomerName}</td>

          <td>${item.CustomerAddress}</td>

          <td>${item.CustomerType}</td>

          <td><button id="btn${item.ID}" item-id="${item.ID}" type="submit" class="update btn btn-primary" data-toggle="modal" data-target="#DivUpdateItem">Update</button></td>

        </tr>`;

    });



    html+=`</tbody></table>`;

    const listContainer:Element=this.domElement.querySelector("#spListContainer");

    listContainer.innerHTML=html;

    this._setButtonEventHandlers(items);
}

//Method to called 


// Id:number

public BindItem(id:number):void{ pnp.sp.web.lists.getByTitle("Customers").items.getById(id).select("*,CustType/Id,CustType/CType").expand("CustType").get().

then((item:ISPListCustomerItem)=>{console.log(item); 

   document.getElementById('txtTitleUpdate')["value"]=item.Title ,

   document.getElementById('txtCustomerIDUpdate')["value"]=item.CustomerID,

   document.getElementById('txtCustomerAddressUpdate')["value"]=item.CustomerAddress,

   document.getElementById('txtCustomerNameUpdate')["value"]=item.CustomerName,

   document.getElementById('txtCustomerTypeUpdate')["value"]=item.CustomerType,

   document.getElementById('ddlCustTypeUpdate')["value"]=item.CustType.ID}).

catch((error)=>{ alert(error); error; })

}

//function to bind on click event
private _setButtonEventHandlers(items): void {  
    const webPart: SpfxNoJswpWebPart = this; //replace SpfxNoJswpWebPart with your webpart class name
    items.forEach((item)=>{
    this.domElement.querySelector('#btn'+item).addEventListener('click', () => {  
        this.BindItem(item.ID);    
      }); 
    });
}
| improve this answer | |
  • It worked for me. thank you very much @harshal – nitin chaudhary Feb 3 at 7:55
0

This might be a better approach to add event listener in a single loop.

private _renderListCustomer(items:ISPListCustomerItem[]):void{
  let html:string=`<table width='100%' border=1 id="tblEmployees" class="table">`;
  html+=`<thead>
            <th scope="col">Customer Id</th>
            <th scope="col">Name</th>
            <th scope="col">Address</th>
            <th scope="col">Type</th>
            <th scope="col">CustType</th>
            <th scope="col">Select To Delete</th>
            <th scope="col">Update</th>
         </thead>
          <tbody id="tblEmployeesBody">
          </tbody>
        </table>`
  const listContainer:Element=this.domElement.querySelector("#spListContainer");
  listContainer.innerHTML=html;
  type NewType = ISPListCustomerItem;

  var i=0;
  items.forEach((item:NewType)=>
  {
      html='';
      html+= `<tr>
                <td>${item.CustomerID}</td>
                <td>${item.CustomerName}</td>
                <td>${item.CustomerAddress}</td>
                <td>${item.CustomerType}</td>
                <td>${item.CustType?item.CustType.CType:""}</td>
                <td><input type="checkbox" id="${item.ID}"/></td>
                <td><button id="btn${item.ID}" item-id="btn${item.ID}" type="button" class="update btn btn-primary" data-toggle="modal"  data-target="#DivUpdateItem">Update</button></td>
              </tr>`;
      const tbody:HTMLTableElement  =this.domElement.querySelector("#tblEmployeesBody");
      let row = tbody.insertRow(i);
      row.innerHTML=html;
      i++;
      this._setButtonEventHandlers(item);
  });
 }

 private _setButtonEventHandlers(item:ISPListCustomerItem): void {  
  //const webPart: GetListItemsWebPart = this; //replace SpfxNoJswpWebPart with your webpart class name
  type NewType = ISPListCustomerItem;
  this.domElement.querySelector("#btn"+item.ID).addEventListener('click', () => {  
      this.BindItem(item.ID);    
    }); 
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.