asked on

Create click event

Hi,
To the list of this

http://my-friend.co/Test_rec4/Default.aspx?userid=mc23

how to create click event to record/row, to further go to other URL?

HainKurt

question is not clear...

Peter Chan

ASKER

Good day Huseyin,
To the row/record, I want to have click event and after one click to any field of the row/record, it would go to other URL.

HainKurt

which row? House name row?

House Name: 太古城一期三座

Peter Chan

ASKER

Yes.

HainKurt

first of all make colspan=3 and give a class to this row

<tr><td>House Name: </td><td>太古城一期三座</td></tr>
>>>
<tr class="houserow"><td>House Name: </td><td colspan=3>太古城一期三座</td></tr>

Open in new window

and add a css

.houserow{
cursor:pointer
}

Open in new window

then

$("#houses .houserow").on("click",function(){
  alert($(this).find("td :nth-child(2)").html());
});

Open in new window

Peter Chan

ASKER

Thanks a lot.
How to go to one given URL?

HainKurt

what url? where is the url?
and how is this url formed based on clicked row?

Peter Chan

ASKER

For instance, to go to

http://my-friend.co/RegRec2?id=18&user_abbr=mc2&readonly=y

HainKurt

where are those parameters coming from?

if you add another column here

<tr class="houserow">
<td>House Name: </td>
<td colspan=2>太古城一期三座</td>
<td>XXXXX</td>
</tr>

Open in new window

where XXXXX is id of house, then

$("#houses .houserow").on("click",function(){
  //alert($(this).find("td :nth-child(2)").html());
  id = $(this).find("td :nth-child(3)").html();
  url = "http://my-friend.co/RegRec2?id=" +  id + "&user_abbr=mc2&readonly=y";
  window.location.href=url;
});

Open in new window

HainKurt

or you can embed house id into tr, if you dont want to show any id on page

<tr class="houserow" data-id="XXXXX">
<td>House Name: </td>
<td colspan=3>太古城一期三座</td>
</tr>

Open in new window

$("#houses .houserow").on("click",function(){
  //alert($(this).find("td :nth-child(2)").html());
  id = $(this).data("id");
  url = "http://my-friend.co/RegRec2?id=" +  id + "&user_abbr=mc2&readonly=y";
  window.location.href=url;
});

Open in new window

Peter Chan

ASKER

Sorry, how to add class part below?

                html += "<tr class=""houserow""><td>House Name: </td><td>" + house.house_name + "</td></tr>";

Open in new window

HainKurt

use single ' for simplicity

html += "<tr class='houserow'><td>House Name: </td><td>" + house.house_name + "</td></tr>";

Open in new window

or,

not sure what language you are using, but you may need escape if double "" is not working, like

html += "<tr class=\"houserow\"><td>House Name: </td><td>" + house.house_name + "</td></tr>";

Open in new window

Peter Chan

ASKER

Hi,
I applied your codes to the row/record but it still does not go to relevant url, after having clicked (or double-clicked) the row, while I did do the re-deployment.

HainKurt

<tr class="houserow"><td>House Name: </td><td>太古城一期三座</td></tr>

Open in new window

I dont see "colspan=3", no "data-id='XXXXX'", no js to attach events...

check ID: 42195339

Peter Chan

ASKER

Hi,
Here are the codes

.houserow{
cursor:pointer
}
...
$("#houses .houserow").on("click", function () {
    //alert($(this).find("td :nth-child(2)").html());
    id = $(this).data("id");
    url = "http://my-friend.co/RegRec2?id=" + id + "&user_abbr=mc2&readonly=y";
    window.location.href = url;
});

function showData() {
    $.ajax({
        type: 'POST',
        url: 'Default.aspx/GetHouseList',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (response) {
            var html = "";
            html += "<table style='width:70%' class='table table-responsive table-striped table-hover'>";
            $.each(response.d, function (index, house) {
                html += "<tr class='houserow'><td>House Name: </td><td>" + house.house_name + "</td></tr>";
                html += "<tr class='houserow'><td>Address 1: </td><td>" + house.address1 + "</td>";
                html += "<td>Address 2: </td><td>" + house.address2 + "</td></tr>";
                html += "<tr class='houserow' style='border-bottom: solid 5px #ebebeb'><td>Price: </td><td>" + house.price_curr + "</td><td>" + house.price + "</td>";
                var img = (house.house_name != "") ? "<img width='150' height='150' src='ImageHandler.ashx?ImID=" + house.raised_by_user_id + "' />" : "";
                html += "<td style='border-bottom: solid 5px #ebebeb' rowspan='3'>" + img + "</td></tr>";
            });
            ...

Open in new window

I already put to the css and javascript files and I did do re-deployment already, while nothing happens when I double-click any field of the row.

HainKurt

you need to wrap it with jQuery DOM ready as

$(function () {
  // line 5-10 here
});

Open in new window

and Line 22-23

html += "<tr class='houserow' data-id='" + house.house_id + "'><td>House Name: </td><td colspan=3>" + house.house_name + "</td></tr>";
html += "<tr><td>Address 1: </td><td>" + house.address1 + "</td>";

Open in new window

class='houserow' will be on just on the row where house name exists

I am not sure about, house.house_id, put house id column here

HainKurt

also, put all functions inside one jQuery ready function as

function testKeyCode(e) {
  var keycode;
  if (window.event) keycode = window.event.keyCode;
  else if (e) keycode = e.which;
  var e = e || window.event;
  //alert(keycode);

  if (keycode == 37 && e.altKey) {
    CallButtonClick2();
    window.history.back();
  }
}

document.onkeydown = testKeyCode;

function CallButtonClick2() {
  document.getElementById('bt_temp').click();
}

function closeMe() {
  var win = window.open("", "_self");
  win.close();
}

function closePopup0() {
  $("div[id$='Panel_Msg']").dialog("close");
}

function openPopup0() {
  $("div[id$='Panel_Msg']").dialog("open");
}

function closePopup() {
  $("#myPanel").dialog("close");
}

function openPopup() {
  $("#myPanel").dialog("open");
}

function closePopup2() {
  $("#myPanel2").dialog("close");
}

function openPopup2() {
  $("#myPanel2").dialog("open");
}

function closePopup3() {
  $("#Panel3").dialog("close");
}

function openPopup3() {
  $("#Panel3").dialog("open");
}

function openPopup4() {
  $("#Panel4").dialog("open");
}

function closePopup4() {
  $("#Panel4").dialog("close");
}

function buttonClientClick() {
  alert('Button Clicked');
}

function ShowPanel() {
  //Get the panel control
  var pnlControl = document.getElementById("Panel1");
  //Set the visibility to visible
  pnlControl.style.visibility = "visible";
  return false;
}

function showData() {
  $.ajax({
    type: 'POST',
    url: 'Default.aspx/GetHouseList',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(response) {
      var html = "";
      html += "<table style='width:70%' class='table table-responsive table-striped table-hover'>";
      $.each(response.d, function(index, house) {
        html += "<tr class='houserow'><td>House Name: </td><td>" + house.house_name + "</td></tr>";
        html += "<tr class='houserow'><td>Address 1: </td><td>" + house.address1 + "</td>";
        html += "<td>Address 2: </td><td>" + house.address2 + "</td></tr>";
        html += "<tr class='houserow' style='border-bottom: solid 5px #ebebeb'><td>Price: </td><td>" + house.price_curr + "</td><td>" + house.price + "</td>";
        var img = (house.house_name != "") ? "<img width='150' height='150' src='ImageHandler.ashx?ImID=" + house.raised_by_user_id + "' />" : "";
        html += "<td style='border-bottom: solid 5px #ebebeb' rowspan='3'>" + img + "</td></tr>";
      });
      if (html != "")
        $("#houses").html(html);
    },
    error: function(response) {
      alert(response.d);
    }
  });
};


// all jQuery DOM ready functions here
$(function() {

  $("div[id$='Panel_Msg']").dialog({
    autoOpen: false,
    autoResize: true,
    resizable: false,
    title: "Error",
    appendTo: "form"
      //open: function (event, ui) {
      //    $(this).parent().appendTo("form");		//allow .Net buttons to post back
      //}
  });

  $("#myPanel").dialog({
    autoOpen: false,
    autoResize: true,
    resizable: false,
    title: "Confirmation",
    open: function(event, ui) {
      $(this).parent().appendTo("form"); //allow .Net buttons to post back
    }
  });

  $("#myPanel2").dialog({
    autoOpen: false,
    autoResize: true,
    resizable: false,
    title: "Confirmation",
    open: function(event, ui) {
      $(this).parent().appendTo("form"); //allow .Net buttons to post back
    }
  });

  $("#Panel3").dialog({
    autoOpen: false,
    autoResize: true,
    resizable: false,
    title: "Confirmation",
    open: function(event, ui) {
      $(this).parent().appendTo("form"); //allow .Net buttons to post back
    }
  });

  $("#Panel4").dialog({
    autoOpen: false,
    autoResize: true,
    resizable: false,
    title: "Rejection",
    open: function(event, ui) {
      $(this).parent().appendTo("form"); //allow .Net buttons to post back
    }
  });

  var btn = $('#testButton');
  var pnlControl = $("#panelDiv");

  btn.click(function() {
    pnlControl.toggle();
    return false;
  });

  var btn = $('#bt_remove');
  var pnlControl = $("#panelDiv");

  btn.click(function() {
    pnlControl.toggle();
    return false;
  });

  showData();

  $("#houses .houserow").on("click", function() {
    //alert($(this).find("td :nth-child(2)").html());
    id = $(this).data("id");
    url = "http://my-friend.co/RegRec2?id=" + id + "&user_abbr=mc2&readonly=y";
    window.location.href = url;
  });
});

Open in new window

see line 104-105 and 182

SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Peter Chan

ASKER

Here are the current codes

$(function () {
    $("#houses .houserow").on("click", function () {
        //alert($(this).find("td :nth-child(2)").html());
        id = $(this).data("id");
        url = "http://my-friend.co/RegRec2?id=" + id + "&user_abbr=mc2&readonly=y";
        window.location.href = url;
    });
});

function showData() {
    $.ajax({
        type: 'POST',
        url: 'Default.aspx/GetHouseList',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (response) {
            var html = "";
            html += "<table style='width:70%' class='table table-responsive table-striped table-hover'>";
            $.each(response.d, function (index, house) {
                html += "<tr class='houserow'><td>House Name: </td><td>" + house.house_name + "</td></tr>";
                html += "<tr class='houserow'><td>Address 1: </td><td>" + house.address1 + "</td>";
                html += "<td>Address 2: </td><td>" + house.address2 + "</td></tr>";
                html += "<tr class='houserow' style='border-bottom: solid 5px #ebebeb'><td>Price: </td><td>" + house.price_curr + "</td><td>" + house.price + "</td>";
                var img = (house.house_name != "") ? "<img class='imgHouse' width='150' height='150' src='ImageHandler.ashx?ImID=" + house.raised_by_user_id + "' />" : "";
                html += "<td style='border-bottom: solid 5px #ebebeb' rowspan='3'>" + img + "</td></tr>";
            });

Open in new window

after having done re-deployment, it still cannot go to relevant url when I do double-click any field of the row.

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Peter Chan

ASKER

Sorry, here are current codes

function showData() {
    $.ajax({
        type: 'POST',
        url: 'Default.aspx/GetHouseList',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (response) {
            var html = "";
            html += "<table style='width:70%' class='table table-responsive table-striped table-hover'>";
            $.each(response.d, function (index, house) {
                html += "<tr class='houserow'><td>House Name: </td><td>" + house.house_name + "</td></tr>";
                html += "<tr class='houserow'><td>Address 1: </td><td>" + house.address1 + "</td>";
                html += "<td>Address 2: </td><td>" + house.address2 + "</td></tr>";
                html += "<tr class='houserow' style='border-bottom: solid 5px #ebebeb'><td>Price: </td><td>" + house.price_curr + "</td><td>" + house.price + "</td>";
                var img = (house.house_name != "") ? "<img class='imgHouse' width='150' height='150' src='ImageHandler.ashx?ImID=" + house.raised_by_user_id + "' />" : "";
                html += "<td style='border-bottom: solid 5px #ebebeb' rowspan='3'>" + img + "</td></tr>";
            });
            $("#houses .houserow").on("click", function () {
                //alert($(this).find("td :nth-child(2)").html());
                id = $(this).data("id");
                url = "http://my-friend.co/RegRec2?id=" + id + "&user_abbr=mc2&readonly=y";
                window.location.href = url;
            });
            if (html != "")
                $("#houses").html(html);
        },
        error: function (response) {
            alert(response.d);
        }
    });
}

Open in new window

but it still does not work as expected, after re-deployment.

HainKurt

your data is like this

{"d":[
{"__type":"Own_rec.HouseData","house_name":"太古城一期三座","address1":"东区太古城道三号","address2":"","price":20000.00,"price_curr":"港币","raised_by_user_id":"12"}
]}

Open in new window

so there is no unique identifier to determine what the house is...
so, I am not sure how url will be constructed!

and still I dont see all of my suggestions in your js file!
you partially added them...

replace javascript1js with this one

function testKeyCode(e) {
  var keycode;
  if (window.event) keycode = window.event.keyCode;
  else if (e) keycode = e.which;
  var e = e || window.event;
  //alert(keycode);

  if (keycode == 37 && e.altKey) {
    CallButtonClick2();
    window.history.back();
  }
}

document.onkeydown = testKeyCode;

function CallButtonClick2() {
  document.getElementById('bt_temp').click();
}

function closeMe() {
  var win = window.open("", "_self");
  win.close();
}

function closePopup0() {
  $("div[id$='Panel_Msg']").dialog("close");
}

function openPopup0() {
  $("div[id$='Panel_Msg']").dialog("open");
}

function closePopup() {
  $("#myPanel").dialog("close");
}

function openPopup() {
  $("#myPanel").dialog("open");
}

function closePopup2() {
  $("#myPanel2").dialog("close");
}

function openPopup2() {
  $("#myPanel2").dialog("open");
}

function closePopup3() {
  $("#Panel3").dialog("close");
}

function openPopup3() {
  $("#Panel3").dialog("open");
}

function openPopup4() {
  $("#Panel4").dialog("open");
}

function closePopup4() {
  $("#Panel4").dialog("close");
}

function buttonClientClick() {
  alert('Button Clicked');
}

function ShowPanel() {
  //Get the panel control
  var pnlControl = document.getElementById("Panel1");
  //Set the visibility to visible
  pnlControl.style.visibility = "visible";
  return false;
}

function showData() {
  $.ajax({
    type: 'POST',
    url: 'Default.aspx/GetHouseList',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(response) {
      var html = "";
      html += "<table style='width:70%' class='table table-responsive table-striped table-hover'>";

      $.each(response.d, function(index, house) {
        var img = (house.house_name != "") ? "<img class='imgHouse' src='ImageHandler.ashx?ImID=" + house.raised_by_user_id + "' />" : "";

        html += "<tr class='houserow' data-id='" + house.house_name + "'>";
        html += "<td>House Name: </td><td colspan=3>" + house.house_name + "</td>";
        html += "<td>" + img + "</td>"
        html += "</tr>";

        html += "<tr>";
        html += "<td>Address 1: </td><td>" + house.address1 + "</td>";
        html += "<td>Address 2: </td><td>" + house.address2 + "</td>";
        html += "</tr>";

        html += "<tr>";
        html += "<td>Currency: </td><td>" + house.price_curr + "</td>";
        html += "<td>Price: </td><td>" + house.price + "</td>";
        html += "</tr>";
      });

      $("#houses").html(html);
      $("#houses .houserow").on("click", function() {
        //alert($(this).find("td :nth-child(2)").html());
        id = $(this).data("id");alert(id);
        url = "http://my-friend.co/RegRec2?id=" + id + "&user_abbr=mc2&readonly=y";
        window.location.href = url;
      });

    },
    error: function(response) {
      alert(response.d);
    }
  });
};


// all jQuery DOM ready functions here
$(function() {

  $("div[id$='Panel_Msg']").dialog({
    autoOpen: false,
    autoResize: true,
    resizable: false,
    title: "Error",
    appendTo: "form"
      //open: function (event, ui) {
      //    $(this).parent().appendTo("form");		//allow .Net buttons to post back
      //}
  });

  $("#myPanel").dialog({
    autoOpen: false,
    autoResize: true,
    resizable: false,
    title: "Confirmation",
    open: function(event, ui) {
      $(this).parent().appendTo("form"); //allow .Net buttons to post back
    }
  });

  $("#myPanel2").dialog({
    autoOpen: false,
    autoResize: true,
    resizable: false,
    title: "Confirmation",
    open: function(event, ui) {
      $(this).parent().appendTo("form"); //allow .Net buttons to post back
    }
  });

  $("#Panel3").dialog({
    autoOpen: false,
    autoResize: true,
    resizable: false,
    title: "Confirmation",
    open: function(event, ui) {
      $(this).parent().appendTo("form"); //allow .Net buttons to post back
    }
  });

  $("#Panel4").dialog({
    autoOpen: false,
    autoResize: true,
    resizable: false,
    title: "Rejection",
    open: function(event, ui) {
      $(this).parent().appendTo("form"); //allow .Net buttons to post back
    }
  });

  var btn = $('#testButton');
  var pnlControl = $("#panelDiv");

  btn.click(function() {
    pnlControl.toggle();
    return false;
  });

  var btn = $('#bt_remove');
  var pnlControl = $("#panelDiv");

  btn.click(function() {
    pnlControl.toggle();
    return false;
  });

  showData();
});

Open in new window

and add imgHouse to css

.imgHouse{
  width:150px;
  height:150px;
  border-bottom: solid 5px #ebebeb
}

Open in new window

SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HainKurt

* you did not add my imgHouse css
* you should add class="houserow" only to the first row

but anyways...

Peter Chan

ASKER

Hi Huseyin,
If possible, can you please see this

https://www.experts-exchange.com/questions/29041020/Adjust-place-of-picture-file.html