I have a simple jQuery Mobile application that is hosted on one server (server1.com) which includes some php pages that query a database hosted on another server (server2.com).
This all works fine when everything (jQuery Mobile website and Database) is hosted on the same server but when they are separated it doesn't display any of the data. I've been looking at the Configuring Defaults documentation at:
http://api.jquerymobile.com/global-config/
and specifically the allowCrossDomainPages option. I've created a new script file called custom-scripting.js which contains the following:
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
allowCrossDomainPages: true
});
});
and the called it as recommended:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="custom-scripting.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
but my PHP page is still not making the request to server2.com. I was hoping that setting allowCrossDomainPages: true would allow the PHP page to make the request to the external server.
Anyone else setup a similar configuration with jQuery Mobile that needs to retrieve data from an external server using php?
Related
I have a chrome extension that was working on the manifest version 2 without a problem. I had some javascript in the background that included web assembly and required wasm-eval. I have converted the extension to manifest version 3, which doesn't allow wasm-eval or unsafe-eval any more. What I did for a solution is I created a new window (mainpage.html) from the extension and this window includes an iframe (sandbox.html) and this iframe includes the web assembly code and communicates with the background service worker with postMessages.
I am wondering if there is a solution without opening a new window for my case. Something that will run the sandbox.html running in the background and the service worker can communicate with it. I tried to put the sandbox.html to the service worker, but the service worker doesn't accept html files running inside.
Popup script is not a solution because the user needs to click the extension icon to make it running. Content script worked but if the website has a content security policy that doesn't allow unsafe-eval, then it won't work. I need a more general solution.
There is something explained here with the Event pages for which I have no idea, and I believe it is deprecated as well. Service worker cannot have access to the DOM. https://developer.chrome.com/docs/extensions/mv3/sandboxingEval/
this is from the manifest.json
"sandbox": {
"pages": ["sandbox.html"]
}
this is what mainpage.html looks like
<iframe id="theFrame" src="sandbox.html" style="display: none;"></iframe>
<script src="mainpage.js"></script>
this is what the sandbox.html looks like
<script src="wasm_exec.js"></script>
<script src="wasm_startup.js"></script>
<script src="assign_result.js"></script>
<script src="event_listener.js"></script>
How and where to put your own JS files in JQueryMobile web applications?
Some suggestions I found:
only in the first page of the web app, usually index.html
inside the JQM page
Which one is better approach?
After your jQuery Library and BEFORE your jQuery mobile library. I place all my script tags at the end of the body...but that's not a must...
<script type="text/javascript" src="jQuerySource.js">
<script type="text/javascript">
/*Your stuff*/
</script>
<script type="text/javascript" src="jQueryMobileSource.js">
Why?: Because when you're building your jQM application you're going to want your event bindings to be defined before jQuery mobile gets initialized and fires the 'mobileinit' event and your first page's 'pageinit' event.
Just put your script after the JQM script tag
Yeah, that's all
It is a good idea to use jQueryMobile javascripts from Google CDNs because of following reasons:
1. You can directly include minified version in your pages.
2. You save bandwidth cost
3. Most importantly there are good chances that the JS might already be loaded on your user browser's. Because many other web apps use them.
So you should use
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
So, if all your code is inside document.ready() ; you can use it at end [ which loads the page faster]
I am using relative path to include jquery mobile. But when loading thru a secure(https) link, the imports are failing. I do the following :
<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
jquery from googleapis goes thru fine. But I get the the following error for mobile .js and .css imports above.
Failed to load resource https://code.jquery.com/mobile/1.1.0/jquery.mobile.min.css
Failed to load resource https://code.jquery.com/mobile/1.1.0/jquery.mobile.js
Sorry if this seems like a pedestrian question, I am new to this.
If you click on both of the failed resource links, you'll understand why.
code.jquery.com doesn't have a valid SSL certificate.
As Quinn says, you should copy those JS files to your server and serve them yourself, or set up a proxy page in PHP or another scripting language that will fetch the files over HTTP and serve them up from your server.
I'm trying to integrate DotNetOpenAuth with a site that uses jquery mobile. I'm running into an issue where jquery mobile appears to be canceling a 302 redirect to the providing party (an external site) that the server is responding with.
I've tried turning off the default jquery mobile ajax handling with the following in the mobileinit event:
$.mobile.ajaxEnabled = false;
If I take jquery mobile out of the picture the 302 redirect is handled correctly and the OpenID integration with the providing party works fine.
Can anyone tell me how to make jquery mobile correctly handle the 302 redirect to an external site?
For forms just set "data-ajax" attribute to false.
It should be like this:
<form action="postthis" method="post" data-ajax="false">
This will disable default ajax handling of jQuery mobile.
Reference: http://jquerymobile.com/test/docs/forms/forms-sample.html
I had the same problem and was able to login after adding rel="external" to the login link, see example below
Login
I'm not sure if this is the solution you are looking for?
To disable Ajax you should add this script just before the script reference to jquery mobile:
<script language="javascript" type="text/javascript">
$(document).bind('mobileinit', function () {
$.mobile.ajaxEnabled = false;
});
</script>
Redirecting to an external url does work if you don't use Ajax.
But there should be an alternative where you don't need to disable Ajax.
I've built an mvc application which contains some jquery code. When I run the app from my ide, everything works perfectly. When I publish to the server and open the page, the jquery does not work. I get object expected errors.
Could this be due to my file mappings? here is a sample of my mapping in the app -
<script type="text/javascript" href="../../Scripts/jquery-1.3.2.js"></script>
I published the app to iis7 successfully, but the jquery is broken. I did publish to an application within an existing web site.
Any thoughts?
You may be experiencing problems with your relative path.
You can try this, which is a path from the application root:
<script type="text/javascript" href="/Scripts/jquery-1.3.2.js"></script>
Or this C# solution:
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>" type="text/javascript"></script>