JS disable click

Hello,

I have a website where a list of orders, an initial order status is "Pending Validation" then it changes when admin approves it.

When you click on an order, it will take you to the order information such as Shipping Address, of course the seller will not ship yet if the status isn't change, but I would like to make it more professional to not let them click until that status change

I would like to disable the click on order when its status is in "Pending Validation" with JS



Take a look at screenshot
C1.JPG
thebest8Asked:
Who is Participating?
 
Michael VasilevskySolutions ArchitectCommented:
and beautified:
$(document).ready(function(){
  $(".mp_order_row").on("click", function() {
    var id_order = $(this).attr('is_id_order');
    var orderStatusIsPending = $(this).is(':contains("Pending Validation")');
    if (orderStatusIsPending) {
      alert('Order Processing, please try again later. Order ID: ' + id_order);
    } else {    
      if (friendly_url) {
        window.location.href = mporderdetails_link+'?id_order='+id_order;			
      } else {
        window.location.href = mporderdetails_link+'&id_order='+id_order;
      }
    }
  });
  $('#my-orders-table').DataTable({
    "language": {
      "lengthMenu": display_name+" _MENU_ "+records_name,
      "zeroRecords": no_product,
      "info": show_page+" _PAGE_ "+ show_of +" _PAGES_ ",
      "infoEmpty": no_record,
      "infoFiltered": "("+filter_from +" _MAX_ "+ t_record+")",
      "sSearch" : search_item,
      "oPaginate": {
        "sPrevious": p_page,
        "sNext": n_page
      }
    },
    "order": [[ 0, "desc" ]]
  });

  $('select[name="my-orders-table_length"]').addClass('form-control-select');
});

Open in new window

1
 
Michael VasilevskySolutions ArchitectCommented:
Vanilla JS:

document.getElementById("myButton").disabled = true;

Open in new window

jQuery:

$("#myButton").prop("disabled",true);

Open in new window

0
 
thebest8Author Commented:
Thanks but can you explain more I don't have any experience with JS actually, you are mentioning myButton, can you tell me how to implement this properly
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
Michael VasilevskySolutions ArchitectCommented:
This expert suggested creating a Gigs project.
Since you don't have any experience with JavaScript, I'm going to suggest this for a Gig. It sounds like something someone could do for you relatively easily, but it's going to take some time to understand your code - particularly when/how status changes and the button should be enabled/disabled.
0
 
thebest8Author Commented:
I actually don't have any buttons, it's a clickable link that takes you to the order information, check this code:

mporder.js

$(document).ready(function(){
	$(".mp_order_row").on("click", function(){
		var id_order =  $(this).attr('is_id_order');
		if (friendly_url) {
			window.location.href = mporderdetails_link+'?id_order='+id_order;			
		} else {
			window.location.href = mporderdetails_link+'&id_order='+id_order;
		}
	});

	$('#my-orders-table').DataTable({
		"language": {
			"lengthMenu": display_name+" _MENU_ "+records_name,
			"zeroRecords": no_product,
			"info": show_page+" _PAGE_ "+ show_of +" _PAGES_ ",
			"infoEmpty": no_record,
			"infoFiltered": "("+filter_from +" _MAX_ "+ t_record+")",
			"sSearch" : search_item,
			"oPaginate": {
				"sPrevious": p_page,
				"sNext": n_page
				}
		},
		"order": [[ 0, "desc" ]]
	});

	$('select[name="my-orders-table_length"]').addClass('form-control-select');
});

Open in new window



mporderdetail_shipping:

$(document).ready(function() {
   /* var selected_option_value = $("#id_order_state option:selected").val();
    if (selected_option_value == 4) {
        $('#update_order_status_shipping').show();
        $('#update_order_status_delivary').hide();
        $('#update_order_status').hide();
    } else if (selected_option_value == 5) {
        $('#update_order_status_shipping').hide();
        $('#update_order_status_delivary').show();
        $('#update_order_status').hide();
    }

    $(document).on('change', '#id_order_state', function() {
        selected_state_id = $('#id_order_state').val();
        $('.id_order_state_checked').val(selected_state_id);
        if (selected_state_id == 4) {
            $('#update_order_status_shipping').show();
            $('#update_order_status_delivary').hide();
            $('#update_order_status').hide();
        } else if (selected_state_id == 5) {
            $('#update_order_status_shipping').hide();
            $('#update_order_status_delivary').show();
            $('#update_order_status').hide();
        } else {
            $('#update_order_status_shipping').hide();
            $('#update_order_status_delivary').hide();
            $('#update_order_status').show();
        }
    });

    $(document).on('click', '#edit_shipping_number_link', function(e) {
        e.preventDefault();
        $('#tracking_number').val($('#shipping_number_show').text().trim());
        $('#shipping_number_show').hide();
        $('#edit_shipping_number_link').hide();
        $('#shipping_number_edit').css('display', 'block');
    });

    $(document).on('click', '#cancel_shipping_number_link', function(e) {
        e.preventDefault();
        $('#shipping_number_show').show();
        $('#edit_shipping_number_link').show();
        $('#shipping_number_edit').css('display', 'none');
    });

    $(document).on('click', '#submit_shipping_number', function() {
        var id_order = $('#id_order_tracking').val();
        var tracking_number = $('#tracking_number').val();
        var id_order_carrier = $('#id_order_carrier').val();
        if (tracking_number != "") {
            $.ajax({
                type: "POST",
                async: true,
                url: update_tracking_number_link,
                data: {
                    id_order: id_order,
                    tracking_number: tracking_number,
                    id_order_carrier: id_order_carrier
                },
                success: function(data) {
                    $('#shipping_number_show').text(tracking_number);
                    $('#tracking_number').val(tracking_number);
                    $('#tracking_number_update_success_message').fadeIn(200).delay(2500).fadeOut(1000);
                },
                fail: function() {
                    $('#tracking_number_update_fail_message').fadeIn(200).delay(2500).fadeOut(1000);
                }
            });
            $('#shipping_number_show').show();
            $('#edit_shipping_number_link').show();
            $('#shipping_number_edit').css('display', 'none');
        }
    });

    $(document).on('click', '#edit_shipping', function() {
        $('#edit_textarea_shipping_description').show();
        $('#label_shipping_description').hide();
        $('#text_shipping_date').show();
        $('#label_shipping_date').hide();
    });

    $(document).on('click', '#edit_delivery', function() {
        $('#text_delivery_date').show();
        $('#label_delivery_date').hide();
        $('#edit_text_received_by').show();
        $('#label_received_by').hide();
    });

    // datepickers on changing the staus of the orders to delivered or shipped on mprderdetails.
    $('#text_shipping_date').datepicker({
        dateFormat: 'yy-mm-dd'
    });

    $('#text_delivery_date').datepicker({
        dateFormat: 'yy-mm-dd'
    });*/
});

Open in new window

0
 
thebest8Author Commented:
4 == shipped
5 == Delivered
14 == Pending Validation
0
 
Michael VasilevskySolutions ArchitectCommented:
That helps, to disable a link use:

$(#myLink").attr("disabled", "disabled");

Open in new window


where myLink is #submit_shipping_number or whichever link you want to disable.
0
 
thebest8Author Commented:
I found the code that takes you to the order detail when you click, I've done a modification I added an if statement, but didn't work

check this code

$(document).ready(function(){
	$(".mp_order_row").on("click", function(){
		var id_order =  $(this).attr('is_id_order');
		if id_order == 14 {                                                    <-------------------------------
			$(this).attr("disabled", "disabled");                <------------------------------
		}                                                                                   <-----------------------------
		if (friendly_url) {
			window.location.href = mporderdetails_link+'?id_order='+id_order;			
		} else {
			window.location.href = mporderdetails_link+'&id_order='+id_order;
		}
	});

Open in new window

0
 
Michael VasilevskySolutions ArchitectCommented:
Some potential issues:
1. $(".mp_order_row").on("click", function() - this function fires when a user clicks an element with the mp_order_row class. I think you want to disable on page load?
2. var id_order =  $(this).attr('is_id_order'); - does this reference the id of the order, not the order status?
3, $(this).attr("disabled", "disabled"); - in this context, 'this' references the element clicked, which might not be the link you are trying to disable

Can you replicate in a jsfiddle?
0
 
thebest8Author Commented:
1. $(".mp_order_row").on("click", function() - this function fires when a user clicks an element with the mp_order_row class. I think you want to disable on page load?
--> That's correct, if order id = 14 that row must be disabled.

2. var id_order =  $(this).attr('is_id_order'); - does this reference the id of the order, not the order status?  Correct, it references the order id not status.

3, $(this).attr("disabled", "disabled"); - in this context, 'this' references the element clicked, which might not be the link you are trying to disable -> I tried to implement the line that you suggested, but didn't work, I can still click on the row and it will take me to the order id detail, I just need that to be non-clickable or disabled

Can you replicate in a jsfiddle? Very hard to do because this involve database order, php, html and css...
0
 
Michael VasilevskySolutions ArchitectCommented:
To replicate in jsfiddle you can take the static HTML from an example page (go to Dev Tools -> Elements and copy/paste the HTML). We need to know if order status is on the page and what the id/class of the URL to be disabled is.
0
 
thebest8Author Commented:
I invite you to login to varpix.com

Sign in, login: seller@varpix.com
pass: 123456

then go to My Fulfilment center
0
 
Michael VasilevskySolutions ArchitectCommented:
Okay, that helps. So it's not a link, but a clickable row, so the code to modify is:
      $(".mp_order_row").on("click", function(){
		var id_order =  $(this).attr('is_id_order');
                if (myOrderID ===14) {
                  alert('Order Processing, please try again later);
                } else {
		  if (friendly_url) {
			window.location.href = mporderdetails_link+'?id_order='+id_order;			
		  } else {
			window.location.href = mporderdetails_link+'&id_order='+id_order;
		  }
              }
	});

Open in new window


Unfortunately order status is not a property of the element already (you only have order id and detail id), see:

element parameters
Although not ideal, we can probably perform the logic based on the Status column text. Give me a few minutes to figure that out...
0
 
Michael VasilevskySolutions ArchitectCommented:
Please try something like:
$(".mp_order_row").on("click", function() {
  var id_order = $(this).attr('is_id_order');
  var orderStatusIsPending = $(this).is(':contains("Pending Validation")');
  if (orderStatusIsPending) {
    alert('Order Processing, please try again later. Order ID: ' + id_order);
  } else {
    alert('Good to go');
  }
});

Open in new window


See working example here
0
 
thebest8Author Commented:
thank you, but still doesn't work, no alert is thrown for any case, something is missing?
0
 
Michael VasilevskySolutions ArchitectCommented:
What error shows up in the console?
0
 
thebest8Author Commented:
No errors at all, I can just click on the row and it takes me to the order
0
 
Michael VasilevskySolutions ArchitectCommented:
Can you paste your new JavaScript code?
0
 
thebest8Author Commented:
$(document).ready(function(){
	$(".mp_order_row").on("click", function() {
  var id_order = $(this).attr('is_id_order');
  var orderStatusIsPending = $(this).is(':contains("Pending Validation")');
  if (orderStatusIsPending) {
    alert('Order Processing, please try again later. Order ID: ' + id_order);
  } else {
    alert('Good to go');
  }

              
		  if (friendly_url) {
			window.location.href = mporderdetails_link+'?id_order='+id_order;			
		  } else {
			window.location.href = mporderdetails_link+'&id_order='+id_order;
		  }
              }
	});
		if (friendly_url) {
			window.location.href = mporderdetails_link+'?id_order='+id_order;			
		} else {
			window.location.href = mporderdetails_link+'&id_order='+id_order;
		}
	});

	$('#my-orders-table').DataTable({
		"language": {
			"lengthMenu": display_name+" _MENU_ "+records_name,
			"zeroRecords": no_product,
			"info": show_page+" _PAGE_ "+ show_of +" _PAGES_ ",
			"infoEmpty": no_record,
			"infoFiltered": "("+filter_from +" _MAX_ "+ t_record+")",
			"sSearch" : search_item,
			"oPaginate": {
				"sPrevious": p_page,
				"sNext": n_page
				}
		},
		"order": [[ 0, "desc" ]]
	});

	$('select[name="my-orders-table_length"]').addClass('form-control-select');
});

Open in new window

0
 
Michael VasilevskySolutions ArchitectCommented:
That code has invalid syntax. You're sure you're not getting an error in the console??
0
 
Michael VasilevskySolutions ArchitectCommented:
Here is your code corrected:
$(document).ready(function(){
	$(".mp_order_row").on("click", function() {
  var id_order = $(this).attr('is_id_order');
  var orderStatusIsPending = $(this).is(':contains("Pending Validation")');
  if (orderStatusIsPending) {
    alert('Order Processing, please try again later. Order ID: ' + id_order);
  } else {    
		  if (friendly_url) {
			window.location.href = mporderdetails_link+'?id_order='+id_order;			
		  } else {
			window.location.href = mporderdetails_link+'&id_order='+id_order;
		  }
              }
	});
	$('#my-orders-table').DataTable({
		"language": {
			"lengthMenu": display_name+" _MENU_ "+records_name,
			"zeroRecords": no_product,
			"info": show_page+" _PAGE_ "+ show_of +" _PAGES_ ",
			"infoEmpty": no_record,
			"infoFiltered": "("+filter_from +" _MAX_ "+ t_record+")",
			"sSearch" : search_item,
			"oPaginate": {
				"sPrevious": p_page,
				"sNext": n_page
				}
		},
		"order": [[ 0, "desc" ]]
	});

	$('select[name="my-orders-table_length"]').addClass('form-control-select');
});

Open in new window

0
 
thebest8Author Commented:
hmm, thank you it worked but once I got the alert and hit ok, it takes me to the order instead of stoping there
0
 
Michael VasilevskySolutions ArchitectCommented:
The else part of that if statement is being fired after the alert? Or some other function is redirecting the page?

Can you console.log the value of orderStatusIsPending?
0
 
thebest8Author Commented:
hmmm, check this out, on Firefox which I've just tested, that issue doesn't exist, it doesn't take me to the order, it just stops there, but in Chrome, it redirect me to the order detail as if it is reading the else statement and moving ahead.
0
 
thebest8Author Commented:
My apology the test was performed on Opera not Chrome sorry
On Firefox it works fine but it shows the alert twice
0
 
thebest8Author Commented:
I tested Chrome just now and it worked but shows the alert twice as firefox
0
 
Michael VasilevskySolutions ArchitectCommented:
See if this works better:

$(document).ready(function(){
  $(".mp_order_row").on("click", function() {
    var id_order = $(this).attr('is_id_order');
    var orderStatusIsPending = $(this).is(':contains("Pending Validation")');
    if (!orderStatusIsPending) {
      if (friendly_url) {
        window.location.href = mporderdetails_link+'?id_order='+id_order;			
      } else {
        window.location.href = mporderdetails_link+'&id_order='+id_order;
      }
    } else {    
       alert('Order Processing, please try again later. Order ID: ' + id_order);
       return;
    }
  });
  $('#my-orders-table').DataTable({
    "language": {
      "lengthMenu": display_name+" _MENU_ "+records_name,
      "zeroRecords": no_product,
      "info": show_page+" _PAGE_ "+ show_of +" _PAGES_ ",
      "infoEmpty": no_record,
      "infoFiltered": "("+filter_from +" _MAX_ "+ t_record+")",
      "sSearch" : search_item,
      "oPaginate": {
        "sPrevious": p_page,
        "sNext": n_page
      }
    },
    "order": [[ 0, "desc" ]]
  });

  $('select[name="my-orders-table_length"]').addClass('form-control-select');
});

Open in new window

0
 
thebest8Author Commented:
same result

Chrome Good with 2 alerts
Firefox Good with 2 alerts
opera Not good
0
 
thebest8Author Commented:
I have a better idea

Because the link contain order_id=225 I can change order_id with 226 and will take a look at the shipping address, what if we try to hide the shipping addr when order status is Pending Validation?

I have the following code:

$(document).ready(function() {
   /* var selected_option_value = $("#id_order_state option:selected").val();
    if (selected_option_value == 4) {
        $('#update_order_status_shipping').show();
        $('#update_order_status_delivary').hide();
        $('#update_order_status').hide();
    } else if (selected_option_value == 5) {
        $('#update_order_status_shipping').hide();
        $('#update_order_status_delivary').show();
        $('#update_order_status').hide();
    }

    $(document).on('change', '#id_order_state', function() {
        selected_state_id = $('#id_order_state').val();
        $('.id_order_state_checked').val(selected_state_id);
        if (selected_state_id == 4) {
            $('#update_order_status_shipping').show();
            $('#update_order_status_delivary').hide();
            $('#update_order_status').hide();
        } else if (selected_state_id == 5) {
            $('#update_order_status_shipping').hide();
            $('#update_order_status_delivary').show();
            $('#update_order_status').hide();
        } else {
            $('#update_order_status_shipping').hide();
            $('#update_order_status_delivary').hide();
            $('#update_order_status').show();
        }
    });

    $(document).on('click', '#edit_shipping_number_link', function(e) {
        e.preventDefault();
        $('#tracking_number').val($('#shipping_number_show').text().trim());
        $('#shipping_number_show').hide();
        $('#edit_shipping_number_link').hide();
        $('#shipping_number_edit').css('display', 'block');
    });

    $(document).on('click', '#cancel_shipping_number_link', function(e) {
        e.preventDefault();
        $('#shipping_number_show').show();
        $('#edit_shipping_number_link').show();
        $('#shipping_number_edit').css('display', 'none');
    });

    $(document).on('click', '#submit_shipping_number', function() {
        var id_order = $('#id_order_tracking').val();
        var tracking_number = $('#tracking_number').val();
        var id_order_carrier = $('#id_order_carrier').val();
        if (tracking_number != "") {
            $.ajax({
                type: "POST",
                async: true,
                url: update_tracking_number_link,
                data: {
                    id_order: id_order,
                    tracking_number: tracking_number,
                    id_order_carrier: id_order_carrier
                },
                success: function(data) {
                    $('#shipping_number_show').text(tracking_number);
                    $('#tracking_number').val(tracking_number);
                    $('#tracking_number_update_success_message').fadeIn(200).delay(2500).fadeOut(1000);
                },
                fail: function() {
                    $('#tracking_number_update_fail_message').fadeIn(200).delay(2500).fadeOut(1000);
                }
            });
            $('#shipping_number_show').show();
            $('#edit_shipping_number_link').show();
            $('#shipping_number_edit').css('display', 'none');
        }
    });

    $(document).on('click', '#edit_shipping', function() {
        $('#edit_textarea_shipping_description').show();
        $('#label_shipping_description').hide();
        $('#text_shipping_date').show();
        $('#label_shipping_date').hide();
    });

    $(document).on('click', '#edit_delivery', function() {
        $('#text_delivery_date').show();
        $('#label_delivery_date').hide();
        $('#edit_text_received_by').show();
        $('#label_received_by').hide();
    });

    // datepickers on changing the staus of the orders to delivered or shipped on mprderdetails.
    $('#text_shipping_date').datepicker({
        dateFormat: 'yy-mm-dd'
    });

    $('#text_delivery_date').datepicker({
        dateFormat: 'yy-mm-dd'
    });*/
});

Open in new window

0
 
Michael VasilevskySolutions ArchitectCommented:
You can try that. You could add a parameter to the URL for pending true/false and then hide the divs based on the value.
0
 
thebest8Author Commented:
can you help me with that?
0
 
Michael VasilevskySolutions ArchitectCommented:
Sure, please put it in a new question.
0
 
thebest8Author Commented:
Excellent expert and very kind a patient, I appreciate it
0
 
thebest8Author Commented:
I've just posted the question
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.