将JavaScript变量存储在PHP变量中，以将其用于源页面中的动态元描述

Question

I have made an AJAx request in CI. This request is fetching data from database and displaying this on the same page. I need to create dynamic meta description. Where i need to use one field value from database in my meta description so once I view page source it must appear in the view page source.

I wanted to store the javascript variable in the php variable so once I open the source page I can easily display that in my description. Is there any way to use javascript variable for meta description in view page source or using php.

View:

$('#city').on('change',function(){
                 var branchName=  $('#city option:selected').html();
                 $('#branchSel').html('<span><b>Branch Name: </b></span>'+branchName).addClass("appear");
                 var stateName=  $('#state option:selected').html().toLowerCase();
                 var countryName=  $('#country option:selected').html().toLowerCase();
                 countryName = countryName.replace(/\s+/g, '-');
                 stateName = stateName.replace(/\s+/g, '-');
                 branchName = branchName.replace(/\s+/g, '-').toLowerCase();                                       
                    var cityID = $(this).val();
                        if(cityID){
                        window.history.pushState('', '', '<?php echo base_url($bank_rename.'/ifsc-code'); ?>/'+countryName+'/'+stateName+'/'+branchName);
                        $.ajax({
                            type:'POST',
                            url:'<?php echo base_url('bank/getBranchDetail'); ?>',
                            data:'city_id='+cityID,
                             success:function(data){
                                $('#dataDisplay').remove();
                                $('#ifsc').html("").removeClass("appear");
                                $('#micr').html("").removeClass("appear");
                                $('#contact').html("").removeClass("appear");
                                $('#address').html("").removeClass("appear");
                                var dataObj = jQuery.parseJSON(data);
                                    $(dataObj).each(function(){
                                        var ifsc = $('#ifsc').html("<span><b>IFSC Code: </b></span>");
                                        var micr = $('#micr').html("<span><b>MICR Code: </b></span>");
                                        var contact = $('#contact').html("<span><b>Contact No: </b></span>");
                                        var address = $('#address').html("<span><b>Address: </b></span>");
                                        ifsc.append(this.ifsc_code).addClass("appear");
                                        var ab= this.ifsc_code;
                                        micr.append(this.micr_code).addClass("appear");
                                        contact.append(this.contact_no).addClass("appear");
                                        address.append(this.address).addClass("appear");
                                        $('#branch_code').html('<span><b>Branch Code: </b></span>Last six characters of IFSC Code represent Branch code.');

                                    });
                            }
                        }); 
                        }else {
                           window.history.pushState('', '', '<?php echo base_url($bank_rename.'/ifsc-code'); ?>/'+countryName+'/'+stateName);
                           $('#dataDisplay').html('Select State, District, Branch Name to Display Details Here'); 
                           $('#branch_code').html("").removeClass("appear");
                           $('#ifsc').html("").removeClass("appear");
                           $('#micr').html("").removeClass("appear");
                           $('#contact').html("").removeClass("appear");
                           $('#address').html("").removeClass("appear");
                        }
                });
        });

HTML Code:

<td><p id="ifsc"></p></td>

Controller:

public function getBranchDetail(){
    $branch = array();
    $city_id = $this->input->post('city_id');
    if($city_id){
        $con['conditions'] = array('id'=>$city_id);
        $branchData = $this->Bank_model->getBranchData($con);
    }
    echo json_encode($branchData);
}

Model:

function getBranchData($params = array()){
    $this->db->select('c.micr_code, c.ifsc_code, c.contact_no, c.address');
    $this->db->from($this->branchTbl.' as c');

    //fetch data by conditions
    if(array_key_exists("conditions",$params)){
        foreach ($params['conditions'] as $key => $value) {
            if(strpos($key,'.') !== false){
                $this->db->where($key,$value);
            }else{
                $this->db->where('c.'.$key,$value);
            }
        }
    }

    $query = $this->db->get();
    $result = ($query->num_rows() > 0)?$query->result_array():FALSE;

    //return fetched data
    return $result;
}

If somebody can tell me how to access only a single field of database ifsc_code in the view page , then it can also be helpful. I am stuck here...

Answer 1

If I understood correctly you would like to dynamically update metadata when you do above request. You have an ajax call in your script which is only returning one object, you can instead send metadata info in the request as follow.

in your controller file

public function getBranchDetail(){
    $branchData = array();
    $branchData['meta_title'] = 'Your meta title here';
    $branchData['meta_description'] = 'Your meta description here';
    $branchData['members'] = array();// good practice to setup default
    $city_id = $this->input->post('city_id');
    if($city_id){
        $con['conditions'] = array('id'=>$city_id);
        $branchData['members'] = $this->Bank_model->getBranchData($con);
    }
    echo json_encode($branchData);
}            

and in your ajax call

$.ajax({
    type:'POST',
    url:'<?php echo base_url('bank/getBranchDetail'); ?>',
    data:'city_id='+cityID,
    success:function(data){
        var dataObj = jQuery.parseJSON(data);
        document.title = dataObj.meta_title; // set document title
        $('meta[name=description]').attr('content',dataObj.meta_description;); // set meta description
        $(dataObj.members).each(function(){
        //... your other code
        });
    }
});

I have created an associative array which values are being assigned in your ajax call.

Edit:

your html should contain these values

<html>
    <head>
        <title>Your Title</title>
        <meta name="description" content="meta desription">
        .....
    </head>
    <body>
        .....
    </body>
</html>