disable div based on order id status

thebest8
thebest8 used Ask the Experts™
on
hello

I would like to know how to disable div based on order id status
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Michael VasilevskySolutions Architect

Commented:
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

Solutions Architect
Commented:
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

Author

Commented:
first part is working fine, only 1 alert is showing now. Opera just ignores JS, not sure why

second code, no effect yet
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Michael VasilevskySolutions Architect

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

Maybe JavaScript is disabled in your Opera browser?

Author

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

Author

Commented:
Ok, I went ahead and re-cleared cache, now I can't click any order

Author

Commented:
if you post an answer, I will check it tomorrow, thank you very much

Author

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

Author

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?
Michael VasilevskySolutions Architect

Commented:
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

Author

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
Michael VasilevskySolutions Architect

Commented:
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

Author

Commented:
Can't still figure out the right div

check screenshot
Capture.JPG
Michael VasilevskySolutions Architect

Commented:
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.

Author

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?
Michael VasilevskySolutions Architect

Commented:
Yes but it's case sensitive so use:

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

Open in new window

Author

Commented:
I see, no alert is triggered, something with jquery... it's driving me insane :(
Michael VasilevskySolutions Architect

Commented:
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

Author

Commented:
check this

SyntaxError: illegal character
[Learn More]
mporderdetails_shipping.js:132:1

Author

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

Michael VasilevskySolutions Architect

Commented:
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.

Author

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

Author

Commented:
Can you please take a look at this syntax,
unmatched.JPG
Michael VasilevskySolutions Architect

Commented:
"pending" should be "Pending" - it's case sensitive. Gotta get on a flight now but can check in later. Good luck!

Author

Commented:
Have a good trip Mr Michael, thanks for your help

Author

Commented:
any idea why jshunt is asking for "Unmatched '{'."

Author

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?

Author

Commented:
There is a small issue, even with Pending=False  the shipping info are hidden
Michael VasilevskySolutions Architect

Commented:
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?

Author

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?
Michael VasilevskySolutions Architect

Commented:
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

Author

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?
Michael VasilevskySolutions Architect

Commented:
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.

Author

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?
Michael VasilevskySolutions Architect

Commented:
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

Author

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?
Michael VasilevskySolutions Architect

Commented:
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

Author

Commented:
Thank you but I still can't see Pending in URL, not sure why

Author

Commented:
Hmm, seems to be a browser cache issue.. I will update you soon

Author

Commented:
In both cases, the Shipping information is still hidden
Michael VasilevskySolutions Architect

Commented:
Trace the stack

Author

Commented:
I'm using Firefox and the console log doesn't show any error at all

Author

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?

Author

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?
Michael VasilevskySolutions Architect

Commented:
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!

Author

Commented:
I see, are you able to do that?
Michael VasilevskySolutions Architect

Commented:
I am, and I kindly suggest you set up a gig if you're not able.

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial