Recently, I came to a point where I need to change loaded url with server side interface. The project was on shopify so I could not add any code in .htaccess file. as generally we do in php based projects. So, the task was to change opened url on client side. The url was http:www.example.com/pages/about, the required one was like : http:www.example.com/about. I had approached this using JS hack. Here's the code if anyone has the same need.

<script>
 $( window ).on( "load", function() {
    var current_url = window.location.origin + window.location.pathname; // taken current url with 'pages' slug in variable.
   /* remove 'pages' from current url */    
    var url = location.href    
    url = url.replace("/pages","");
    history.pushState('', '', url);
    
  });

</script>


This worked for me perfectly when I used to open new pages with pages slug. Each time it removed the 'pages' from the url, but..

when I refresh the same page, I found 404.
Which is totally fair, because at that time the current url was 'http:www.example.com/about' which was not available on server side so it throw an error. For getting rid of this, follow the below code.

What would be the logic??

To remove 'pages' only if new page clicked. If user refresh the same page then we'd create a js function to reload page with the old 'pages' contained url. i.e. http:www.example.com/pages/about. Which we assigned already in current_url variable.

<script>
if(window.location.href.indexOf("pages") > -1) { // make sure to run only on 'pages' contains the url
window.onbeforeunload = function(e) { 
  e.preventDefault()    
  old_path = window.location.origin +"/pages"+window.location.pathname; // took site url & slug and assigned 'pages' string from where we removed.
  /* main hack. Check if the next clicked element is defined or not. If user clicked on any link 'document.activeElement.href' would be defined. If not, it would be undefined. So.. */
  if(document.activeElement.href==undefined){ 
    window.setTimeout(function () { 
      window.location =old_path; // set location to url which contained 'pages'
    }, 0); 
  }
window.onbeforeunload = null; // necessary to prevent infinite loop, that kills your browser 
}
}
</script>

Follow this simplest steps for getting custom post type data using angularJs text input search filter. 
First of all include live jQuery, angularJs live Library and create a custom js file.

Download and install WordPress REST API (Version 2)



you can skip next step if you want to fetch default post type data only.

otherwise, 
we need to add REST API Support for Custom Content types

for already created taxonomy, 
add:
add_action( 'init', 'my_custom_taxonomy_rest_support', 25 );
function my_custom_taxonomy_rest_support() {
 global $wp_taxonomies;
 
 //be sure to set this to the name of your taxonomy!
 $taxonomy_name = 'your_custom_taxonomy_name';
 
 if ( isset( $wp_taxonomies[ $taxonomy_name ] ) ) {
   $wp_taxonomies[ $taxonomy_name ]->show_in_rest = true;
 
   // Optionally customize the rest_base or controller class
   $wp_taxonomies[ $taxonomy_name ]->rest_base = $taxonomy_name;
   $wp_taxonomies[ $taxonomy_name ]->rest_controller_class = 'WP_REST_Terms_Controller';
 }
}

read full here : http://v2.wp-api.org/extending/custom-content-types/

open browser and navigate: http://example.com/wp-json/wp/v2/your_custom_taxonomy_name



It should show you your taxonomy in JSON format.

open js file and

add
angular.module('myApp', []).controller('namesCtrl', function($scope, $http) {
   $http.get("http://example.com/wp-json/wp/v2/your_custom_taxonomy_name")
  .then(function (response) {
  $scope.names = response.data;
  })
});

open template
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input id="txtbilal" type="text" ng-model="test"></p>
<ul id="customData">
 <li ng-repeat="x in names | filter:test">
   <a href="{{ x.link }}">{{ x.name }}</a>
 </li>
</ul>
</div>

here's my text box which fadeIn result on text input

you can also add a simple fadeIn jQuery function like me,

$('#customData').css('display','none');
$('#txtbilal').on("focusin", function(){
$('#customData').fadeIn('slow')
});

Actually, I am posting this because recently I need to get all the meta values of all posts of particular custom post type. 

Here is the simplest tutorial by which you can save the acf_form data on ajax_call without the page refresh.
Initially, I expect that you have enough knowledge of acf_form as well as Advance Custom Fields.



STEP :1 Now, Open your page/template file and paste the code given below:

<?php /*
Template Name: acf
*/
 acf_form_head(); ?>
<?php get_header(); ?>

  <div id="primary" class="content-area" style="width: 70%; padding-left: 7%; "> 
  <div id="content" class="site-content" role="main">

      <?php /* The loop */ ?>
      <?php while ( have_posts() ) : the_post(); ?>
        <?php   $args = array(
                              'post_id' => 'YourPostId',
                              'form_attributes' => array(
                              'class' => 'new-campaign-form',
                              'id'=>'modalAjaxTrying'

                              ),
                              'field_groups' => array(2537), //field group id
                              'submit_value' => __("Save and Continue", 'acf'),
                            );
                acf_form( $args );  
         
                
                ?>


        <?php endwhile; ?>
    </div><!-- #content -->

  </div><!-- #primary -->
<?php get_sidebar(); ?>

<?php get_footer(); ?>


STEP : 2 Open your js file and paste the code given below (You can also paste this on the same template page):

<script type="text/javascript">

     jQuery('form#modalAjaxTrying :submit').click(function(event){
    event.preventDefault();
    var form_data = {'action' : 'acf/validate_save_post'};
    jQuery('form#modalAjaxTrying :input').each(function(){
    form_data[jQuery(this).attr('name')] = jQuery(this).val()
    })

    form_data.action = 'save_my_data';
    jQuery.post(ajaxurl, form_data)
    .done(function(save_data){
    alert('Added successFully :');
   
    })

})

   

})

</script>

STEP 3: Open functions.php and add these two actions

add_action( 'wp_ajax_save_my_data', 'acf_form_head' );
add_action( 'wp_ajax_nopriv_save_my_data', 'acf_form_head' );

You're DONE :)
Now save and check. Let me know if you face any error. 

MCA - 101 Computer Architecture

MCA - 102 Accounting and Financial Management

Here. is very simply by which you can add auto zoom/center according to your irst latitude and longitude without fitBounds.


        var zoom = 12;
        var lat1 = '<?php echo $first_lat; ?>';
        var lat2 = '<?php echo $latitude; ?>';
        var lon1 = '<?php echo $first_lng; ?>';
        var lon2 = '<?php echo $longitude; ?>';
        var unit = 'M';
       
       

        function distance(lat1, lon1, lat2, lon2, unit) {
var radlat1 = Math.PI * lat1/180
var radlat2 = Math.PI * lat2/180
var radlon1 = Math.PI * lon1/180
var radlon2 = Math.PI * lon2/180
var theta = lon1-lon2
var radtheta = Math.PI * theta/180
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist)
dist = dist * 180/Math.PI
dist = dist * 60 * 1.1515
if (unit=="K") { dist = dist * 1.609344 }
if (unit=="N") { dist = dist * 0.8684 }
return dist
}
var dis = distance(lat1, lon1, lat2, lon2, unit);

// change value according to your needs.

if (dis > '2.0' && dis < '3.9'){   
        zoom = 11
       
        } else if (dis > '4.0' && dis < '5.9'){
        zoom = 10;
       
        } else if (dis > '6.0' && dis < '9.9'){
        zoom = 9;
       
        } else if (dis > '10.0'){
        zoom = 8;
       
        } 



    var mapOptions = {
               center: new google.maps.LatLng(lat1,lon1),   
               zoom: zoom,
                 scrollwheel: false,
 disableDoubleClickZoom: true,
               mapTypeId: google.maps.MapTypeId.ROADMAP
           };
           map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
           {
/*
FOLLOW YOUR OTHER MAP CODE <../> 
*/

           }