CodeIgniter and jQuery Mobile 1.2 - codeigniter

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
});

Related

CSS files not being used when fetched via localhost as resource

I have a local server running on Tomcat.
There is currently a single landing page, which is some HTML with a simple CSS style.
My problem is, when I try to send the CSS file as a resource from my JAX-RS server, it shows up in the browser, however, it is not used by the browser to style the HTML.
Here is how it looks:
As you can see, the CSS is there, it's really simple, but it doesn't change the background.
Now, I tried to do the simplest version possible, where I just put the HTML and CSS in the same folder, and exclude the localhost request, just link it together, and it worked.
I send script files via this function:
#GET
#Path("/{scriptName}")
#Produces(MediaType.TEXT_HTML)
public InputStream getScript(#PathParam("scriptName") String scriptName) {
return ScriptService.getScript(scriptName);
}
In my HTML, the way I put it together in the <head> part is this:
<head>
<title>Home</title>
<link rel="stylesheet" href="http://localhost:8080/WebProject/scripts/mycss.css" type="text/css">
</head>
<body>
<div class="hello">
This is some text
</div>
<div class="hello2">
It is nice to meet you sir.
</div>
</body>
Do you guys have any idea on why this is happening?
Btw, as a side note, I use the same code to fetch my Vue.js scripts, and they work perfectly fine.

Mailchimp sign up PopUp does not work

I am trying to implement a signup PopUp from Mailchimp but as it seems, I am not able to make it working! Here's the code:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="http://s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"http://mc.us9.list-manage.com","uuid":"146962178e8704d5ccaf9c28f","lid":"e13cc10d95"}) }) </script>
</head>
<body>
<p>This is a test!</p>
</body>
</html>
If I open the html file (locally), it loads but nothing else happen. Also there is no html code embedded what I would expect it to do. Do you have any ideas?
you have to know a couple of things:
this shows your popup on page load (hence no HTML code)
it only shows once since it places a cookie, and if you already saw your popup won't bother you with it again. (try it in private mode in your browser)
Try to add in header this google libraly <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

C# MVC3: website loaded over HTTPS cannot load recaptcha security code. Chrome debugger gives a "Mixed Content error"

I have a C# MVC app that makes use of recaptcha security code in a particular view.
In my view i have the following code:
<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
...
#Html.Raw(Html.GenerateCaptcha("captcha", "white"))
#Html.ValidationMessage("captcha")
When i try to load the page, i get the following error in chrome's debugger:
Mixed Content: The page at 'https://mywebsite.com' was loaded over HTTPS, but requested an insecure resource 'http://www.google.com/recaptcha/api/challenge?k=mykey'. This request has been blocked; the content must be served over HTTPS.
and if i inspect the source of the loaded page, the razor control for recaptcha generates this script tag:
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=mykey">
the src attribute is a http url not a https url.
If anyone knows how i can overcome this error, it would be greatly appreciated.
Thanks,
Kapetanios
Ok here i am posting an answer to my own question again.
It turns out that this:
#Html.Raw(Html.GenerateCaptcha("captcha", "white"))
#Html.ValidationMessage("captcha")
was rendering this:
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=mykey"></script>
The src attribute of the script tag contained http and not https
So, to fix this issue, i just replaced the #html.raw & #html.validate with this:
<script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=mekey"></script>
<noscript>
<iframe src="https://www.google.com/recaptcha/api/noscript?k=mykey" height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea><input name="recaptcha_response_field" value="manual_challenge" type="hidden" />
</noscript>
Doing this stopped chrome debugger from getting the error.

fancyBox 2 Vimeo embedding not working

I'm trying to embed a Vimeo video using fancyBox 2. I'm able to make the lightbox pop up, but all I get is a spinning loading icon that lasts forever.
I did a bunch of searching on similar Vimeo questions here on StackExchange, but implementing things others suggested has not solved the issue.
I've now even created a fresh test site (plain HTML doc with linked files in local directory), and then used the code listed in the fancyBox documentation section on using Media Helpers (Extended Functionality) line-for-line, but that's not working either. Same loading spinner, stuck forever.
Does anyone have any ideas why this is not working? Testing in both Safari 7 and Chrome. In Safari I get the stuck loading spinner. In Chrome I get an error page within the lightbox that says "The file or directory could not be found."
Here's my code:
<!DOCTYPE HTML>
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Add fancyBox media helpers -->
<script type="text/javascript" src="js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
</script>
</head>
<body>
<a class="fancybox-media" href="https://vimeo.com/78112273">Video</a>
</body>
All I get with that is a stuck spinner and an error page.
Any help and suggestions are greatly appreciated! Thank you!
Ensure your page has a valid DOCTYPE and most importantly, note that the case seems to impact on whether the video actually gets loaded when the popup is displayed. (You need lowercase 'html' in the doctype declaration)
ie. Using:
<!DOCTYPE html>
<html>
<head>
fixed it for me... This is probably why your example works in jsfiddle.

Launching FancyBox automatically on Magento

I know this was asked before but i couldn't get it to work anyhow. What I am trying to do is to launch FancyBox on page load(on Magento). Seems simple enough but as I am not very familiar with JQuery, i am having some problems. The Code I got the work with manually clicking on the anchor is as follows:
<!-- FancyBox -->
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("a[rel=fancybox]").fancybox({
});
});
</script>
<!-- FancyBox -->
<p><a id="image_id" href="http://shop2.xsmoke.com/skin/frontend/infinitus/maxxi/images/logo-300x71.png" rel=iframeLink><img src="http://shop2.xsmoke.com/skin/frontend/infinitus/maxxi/images/logo-300x71.png" alt="" /></a></p>
What I have so far regarding automatic launch is:
jQuery(document).ready(function(){
$("#image_id").fancybox().trigger('click');
});
The rest is same. Can anyone help?
EDIT: Ok i have been trying to get it to work for hours now and I tried using plain JavaScript for clicking the anchor. I Wrote
function init(){
document.getElementById("image_id").click();
}
window.onload = init;
but it still doesn't click the anchor. When I try it on a basic html page locally it works, but on the Magento home-content.phtml on the server it doesn't.
Try
jQuery(document).ready(function(){
jQuery("a[rel=fancybox]").fancybox({});
jQuery("a[rel=iframeLink]").fancybox({});
$("#image_id").trigger('click');
});
<p>
<a id="image_id" href="http://shop2.xsmoke.com/skin/frontend/infinitus/maxxi/images/logo-300x71.png" rel="iframeLink">
<img src="http://shop2.xsmoke.com/skin/frontend/infinitus/maxxi/images/logo-300x71.png" alt="" /></a></p>

Resources