Include Ajax in Wordpress in a Blank Theme - ajax

I have a one page wordpress theme that I start develop from blank.
It's really basic. Just have two files:
index.php
style.css
In another themes the plugin "contact form 7" do all the job without reload the page.
But when I activate my theme and try to use the contact form 7, after click on submit button the page reload and my url get a #wpcf7-f519-o1.
So I believe that some code is missing in my theme.
Basically this is my theme:
<html>
<head></head>
<body> </body>
</html>
I don't have any call to footer or header or functions because I put all the code on a simple page.
So the question is: What should I do to make ajax work?

I found a fix.
Step 1 - insert
<?php wp_head(); ?> after <head> tag
Step 2 - insert <?php wp_footer(); ?> before </body> tag
<head>
<?php wp_head(); ?>
your code...
</head>
<body>
your code...
<?php wp_footer(); ?>
</body>

Related

YOURLS Short URL to Domain

Morning - I'd like to redirect my short url ie: https://sho.rt to my domain https://short.com
At the moment my sho.rt is pointing at the admin panel. Could you please advise as to how I'd redirect.
Thank you
You will need to build an index.php file that sits in the yourls top level directory. A simple example of how to redirect using html is.
<html>
<head>
<title>Your Site Title</title>
<script>
window.location.replace("https://www.yourwebsite.com");
</script>
</head>
<body>
<h2>If you are not automatically redirected in 5 seconds, Click Here</h2>
</body>
</html>

How Load asset only once laravel 5.3?

How Load asset only once. if i open dashboard, all asset will be load and then i open other page, not load asset second time..
how to make load asset only once in blade template?
ex:
template.blade.php
#yield('css')
#yield('js')
dashboard.blade.php
#section('css')
//some code here
#endsection
group.blade.php
#section('css')
//some code here
#endsection
any help me?
thanks
That's not how the HTTP protocol works. The HTTP protocol is stateless, meaning it does not remember that a user visited the dashboard before they visited group.
The only assurance you have is that when a user visits the dashboard the CSS of the dashboard will be cached so subsequent requests for them will load them from the cache and not from the webserver.
However you must assume that a user could visit group first so all required CSS for group must be included in the group template, even if that means that means you'll be replicating some CSS for each page.
If you really want to load each asset only once then you should use a JavaScript library like jquery mobile to specify different sections that are loaded via AJAX. However the how and why is way too broad a question to cover here.
Why you loading asset with #yield? Just load it on your layouts.
For example app.blade.php which in layouts folder.
app.blade.php
<html>
<head>
<link rel="stylesheets" href="{{asset('css/style.css')}}"/>
<title>title goes here</title>
</head>
<body>
#yield('content')
<script src="{{asset('js/jquery.js')}}"></script>
</body>
</html>
Then load layout on any view for example dashboard
dashboard.blade.php
#extends('layouts.app) //it loads all template data from layouts(app.blade.php)
#section('content')
content for dashboard
#endsection

Highlight.js not workng on Laravel 5.3 Target Page

I am developing a Blog with Laravel 5.3. In the Add Post Page, I use CKEDITOR with Code Snippet Plugin. In this area Everything is OK. Code added in the textarea field by plugin is also become highlighted.
In the Target Page I added:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css">
In the Header section of the page.
and
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
In the footer section of the page.
The page received the following html code from the Database.
<p>The place for Laravel Blade Template.</p>
<pre>
<code class="language-html"><div><h1>
This is a Header</h1></div></code></pre>
<p> </p>
which is showing like this.
<p>The place for Laravel Blade Template.</p> <pre>
<code class="language-html"><div><h1>This is a Header</h1></div></code>
</pre> <p> </p>
So the code section is not highlighted.
How can I do that. What's my wrong? I need Help.
The problem is, that the whole HTML code is escaped, so it won't be interpreted by the browser.
What you want is that only the content between <code class="language-html">...</code> is escaped, so that the Browser renders the code container correctly and that highlight.js can hook into the DOM object.
In Laravel 5 to output non escaped HTML you must use {!! !!}
An example of this:
{!!$myDatabaseHtml!!}

Print order in Magento 1.7 not using theme CSS

I've successfully setup my theme and using it for the rest of my site on Magento 1.7, however the print order screen (http://<my-domain>/index.php/sales/order/print/order_id) seems to be ignoring local.css and using all of the styles from styles.css.
For example button.button span from styles.css is being used for the Close button when I have this in local.css and the rest of the site uses this. I've even tried to set a more specific selector but this gets ignored.
Is there something simple I'm missing on this screen as I haven't had this problem anywhere else.
Edit: Workaround solution: I viewed the source HTML of the page and can definitely see that local.css is not loaded anywhere in the page. On other pages I can see it being pulled in. Seems like a bug in Magento 1.7.0.2, so I copied /app/design/frontend/base/default/template/page/print.phtml to my template path(/app/design/frontend/default/<my-theme>/template/page/print.phtml) and fixed.
It seems this block isn't doing what it's meant to do and does in other pages
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
So in my copy of the file in my template directory I added the line below just before </head> which worked.
<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('css/local.css') ?>" media="all" />
I logged a defect here: http://www.magentocommerce.com/bug-tracking/issue?issue=15841

CodeIgniter and jQuery Mobile 1.2

I have a CodeIgniter web app I'm trying to convert (UPDATE: I'm trying to overlay the JQM UI) [to a jQuery Mobile app]. I'm having problems setting up tabs that link to my CodeIgniter controllers.
This is the code in my "header.php" view - inside a <div data-role="page"></div>. This is called by a main controller, which works fine. Now, the problem: I am trying to set up my jQuery Mobile navbar tabs to call a new controller called inbox.
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
Inbox
</li>
</ul>
</div>
</div>
Without jQuery Mobile, the link works fine and triggers the Inbox CodeIgniter controller, but with JQM enabled in my header.php view, I get a "404 Not Found" page when I click on the Inbox tab.
Update - this jQuery code in the html head:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/all-mobile.css" type="text/css" media="screen"/>
<link rel="icon" href="<?php echo base_url(); ?>assets/images/logo.png" />
<link rel="apple-touch-icon-precomposed" href="<?php echo base_url(); ?>assets/images/logo.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
Update 2: If I insert this code in t.js to remove the automatic ajax links:
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
and my new head html code is now:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/t.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
… the jQuery Mobile does load up but the "inbox" link still generates a 404 page by CI.
UPDATE 3: I determined it's a problem with something local. When I upload the CI code and the new jQuery Mobile scripts to my web server, the tab linking to my inbox.php controller does in fact work! Does anyone know why it doesn't work on my local machine using MAMP? Now, it appears that I can't develop and test locally with this configuration. Is there a fix?
Looking at allowCrossDomainPages at jquerymobile.com/demos/1.2.0/docs/api/globalconfig.html I added $.mobile.allowCrossDomainPages = true; to the jQuery initialization but it did not help the localhost server running MAMP serve up the inbox.php controller - still 404.
UPDATE 4: PROBLEM SOLVED. It turns out there was a problem in the hidden file .htaccess. To rewrite the URI, it contains a "RewriteBase /myapp-mobile/"; this directory became incorrect when I moved it over to the new folder under htdocs.
As per the documentation:
Working with jQuery Mobile's Auto-initialization - Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile
automatically applies many markup enhancements as soon as it loads
(long before document.ready event fires).
And...
ajaxEnabled (boolean, default: true): jQuery Mobile will automatically handle link clicks and form submissions through Ajax,
when possible. If false, url hash listening will be disabled as well,
and urls will load as regular http requests.
Looks like it treats all links as ajax requests unless you specifically set that option to false within the mobileinit function, which you don't yet have.
Use this function below to force jQuery mobile to treat all links as normal http requests.
$(document).bind('mobileinit', function(){
$.mobile.ajaxEnabled = false;
// other options to enable on intialization
});

Resources