This is a migrated thread and some comments may be shown as answers.

kendomobilelistview button click event fire twice

0 Answers 302 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 25 Oct 2012, 09:25 AM
Hi,

i am facing some stupid problem. i have try lots other way but i am not getting success.

i am using kendomobilelistview with template binding with $.ajax every thing working fine but button click event fire on time then if refresh data(using endlessScroll) then button event fire twice and again refresh listview then click on button then fire three time event. if we do same process again then again fire 4 event. 

if refresh list view then continue increase  event again and again.

dataSource with service 
var JobActionItemDataSource = new kendo.data.DataSource({
    pageSize: 15,
    serverPaging: true,
    transport: {
        read: function (options) {
            window.kendoMobileApplication.showLoading();
            $.ajax({
                url: urlstring + "GetJobTaskByEmployeeID",
                data: {
                    UserID: JSON.stringify(localStorage.getItem("AuthorizedUserId")),
                    CompanyType: JSON.stringify($('#radio_Marketing').attr('checked') ? 1 : 0),
                    PageSize: options.data.pageSize,
                    PageNumber: JobActionItemPageIndex
                },
                dataType: "jsonp",
                success: function (result) {
                    options.success(result.d);
                    JobActionItemPageIndex += 1;
                }
            });
        },
 
        data: function (response) {
            alert(response.d);
            return response.d;
        }
    }
});

init function 
// view design here
  <div data-role="view" data-title="Action items" id="view-actionitems" data-init="init_ActionItemsLanding"
        data-show="show_ActionItemsLanding">
        <header data-role="header">
        <div>
          <img  src="img/CompanyLogo.png" width="100px" height="34px" />
           <a class="km-rightitem" data-rel="popover" href="#popover-actionitems" data-role="button">Jump To</a>
          <a class="km-rightitem" data-click="Logout" data-role="button">Logout</a>
        </div>
        
      </header>
        <ul id="endlessscrolling-JobActionItemsBinding">
        </ul>
</div>
/// script code
 <script id="endlessscrolling-JobActionItemsBinding-template" type="text/x-kendo-template">
       <div class="tweet">
            <div class="notesmessage">
              <span >
              #if(JobID!=0){#
              <div> <a  id="WorkFlowTaskId=#=WorkFlowTaskId#&RequiredCompletionActionID=#=RequiredCompletionActionID#&JobID=#=JobID#&TaskID=#=TaskID#" data-role="button" class="km-button" data-click="GoActionitemcompleteevent"
                style="width:auto; background: none repeat scroll 0 0 transparent;box-shadow: none;color: blue;margin-left: 0;text-decoration:underline;padding: 5px;width: auto;text-align: left;" >#= Task #</a></div>
              <br/>
              #=DueTimeFrameColorFormat#
              #} else{#
                #= Task # <br/>
              #}#
              #= DueTimeFrame # </span>
                <div style="text-align: center;">
                #if(JobID!=0){#
               <a  id="#=JobID#" data-role="button" data-click="job_jobdetails" style="width:145px;padding: 5px;" >#= JobNumber # </a>
               <a  name="0" id="WorkFlowTaskId=#=WorkFlowTaskId#&RequiredCompletionActionID=#=RequiredCompletionActionID#&JobID=#=JobID#&TaskID=#=TaskID#" data-role="button" data-click="GoActionitemcompleteevent" style="width:70px;padding: 5px;" >Complete</a>
              <br/> #}#
                
               <a id="#=CustomerID#&Type=#=CustomerType#" data-role="button" data-click="GotoViewContactInformation" style="width:145px;padding: 5px;" ><span style="font-size: 0.8em; font-style:italic;">#= EmployeeName #</span></a>
               #if(JobID!=0){#
 
               <a  id="ID=#=JobID#&JobNumber=#=JobNumber#" data-role="button"   data-click="GoToViewJobAddActionItems" style="width:70px;padding: 5px;" >Add</a>
                #}else{#
                <a  id="ID=#=CustomerID#&Type=#=CustomerType#&ContactName=#=EmployeeName#" data-role="button"   data-click="GoToViewAddMarketingActionItem" style="width:70px;padding: 5px;" >Add</a>
                #}#
               </div>
            </div>
      </div>
    </script>
 
 
// init function
function init_ActionItemsLanding(e) {
    $("#endlessscrolling-JobActionItemsBinding").kendoMobileListView({
        dataSource: JobActionItemDataSource,
        template: kendo.template($("#endlessscrolling-JobActionItemsBinding-template").text()),
        endlessScroll: true,
        scrollTreshold: 30
    });
}
 
// show funciton
   JobActionItemPageIndex = 1;
    var refreshJobActionItems = $("#endlessscrolling-JobActionItemsBinding").data("kendoMobileListView");
    refreshJobActionItems.dataSource.read(1);
    refreshJobActionItems.refresh();

thanks,

Raghw
 

 

No answers yet. Maybe you can help?

Tags
ListView (Mobile)
Asked by
Nick
Top achievements
Rank 1
Share this question
or