locked
How to pass button parameter to a function RRS feed

  • Question

  • User1263547581 posted

    Dear all,

    I have a button which is define as below

    "<input id='btnSyncNow' class='btn btn-info' type='button' value='Sync Now' data-DeviceID ='" + element.DeviceID + "' />"

    When the button is clicked, I should call the function below by passing as parameter the data_DeviceID value

    function SetSyncProduct(devID) {
    		$.ajax({
    			url: ServerBaseURL + "device/SetSyncDevice",
    			data: { deviceId: devID },
    				type: 'POST',
    				beforeSend: showLoader,
    				complete: hideLoader,
    				success: function (returnData) {
    					if (returnData.DeletedSuccessfully) {
    						//showSaveMessage("divProdDeleteSuccess");
    					}
    					else {
    						//showSaveMessage("divProdDeleteFailureServer");
    					}
    				},
    				failure: function (xhr) {
    					//showSaveMessage("divProdDeleteFailureNW");
    				}
    			});
    		
    	}

    How can pass this parameter and call the function on click ?

    Thanks for help

    regards

    Wednesday, January 4, 2017 8:02 AM

Answers

  • User527778624 posted

    Hi,

    Since your buttons are added to document after ajax success response, you should not register their click events in document ready.

    But should be registered after buttons are added to document.

    or, try using live() instead of on() in document ready.

    http://api.jquery.com/live/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 4, 2017 5:53 PM

All replies

  • User-1393433442 posted

    Hi,

    You can use following code to pass button parameter in function.

    $('#btnSyncNow').click(function () {
        var deviceId = $(this).attr('data-DeviceId');
                    SetSyncProduct(deviceId)
    });

    Thanks

    Wednesday, January 4, 2017 10:08 AM
  • User1263547581 posted

    Hello, I try what you sugest but the button click event is not fired.

    Here is is teh full code where the button HTML is build. In fact It generate 3 différents buttons with same Id but each button are identified by the parameter

    $.ajax({
    				type: "GET",
    				url: ServerBaseURL + "device/DeviceList",
    				//contentType: "application/json; charset=utf-8",
    				dataType: "json",
    				success: function (data) {
    					if (data.UpdatedSuccessfully == true) {
    
    							//alert("ok");
    							//alert(data.result[0].DeviceID);
    							var html = "<table class='table table-bordered'><tr>"
    
    							//using each function to loop through the device list.
    							$.each(data.result, function (index, element) {
    								//alert(element.DeviceName);
    
    								html += "<td  style='text-align:center'>" +
    							"<img style='width:auto; height:50px' src='@Url.Content("/assets/Devices/device.png")'/> <br />" +
    							//"<img style='width:auto; height:50px'  src='" + element.Image + "' /> <br />" +
    							"<span> Id :" + element.DeviceID + "</span><br />" +
    							"<span> Name :" + element.DeviceName + "</span><br />" +
    							"<span> Ip :" + element.IpAdress + "</span><br />" +
    							"<span> OS :" + element.OperatingSystem + "</span><br />" +
    							"<span> Type :" + element.SystemType + "</span><br />" +
    							"<span> Last Sync :" + element.LastLiveDateTimeToString + "</span><br />" +
    							"<span> Alive :" + element.IsAlive + "</span><br /><br />" +
    					=====>>>>	"<input id='btnSyncNow' class='btn btn-info' type='button' value='Sync Now' data-DeviceID ='" + element.DeviceID + "' />" +
    							"</td>";
    							if (index % 3 == 2) {
    								html+="</tr><tr>"
    							}
    							alert(html);
    							});
    							html += "</table>"
    							$("#div_device").append(html);
    
    					}
    				},
    				error: function (r) {
    					alert("Error");
    				}

    Then I call the method when document is ready

    $('#btnSyncNow').on("click", function () {
    			var deviceId = $(this).attr('data-DeviceID');
    			alert(deviceId);
    			SetSyncProduct(deviceId)
    		});

    I place an Alert to check if I get correctly the proper click button, but the click event is not fired.

    Any idea ?

    regards

    Wednesday, January 4, 2017 2:40 PM
  • User527778624 posted

    Hi,

    Since your buttons are added to document after ajax success response, you should not register their click events in document ready.

    But should be registered after buttons are added to document.

    or, try using live() instead of on() in document ready.

    http://api.jquery.com/live/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 4, 2017 5:53 PM
  • User1263547581 posted

    Hello

    I replace .on by .live for my handler and now event is fired correctly

    thnaks for help

    Wednesday, January 4, 2017 6:18 PM