Edit headers of fancybox ajax request

Question

Hello I am trying to alter ajax request headers while opening fancybox. So far I can not seem to make it work even according to documentation. After stating type to be ajax i should be able to edit ajax according to jquery documentation.

So far it does work without headers like this (everything is inside jQ on click event):

$.fancybox.open( $(this), {
        type: 'ajax',
        helpers: {
            overlay: {
                locked: false
            }
        }
    });

The problem comes when i try to alter ajax request. This is what i tried and does not work:

$.fancybox.open({
            type: 'ajax',
            ajax: {
                url: siteUrl + href,
                type: 'GET',
                headers: {
                    'fooheader' : 'bar'
                }
            },
            helpers: {
                overlay: {
                    locked: false
                }
            }
        });

What happens when I execute previous code is that it redirects me back to the same page i clicked from.

Does anyone have experience with adding headers inside fancybox ajax request?

Answer 1

Adding headers inside the fancybox ajax request:

<a href="javascript:void(0);" id="linkName" class="fancybox" >Fancybox Link Name</a>

 <script type="text/javascript">
      $(document).ready(function() {
        var name = "This is text that will be send into ajax request";              
        $("#linkName").click(function() {
          $.fancybox.showLoading(); //Loader before the ajax request
          $.ajax({
              type : "POST",
            headers: {
                  'Authorization':'Basic xxxxxxxxxxxxx',
                  'X-CSRF-TOKEN':'xxxxxxxxxxxxxxxxxxxx',
                  'Content-Type':'application/json' },
            cache : false,
            url : "testfile.php",   //File url
            data  : 'myText=' + name, //Ajax requested data
            success : function(data) {
              $.fancybox(data);  //Get response into data variable
            }
          });
          return false;
        });
      });
    </script>