disable div based on order id status

hello

I would like to know how to disable div based on order id status
thebest8Asked:
Who is Participating?
 
Michael VasilevskySolutions ArchitectCommented:
Detail page JavaScript is then:

$(document).ready(function() {
  if (GetURLParameter('pending')) {
    //  hide divs
  }
   /* 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'
    });*/

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}​

Open in new window

0
 
Michael VasilevskySolutions ArchitectCommented:
So the first part becomes:

$(document).ready(function(){
  $(".mp_order_row").on("click", function() {
    var id_order = $(this).attr('is_id_order');
    var orderStatusIsPending = $(this).is(':contains("Pending Validation")');
    window.location.href = mporderdetails_link+'?id_order='+id_order+'&Pending='+orderStatusIsPending;			
  });
  $('#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:
first part is working fine, only 1 alert is showing now. Opera just ignores JS, not sure why

second code, no effect yet
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Michael VasilevskySolutions ArchitectCommented:
There shouldn't be any alert with the new code. Do you have it duplicated somewhere?

Maybe JavaScript is disabled in your Opera browser?
0
 
thebest8Author Commented:
that's strange, based on your first code, it shouldn't throw an alert but it does, I cleared cookies and everything, and I still see an alert but only once, I even cleared website cache.

I checked opera setting but it is allowing javascript
0
 
thebest8Author Commented:
Ok, I went ahead and re-cleared cache, now I can't click any order
0
 
thebest8Author Commented:
if you post an answer, I will check it tomorrow, thank you very much
0
 
thebest8Author Commented:
I noticed one thing, if I enable Javascript Cache, the front end get messed up completely, once I disable it, it comes back to normal operation, now the alert msg came back and i can click other orders other than "pending validation" status orders
0
 
thebest8Author Commented:
I have fixed the javascript issue, and the website is working fine, it was an issue with jquery version which I updated..

Can you still help with this question please?
0
 
Michael VasilevskySolutions ArchitectCommented:
Did you update the code as I suggested above?

$(document).ready(function(){
  $(".mp_order_row").on("click", function() {
    var id_order = $(this).attr('is_id_order');
    var orderStatusIsPending = $(this).is(':contains("Pending Validation")');
    window.location.href = mporderdetails_link+'?id_order='+id_order+'&Pending='+orderStatusIsPending;			
  });
  $('#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


$(document).ready(function() {
  if (GetURLParameter('pending')) {
    //  hide divs
  }
   /* 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'
    });*/

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}​

Open in new window

0
 
thebest8Author Commented:
I have re-updated the files to make sure they are same as what you posted.

Now I can see order details, and When I click on order it takes me to order, the only change here is that I noticed the url address changed to :

mporderdetails?id_order=226&Pending=true

so Pending=true is applied when order is in pending
and when I go to other orders with different status it is in False
0
 
Michael VasilevskySolutions ArchitectCommented:
okay then you just need to add the code to hide whatever divs you want to hide when Pending = true. You can use jQuery:

$('#myDiv').hide()

Open in new window

0
 
thebest8Author Commented:
Can't still figure out the right div

check screenshot
Capture.JPG
0
 
Michael VasilevskySolutions ArchitectCommented:
You can use the Inspector to hover over the elements on the page and figure out which div you want to hide. You may need to give it an ID if it doesn't already have one.
0
 
thebest8Author Commented:
Check this syntax, I'm trying to check if JS is working on that page or not

$(document).ready(function() {
  if (GetURLParameter('pending')) {
    alert("Js is working");
  }

Open in new window


That should trigger an alert to be shown in the page right?
0
 
Michael VasilevskySolutions ArchitectCommented:
Yes but it's case sensitive so use:

$(document).ready(function() {
  if (GetURLParameter('Pending')) {
    alert("Js is working");
  }

Open in new window

0
 
thebest8Author Commented:
I see, no alert is triggered, something with jquery... it's driving me insane :(
0
 
Michael VasilevskySolutions ArchitectCommented:
What makes you say it's something with jQuery?

Can you verify GetURLParameter('Pending') is returning true? Try:
$(document).ready(function() {
  console.log(GetURLParameter('Pending'));
  }

Open in new window

0
 
thebest8Author Commented:
check this

SyntaxError: illegal character
[Learn More]
mporderdetails_shipping.js:132:1
0
 
thebest8Author Commented:
$(document).ready(function() {
  console.log(GetURLParameter('Pending'));
  }

Open in new window


SyntaxError: missing ) after argument list
[Learn More]
mporderdetails_shipping.js:119

Line 119 starts with :

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}​

Open in new window

0
 
Michael VasilevskySolutions ArchitectCommented:
Here is the correct syntax:
$(document).ready(function() {
  console.log(GetURLParameter('Pending'));
});

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}

Open in new window


btw you can use jshint.com to quickly discover syntax errors.
0
 
thebest8Author Commented:
I have an issue with Smart Cache Javascript, when I disabled it, a "True" is shown,

When I enabled it you can see screenshot to see errors
Capture2.JPG
0
 
thebest8Author Commented:
Can you please take a look at this syntax,
unmatched.JPG
0
 
Michael VasilevskySolutions ArchitectCommented:
"pending" should be "Pending" - it's case sensitive. Gotta get on a flight now but can check in later. Good luck!
0
 
thebest8Author Commented:
Have a good trip Mr Michael, thanks for your help
0
 
thebest8Author Commented:
any idea why jshunt is asking for "Unmatched '{'."
0
 
thebest8Author Commented:
I figured it out, here is the correct syntax

$(document).ready(function() {
  if (GetURLParameter('Pending')) {
    $('#ship_addr').hide();
	$('#select_ele_id').hide();
	$('#update_order_status').hide();
  }
});
  
function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}

Open in new window



Is it possible to replace the previous shipping address with a text like: "Pending Validation".
is it possible to do that with JS?
0
 
thebest8Author Commented:
There is a small issue, even with Pending=False  the shipping info are hidden
0
 
Michael VasilevskySolutions ArchitectCommented:
Yes you can set the text with:

$( "#myDiv" ).text( "My text." );

Open in new window


Is the URL showing pending=false when it should?

does (GetURLParameter('Pending')) return false when it should?
0
 
thebest8Author Commented:
Hello dear Michael, How are you doing? I guess there must be a condition that check if pending=true or false? as in both cases, the shipping information is hidden, should I open a new question and post you the link please?
0
 
Michael VasilevskySolutions ArchitectCommented:
Your code below is firing whether 'Pending' is true or false?

$(document).ready(function() {
    if (GetURLParameter('Pending')) {
        $('#ship_addr').hide();
        $('#select_ele_id').hide();
        $('#update_order_status').hide();
    }
});

Open in new window


maybe try:
$(document).ready(function() {
    if (GetURLParameter('Pending')) {
        $('#ship_addr').hide();
        $('#select_ele_id').hide();
        $('#update_order_status').hide();
    } else {
        $('#ship_addr').show();
        $('#select_ele_id').show();
        $('#update_order_status').show();
   }
});

Open in new window

0
 
thebest8Author Commented:
that should work I will try it right now.

If someone change the URL and changed the false to true, it will show the information, is there anyway in javascript that can generate like a serie of random code after the Pending=8743jdhfdjhjfDFGCv977, that's an example, is that possible?
0
 
Michael VasilevskySolutions ArchitectCommented:
yes it's possible but I don't think you'd get the effect you're looking for. You could name the parameter "p" and set it to "1" or "2" for example if you're trying to obscure what it's used for but a savvy user could still figure it out. The only way to protect fully would be to remove the parameter from the URL and find it via a lookup to the backend on the details page.
0
 
thebest8Author Commented:
I see,

But we can make it little bit complicated.

Can we set "p" to
938Fjs81Fdkcxndfj where this value = true   &
jhdRdk38dBVv839 where this value = False

is this possible?
0
 
Michael VasilevskySolutions ArchitectCommented:
yes of course - just update it both places:

var orderStatusIsPending;
if ($(this).is(':contains("Pending Validation")')) === true {
  orderStatusIsPending = 938Fjs81Fdkcxndfj;
} else {
  orderStatusIsPending = jhdRdk38dBVv839;
}

Open in new window


and:

$(document).ready(function() {
    if (GetURLParameter('Pending') === "938Fjs81Fdkcxndfj") {
        $('#ship_addr').hide();
        $('#select_ele_id').hide();
        $('#update_order_status').hide();
    } else {
        $('#ship_addr').show();
        $('#select_ele_id').show();
        $('#update_order_status').show();
   }
});

Open in new window

0
 
thebest8Author Commented:
Here is my mporder.js

$(document).ready(function(){
	var orderStatusIsPending;
  $(".mp_order_row").on("click", function() {
    var id_order = $(this).attr('is_id_order');
    var orderStatusIsPending = $(this).is(':contains("Pending Validation")');
	if ($(this).is(':contains("Pending Validation")')) === true {
  orderStatusIsPending = 938Fjs81Fdkcxndfj;
} else {
  orderStatusIsPending = jhdRdk38dBVv839;
}
    window.location.href = mporderdetails_link+'?id_order='+id_order+'&Pending='+orderStatusIsPending;			
  });
  $('#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


and my mporderdetail_shipping.js

$(document).ready(function() {
   if (GetURLParameter('Pending') === "938Fjs81Fdkcxndfj") {
        $('#ship_addr').hide();
        $('#select_ele_id').hide();
        $('#update_order_status').hide();
    } else {
        $('#ship_addr').show();
        $('#select_ele_id').show();
        $('#update_order_status').show();
   }
});
  
function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}

Open in new window


Can't see the pending in url, something is missing?
0
 
Michael VasilevskySolutions ArchitectCommented:
You've got a couple syntax errors in mporder.js. Again, you can easily find these yourself with jshint. It should be:

$(document).ready(function() {
    var orderStatusIsPending;
    $(".mp_order_row").on("click", function() {
        var id_order = $(this).attr('is_id_order');
        if ($(this).is(':contains("Pending Validation")') === true) {
            orderStatusIsPending = "938Fjs81Fdkcxndfj";
        } else {
            orderStatusIsPending = "jhdRdk38dBVv839";
        }
        window.location.href = mporderdetails_link + '?id_order=' + id_order + '&Pending=' + orderStatusIsPending;
    });
    $('#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:
Thank you but I still can't see Pending in URL, not sure why
0
 
thebest8Author Commented:
Hmm, seems to be a browser cache issue.. I will update you soon
0
 
thebest8Author Commented:
In both cases, the Shipping information is still hidden
0
 
Michael VasilevskySolutions ArchitectCommented:
Trace the stack
0
 
thebest8Author Commented:
I'm using Firefox and the console log doesn't show any error at all
0
 
thebest8Author Commented:
I got it working now...

The funny thing is when you change some letters in the url, it will show you the shipping info, can't think of a hack to it unless you have an idea that can be done in js?
0
 
thebest8Author Commented:
Hello Mr Michael, How are you doing? any idea about my latest post?

Is there a way to say in JS, if the status is Pending Validation Or Canceled then hide the infos?
0
 
Michael VasilevskySolutions ArchitectCommented:
If you don't want to use the URL method described above  you can create a variable that is accessible by both pages or make a call to the backend on the detail page to find the status.

Hope this helps!
0
 
thebest8Author Commented:
I see, are you able to do that?
0
 
Michael VasilevskySolutions ArchitectCommented:
I am, and I kindly suggest you set up a gig if you're not able.
0
 
thebest8Author Commented:
Hello Mr Michael, how are you doing? Are you still interested in this project I opened via link :

https://www.experts-exchange.com/gigs/4563/Call-vars-from-backend-to-hide-divs-in-front-end.html
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.