Question 165311 in Wordpress Question posted in
The official Wordpress documentation can be found here.

“Can’t get WordPress-jQuery var to save?”

I have a href="tel:0400000000 value that I am loading within the page (it’s a php echo for the phone number). I am immediately changing the href via jQuery to hide it (href=tel:hidden) with the hope that when I run a specific action/function I can revert back to the original. It is in a wordpress plugin hence the format for the jQuery.

I have included the start of the jQuery function to assist in any responses.

UPDATED

Original HTML

<a class="button primary is-small expand" id="reunitePersonCall" href="tel:0400000000" ><span>Call Person</span></a>

jQuery

(function($){

    $(function() {
        
        $('#geoLocationButton').off().click(initiate_geolocation);
        
        $('#reunitePersonCall').data("saved", $('#reunitePersonCall').attr("href")).attr({
            "disabled":true,
            "href":"tel:hidden",
        }).prop("onclick", null);
        
        $('#reunitePersonNotify').attr("disabled", true);
        
        // Initiate Geolocation
        function initiate_geolocation() {

            navigator.geolocation.getCurrentPosition(showPosition,showErrors,{timeout: 5000});
            
        }

        // Output Geolocation
        function showPosition(position){

            var longitude = position.coords.longitude;
            var latitude = position.coords.latitude;
            
            $.ajax({
                url:    plugin_locate_person_obj.ajaxurl,
                type:   'POST',
                data:   { 
                        action: 'plugin_locate_person_request',
                        longitude: position.coords.longitude,   // $_POST['longitude'];
                        latitude: position.coords.latitude      // $_POST['latitude'];
                        },
                
                success: function(data) {
                    $('#geoLocationButton').html("Location Recorded").attr("disabled", true);
                    $('#geoLocationMap').html('<iframe src="https://maps.google.com/maps?q=' + latitude + ',' + longitude + '&z=17&output=embed" width="100%" height="170" frameborder="0" style="border:0"></iframe>');
                    $('#reunitePersonNotify').attr("disabled", false).off().click(reunite_person);
                    $('#reunitePersonCall').attr("disabled", false).off().attr("href", $('#reunitePersonCall').data("saved")).click(reunite_person);
                }
                
            });

        }

        // Geolocation Errors
        function showErrors(error) {

            switch(error.code) {

                case error.PERMISSION_DENIED: alert("Location Denied by User.");
                break;

                case error.POSITION_UNAVAILABLE: alert("Location Could Not be Detected.");
                break;

                case error.TIMEOUT: alert("Location Request Timed Out.");
                break;

                default: alert("Unknown Error.");
                break;

            }

        }
                
        function reunite_person() {
            
            var jsDate      = new Date();
            var finder_date = jsDate.toLocaleDateString("en-AU");
            var finder_time = jsDate.toLocaleTimeString("en-AU");
            
            $.ajax({
                url:    plugin_reunite_person_obj.ajaxurl,
                type:   'POST',
                data:   { 
                        action: 'plugin_reunite_person_request',
                        finder_name: $('input[name=finder_name]').val(),
                        finder_phone: $('input[name=finder_phone]').val(),
                        finder_date: finder_date,
                        finder_time: finder_time
                        },
                
                success: function(data) {
                    $("#reunitePersonNotify").prop("onclick", null).off("click");
                    $("#reunitePersonCall").prop("onclick", null).off("click");
                    $('#reunitePersonResults').html(data);
                    $('#geoPrivacy').hide();
                    
                }
            
            });
            
        }

    });

})(jQuery);

What I am trying to achieve is the original html a href value (eg: tel: 0400000000) is "saved" in the var, then I can do what ever I want to the href attribute to then be able to revert it back to the original value (through the var).

When the page loads, because of the jquery, the button link is ‘tel:hidden’. But when i click the button attached to geoLocationButton, the button associated to reunitePersonCall is then activated (no longer disabled). When I want to click that button it is a success, HOWEVER the $('#reunitePersonCall').attr("disabled", false).off().attr("href", $('#reunitePersonCall').data("saved")).click(reunite_person); doesn’t seem to do what it is meant too (which is revert the a href back to the original tel:0400000000 but it does perform the ‘reunite_person’ action).

Tags:

2

Answers


  1. 0

    It looks like the Phone variable is not visible in the success function scope. You can either declare it globally, or even better, just save the phone number as an attribute of the <a href> tag:

    // Save href in data-saved before updating attribs:
$('#Call').data("saved", $("#Call").attr("href")).attr({
  "disabled":true,
  "href":"tel:hidden",
})

    Restore:

    success: function(data) {
  $('#Call').attr("disabled", false).off().attr("href", $('#Call').data("saved"));
}
    Login or Signup to reply.
  2. 0

    I Tried the code, it worked for me.

    Two options that I can think about are:

    1. you are using the var keyword, which causes the variable to be local to that scope, and unknown in the ajax success call.
    2. the success call is not executed, was it?

    Also, never trust the console.log() function as to the content of variables, since it’s not Synchronous

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search