CODEWITHSUNDEEP
javascriptjqueryhtml
Siddharth
Siddharth

Reputation: 9574

onClick not called for button (html)

My html fragmentRow is as below, which has a <a> and a 

<a href="onLoadShowRoutesView?routeIdnpk=${param.routeIdnpk}">
  <div class="col-md-4 pull-right">
    <input type="button" class="btn btn-small btn-default btn-flat pull-right" value="${param.publishOrUnPublishValue}"
        name="${param.publishOrUnPublishName}"
        id="${param.publishOrUnPublishName}"
        onclick="${param.publishOrUnPublishOnClick}"
        data-val="${param.routeIdnpk}" style="margin-top: 6px;">
  </div>                        
</a>

I am including fragmentRow.jsp like this

<jsp:include page="fragmentListRouteItem.jsp">
  <jsp:param name="routeIdnpk"
    value="${childRouteViewPojo.routeIdnpk}" />
  <jsp:param name="publishOrUnPublishValue" value="Publish" />
  <jsp:param name="publishOrUnPublishName" value="Publish" />
  <jsp:param name="publishOrUnPublishOnClick" value="onPublish" />
</jsp:include>

And I have a ajax that is called onclick of the button

$('#unPublish').click(
  function() {
    var routeIdnpk = $(this).prev().val();
    $.ajax({
      type : "Get",
      url : "unpublishRoute",
      data : {
        routeIdnpk : routeIdnpk 
      },
      success : function(response) {
        response = successAction(response);
      },
      error : function(e) {
        ajaxGlobalErrorResponseWithTitleAndMessage("Unable to Unpublish",
      "The unpublish operation failed, please try again");
      }
    });
  });

When I click on the button, onLoadShowRoutesView gets called instead of $('#unPublish').click(

I have tried $('#unPublish').click( and onClick="unPublish", function unPublish() too. Still the href of <a> gets called. Is there a way to override the main div <a href> and instead call the caller of the button on click ?

I have read thru this, and other links too. But unable to find a fix for the issue.

Now I know I am missing something very basic here.

Edit 1 : I have tried

<div onclick="location.href='onLoadShowRoutesView?routeIdnpk=${param.routeIdnpk}';">

Still the onLoadShowRoutesView gets called even when I click the button

Edit 2 @zakaria-acharki : I also added 

function onUnPublish () {
    var routeIdnpk = $(this).prev().val();

            $.ajax({
        }) ;
}

function publish () {
    var routeIdnpk = $(this).prev().val();
    $.ajax({
        }) ;
}

Yet same result

Upvotes: 1

Views: 98

Answers (2)

Siddharth
Siddharth

Reputation: 9574

With help from @zakaria-acharki, What worked for me was the below. Some typos and 'ondblclick' with the parent div

1

$('#unPublish').click(
        function() {
            var routeIdnpk = $(this).val();
            $.ajax({

        });
$('#Publish').click(
        function() {
            var routeIdnpk = $(this).val();
            $.ajax({

        });

2

<button type="button"
        class="btn btn-small btn-default btn-flat pull-right"
        value="${param.routeIdnpk}"
        name="${param.publishOrUnPublishName}"
        id="${param.publishOrUnPublishName}" style="margin-top: 6px;">${param.publishOrUnPublishValue}</button>

3

<div
    ondblclick="location.href='onLoadShowRoutesView?routeIdnpk=${param.routeIdnpk}';">

EDIT

$('#unPublish').click( works only for the first button

$('button[name="unPublish"]').click(function(){ this worked for all the buttons

Today : I learnt the value of button[name="something"]

Upvotes: 1

Michael Chandra Lrc
Michael Chandra Lrc

Reputation: 49

try edit your code a little bit like this

<a href="javascript:void(0);" onclick="yourFunction()"></a>

you can add your onclick function on your element or adding the function dynamically

Upvotes: 0

Related Questions