laravel 5 ajax POST

hi guys here is basic AJAX POST on laravel 5 i hope this will help for your advance project

 thank you

Route::group(['prefix' => 'ajax'], function() {

    Route::get('/ajax', 'AjaxController@ajax');
    Route::post('/ajaxpost', 'AjaxController@ajaxpost');

});
 

<pre class="java" name="code">
             <input id="name" name="name" type="text" value="hello channa" />
             <input id="__token" name="__token" type="hidden" value="uAVNLARzB2zKp2hJElHXNRGSGLJ0gwqibXyqRXci" />

             <input class="submit" id="submit" type="submit" />

           
<div id="loadingmessage" style="display: none;">
<img src="loading.gif" />                                                                            
  </div>
<div id="my_div">
</div>
<script>

        $('#submit').click(function(){
        $('#loadingmessage').show();  // show the loading message.
        $.ajax({
            type: "POST",
            url: "http://localhost/bitbuckt/public/staff/ajaxpost",
            dataType: "html",
            data: { "_token" : "uAVNLARzB2zKp2hJElHXNRGSGLJ0gwqibXyqRXci" },
            success: function( response) {
              $('#my_div').html(response);
              $('#loadingmessage').hide(); // hide the loading message
     
            }
          });

        });

        </script>

</pre>
create view form under resources -&gt; view -&gt; ajax -&gt;ajax.blade.php
i passed _token key with data

create response action on AjaxController

 

    public  function ajaxpost()
    {

        print_r('data response ');
    } public  function ajax()
    {
        return view('staff.ajax');
    }

 

Read More

print div contain using JS

 



text area for print

Read More

onload DIV

Read More

change the color of scrollbars

add this in your style .css  to change the color of the scrollbars on my pages in Internet Explorer and Firefox

::-webkit-scrollbar {
width: 12px;
height: 4px;
background: rgba(111, 78, 78, 0.35);
}
::-webkit-scrollbar-thumb {
background-color: rgba(145, 36, 66, 0.99);
-webkit-border-radius: 1ex;
}

Read More

Yii Gridview CButton style

This  code shows about how to add a custom button with your own icon for your CGridView of Yii framework.“view”, “update”, “delete” button and it have corresponding actions. We can change it using CButtonColumn properties.

 widget('zii.widgets.grid.CGridView', array(
                'id'=>'modelname-grid',
                'dataProvider'=>$model->search(),
                'filter'=>$model,
                'columns'=>array(
          'rowname1',
  'rowname2',  
                        array(
                                'class'=>'CButtonColumn',
                                'template'=>'{view}{update}{delete}',
                            'deleteButtonImageUrl' => Yii::app()->theme->baseUrl .'/images/'.'close-button.png',
                            'deleteButtonOptions'=>array(
                                    'class'=>'delete_class',
                                    'id'=>'delete_id',
                                    ),
                            'updateButtonImageUrl' => Yii::app()->theme->baseUrl .'/images/'.'edit-button.png',
                            'updateButtonOptions'=>array(
                                    'class'=>'update_class',
                                    'id'=>'update_id',
                                    ),
                            'viewButtonImageUrl' => Yii::app()->theme->baseUrl .'/images/'.'view-button.png',
                            'viewButtonOptions'=>array(
                                    'class'=>'view_class',
                                    'id'=>'view_id',
                                    ),

                        ),
                ),
        )); ?>


 

---

if you want add this in YII framework follow this

open \CButtonColumn.php

..\yii\framework\zii\widgets\grid\CButtonColumn.php

defult code[line 215] function initDefaultButtons()

 


protected function initDefaultButtons()
 {
  if($this->viewButtonLabel===null)
   $this->viewButtonLabel=Yii::t('zii','View');
  if($this->updateButtonLabel===null)
   $this->updateButtonLabel=Yii::t('zii','Update');
  if($this->deleteButtonLabel===null)
   $this->deleteButtonLabel=Yii::t('zii','Delete');
  if($this->viewButtonImageUrl===null)
   $this->viewButtonImageUrl=$this->grid->baseScriptUrl.'/view.png';
  if($this->updateButtonImageUrl===null)
   $this->updateButtonImageUrl=$this->grid->baseScriptUrl.'/update.png';
  if($this->deleteButtonImageUrl===null)
   $this->deleteButtonImageUrl=$this->grid->baseScriptUrl.'/delete.png';
   
   
}   


 

update code function initDefaultButtons()

 


protected function initDefaultButtons()
 {
  if($this->viewButtonLabel===null)
   $this->viewButtonLabel=Yii::t('zii','View');
  if($this->updateButtonLabel===null)
   $this->updateButtonLabel=Yii::t('zii','Update');
  if($this->deleteButtonLabel===null)
   $this->deleteButtonLabel=Yii::t('zii','Delete');
  if($this->viewButtonImageUrl===null)
   $this->viewButtonImageUrl=Yii::app()->theme->baseUrl .'/images/'.'view-button.png';                
  if($this->updateButtonImageUrl===null)
   $this->updateButtonImageUrl=Yii::app()->theme->baseUrl .'/images/'.'edit-button.png';
  if($this->deleteButtonImageUrl===null)
   $this->deleteButtonImageUrl=Yii::app()->theme->baseUrl .'/images/'.'close-button.png';
   
   
}   

Read More

create div stick to top when scrolled

There are times when you would want to display a DIV bar at the top of the page when your scrolls on the page top or down  and it should go back to its original position when the user scrolls back up.
jQuery code:




/ executed when the viewr scrolls the page.
$(window).scroll(function(e) {
    // Get the position of the location where the scroller starts.
    var scroller_anchor = $(".scroller_anchor").offset().top;
     
    // Check if the user has scrolled and the current position is after the scroller start location and if its not already fixed at the top
    if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed')
    {    // Change the CSS of the scroller to hilight it and fix it at the top of the screen.
        $('.scroller').css({
            'background': '#CCC',
            'border': '1px solid #000',
            'position': 'fixed',
            'top': '0px'
        });
        // Changing the height of the scroller anchor to that of scroller so that there is no change in the overall height of the page.
        $('.scroller_anchor').css('height', '50px');
    }
    else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative')
    {    // If the user has scrolled back to the location above the scroller anchor place it back into the content.
         
        // Change the height of the scroller anchor to 0 and now we will be adding the scroller back to the content.
        $('.scroller_anchor').css('height', '0px');
         
        // Change the CSS and put it back to its original position.
        $('.scroller').css({
            'background': '#FFF',
            'border': '1px solid #CCC',
            'position': 'relative'
        });
    }
});

             

      

HTML Code:

    

What if drugs were legal? Could you imagine what it would do to our society? Well according to John E. LeMoult, a lawyer with twenty years of experience on the subject, feels we should at least consider it. I would like to comment on his article "Legalize Drugs" in the June 15, 1984, issue of the New York Times. I disagree with LeMoult's idea of legalizing drugs to cut the cost of crime.
    
  
    
   
  
    
This is the scrollable bar
     
    
     
   What if drugs were legal? Could you imagine what it would do to our society? Well according to John E. LeMoult, a lawyer with twenty years of experience on the subject, feels we should at least consider it. I would like to comment on his article "Legalize Drugs" in the June 15, 1984, issue of the New York Times. I disagree with LeMoult's idea of legalizing drugs to cut the cost of crime.
 



      

CSSCode:

.container{font-size:14px; margin:0 auto; width:960px}
.test_content{margin:10px 0;}
.scroller_anchor{height:0px; margin:0; padding:0;}

.scroller{background:#FFF; border:1px solid #CCC; margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;}

      

Read More

GRID & LIST Switch by Using Bootstrap

HTML Code:

    

        Category Title
        

            
            List Grid
        
    
    

        

            

                
                

                    

                        Product title
                    

                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    

                        

                            

                                $21.000
                        
                        

                            Add to cart
                        
                    
                
            
        
        

            

                
                

                    

                        Product title
                    

                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    

                        

                            

                                $21.000
                        
                        

                            Add to cart
                        
                    
                
            
        
        

            

                
                

                    

                        Product title
                    

                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    

                        

                            

                                $21.000
                        
                        

                            Add to cart
                        
                    
                
            
        
        

            

                
                

                    

                        Product title
                    

                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    

                        

                            

                                $21.000
                        
                        

                            Add to cart
                        
                    
                
            
        
        

            

                
                

                    

                        Product title
                    

                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    

                        

                            

                                $21.000
                        
                        

                            Add to cart
                        
                    
                
            
        
        

            

                
                

                    

                        Product title
                    

                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    

                        

                            

                                $21.000
                        
                        

                            Add to cart
                        
                    
                
            
        
    

      

CSS Code:

JQ Code:

                                                                              GRID

LIST

Read More

Rating star html & JS

html Code:

JS Code:

b>CSS Code:

// ------------------- show rate only -----------------------------------------

 // ------------------- show rate only -----------------------------------------
 
   

                  

                  

                  

                  

                  

                      
        
 

Read More

rating stars

HTML Code:

CSS Code:

.rating {
    float: left;
}
.rating span {
    font-size: 25px;
    cursor: pointer;
    float: right;
}

.rating span:hover, .rating span:hover ~ span{
    color: red;
}


      

JS Code:

$('.rating span').click(function(){
    alert($(this).attr('id'));
})

      

Read More

onClick selected value in input box Java script

i  have div, which has one input box and it generates some values in <ul><li> through ajax, now I wanted to select one of the values from <li> and set it in that input box using simple javascript.






html Code:

    

          
    
        

            
1
            
2
            
4

            
4
            
5
        
    
    
    


      

JS Code:

Read More

CHtml - textField () YII

Example 1: Create a blank text field

 

RESULT

 




Example 2: Create a text box with the name and Value

 



RESULT

 




Example 3: Create a text box with custom attributes: id, width, maxlength

  'id' ,    'width' => 100 , 
        'maxlength' => 100 )); ?>

RESULT

 




Example 4: Create a text box with the attribute disabled. 

  True)); ?>

RESULT

 

      

Read More