Why is this JQuery Ajax call not working in PhoneGap - ajax

i'm using PhoneGap with JQuery mobile ajax to retrieve some records from a database here's my code !! but unfortunately its not working
can somebody tell me what's wrong
<script>
$(document).ready(function() {
$('#cont').bind('pageshow', function () {
$.get('http://tech-tude.com/freedomwobas/getepisodes.php', function (data) {
$(this).find('div[data-role="content"]').append(data);
});
});
});
</script></head><body ><div data-role="content"></div>

You need to (at least) wait for the device to be ready. Try this:
<script>
function onDeviceReady() {
$('#cont').bind('pageshow', function () {
$.get('http://tech-tude.com/freedomwobas/getepisodes.php', function (data) {
$(this).find('div[data-role="content"]').append(data);
});
});
}
$(document).ready(function() {
document.addEventListener("deviceready", onDeviceReady, true);
});
</script></head><body ><div data-role="content"></div>

Related

Google API Signout Not working

I integrate google login api and It works fine but there is an error in logout.The sign out process is not working.The logged user will not sign out after click the sign out link function.
This is my code:
<meta name="google-signin-client_id" content="here my api .apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Sign Out
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
if(profile.getEmail()!="") {
var myKeyVals = { token : googleUser.getAuthResponse().id_token }
$.ajax({
type: "POST",
url: "validate.php",
data: myKeyVals,
dataType: "text",
success : function(data) {
window.location = "page";
}
});
}
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
});
}
</script>
Here signOut js function is not working and the page will auto reload and go to adminpage.
This is my document.
Thanks in advance.
this works for me instead of http://localhost/application-name/logoutUser you can add your domain name
document.location.href = "https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=http://localhost/application-name/logoutUser";
This works for me,
Simply modify the signout function as follows,Here carefully note that reload() method is used to reload the current document soon after signout.
<button onclick="myFunction()">Sign Out</button>
<script>
function myFunction() {
gapi.auth2.getAuthInstance().signOut().then(function () {
console.log('User signed out.');
location.reload();
});
}
</script>
May be this will help.
const onGoogleSignOut = () => {
// using google logout redirect
//location.href = 'document.location.href = "https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=' + window.location.href;
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut()
.then(function () {
auth2.disconnect();
console.log('User signed out.');
//location.reload();
});
}
This worked for me. Full JS function code.
The asterisks are just an example of how to define the URL you want to redirect to after the logout is performed.
<button onclick="myFunction()">Sign Out</button>
<script>
function myFunction() {
location.href = 'https://accounts.google.com/Logout?&continue=http://******.com/';
}
</script>
Save this in a HTML file and access it from the browser where you are logged into the account you want to log out of. Can also be placed in a PHP file ETC. AS long as you dont place it in a manner that breaks the existing script.

Jasmine tests for Durandal events

I was surprised that I didn't find any help in the documentation or a blog post about this.
I'm trying to add tests to make sure the eventing is setup correctly and stays that way.
The durandal app and events objects from Require are null. So there must be a setup step before they become available that I'm not aware of.
I have this Knockout view model:
define([
'knockout',
'durandal/events',
'durandal/app',
'Common/Modules/KoComponents/slideInEventListKeys'
],
function (ko, durandalEvents, durandalApp, slideInEventListKeys) {
function SlideInVm(params) {
// listen for anyone broadcasting this specific event.
durandalEvents.includeIn(this);
var _this = this;
durandalApp.on(slideInEventListKeys.open).then(function () {
_this.isShowing(true);
});
durandalApp.on(slideInEventListKeys.close).then(function () {
_this.isShowing(false);
});
}
SlideInVm.prototype.isShowing = ko.observable(false);
});
and in Jasmine:
define([
'knockout',
'Common/Modules/slideInVm',
'durandal/events',
'durandal/app',
'Common/Modules/slideInEventListKeys'
],
function (ko, SlideInVm, durandalEvents, durandalApp, slideInEventListKeys) {
'use strict';
describe('Given the Slide In component', function () {
var vm;
beforeEach(function(){
vm = new SlideInVm();
});
it('Should subscribe for open events', function () {
debugger;
// events and app are null!
// how to check this?
});
it('Should subscribe for close events', function () {
});
describe('When opening', function(){
beforeEach(function(){
// how to trigger this if app is null?
app.trigger(slideInEventListKeys.open);
});
it('Should show the component', function(){
expect(vm.isShowing()).toBeTruthy();
});
});
});
});

add code to ajax post form submit

i have the next code
$(document).ready(function () {
$("#productfilter").validate({
submitHandler: function (form) {
$.ajax({
type: "POST",
url: "listproresult_core.php",
data: $("#productfilter").serialize(),
beforeSend: function () {
$("#contentincore").html("<img src='../loading_core/loading animated/loader.gif'class='clock' border='0' />");
},
success: function (result) {
$("#contentincore").html(result);
}
});
}
});
});
and i wish add the next functions inside and that the results of the form, the links are implemented inside the load function results
$('#contentincore a').click(function (e) {
("#contentincore").on("click", "a:not(.minlink)", function (e) {
("#contentincore").load($(this).attr("href"));
e.preventDefault();
});
});
To bind functions to content that is loaded in with ajax, you have to use .on(). Here's a live example: http://jsfiddle.net/GMDah/ (check the console) When pressing the top link, "pressed" will be printed in the console. When the bottom link with class .minlink is pressed, the code in here is not executed.
The code being:
$("#contentincore a:not(.minlink)").on("click", function (e) {
console.log("pressed");
});
Also, don't forget putting the $-sign or jQuery before your brackets, you seem to have missed a few.

Bootstrap load AJAX content in Inactive Tab

I'm building a site utilising Bootstrap tabs and AJAX. I've set it up so that when a link with the class of .load is clicked the content of that html document is loaded into the active tab, in this case #tab2.
This is done using the following:
$(function(){
$("#tab2").delegate('.load', 'click', function (e) {
e.preventDefault();
$("#tab2").load($(this).attr("href"));
});
});
I also need some links in #tab2, those with the class of .load-tab1 to load content into #tab1, which I have achieved with the following code.
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"));
});
});
The problem is I can't work out how to make it so that when .load-tab1 links are clicked the active tab is also switched from #tab2 to #tab1.
Any help would be greatly appreciated!
UPDATE:
I was able to get it working with the following code but still thinking there is a better solution.
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"));
$(".tab2").removeClass("active");
$(".tab1").addClass("active");
$(".tab-content #tab2").removeClass("active");
$(".tab-content #tab1").addClass("active");
});
});
You should select the tab in the .load() callback:
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"), function(response, status, xhr){
$( theFirstTabAnchorSelector ).tab('show');
});
});
});

squeezebox ajax mootools

I use the modal window a fair bit in joomla and just found out that it doesn't work with ajax added links. What is the code I need to have the modal window work with those links?
I'm better at jquery than moo tools ...
Thanks,
Mat
I found this code but can't get it to work.
<script type="text/javascript">
window.addEvent('domready', function() {
SqueezeBox.initialize({
ajaxOptions: {
evalScripts: true
}
});
//SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
window.addEvent('domready', function() {
window.addEvent('load', function(){
//alert('clicked!');
SqueezeBox.fromElement($('a.modal'));
});
});
</script>
I use Rokbox (Mootools) from Rockettheme available for free here : http://www.rockettheme.com/extensions-downloads/club/1005-rokbox
A must have :)

Resources