jQuery Mobile with Ajax call to remote server not working - javascript

I am trying the following code to call .asmx webserivce, however, its returning [object Object]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<link rel="stylesheet" href="icon.css" type="text/css">
<script type="text/javascript" charset="utf-8" src="js/wormhole.js"></script>
<script type="text/javascript">
document.addEventListener(
"backbutton",
function()
{
mosync.app.exit();
},
true);
$(document).bind("mobileinit",function(){
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.allowCrossDomainPages=true;
$.support.cors= true;
});
$(document).ready(function(e) {
$.ajax({
url: 'http://webservice.gkg4.com/Test.asmx/HelloWorld',
type: 'POST',
crossDomain: true,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function(result){
alert(result);
},
error: function(result){
alert(result);
}
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<img src="image/png/chat.png" alt="image">
Menu
<div data-role="popup" id="popupPanel" >
<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="b">
<li data-role="divider" data-theme="a">Menu</li>
<li>About Us</li>
<li>Contact Us</li>
<li><a href="#" id="chat" rel="external" >Live Chat</a></li>
<li>Exit</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="b">
<div style="text-align:center">
</div>
<h4><center> Member's Login</center></h4>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="left">
</div>
</div>
</div>
</body>
</html>
The URL for webservice is live so you can check the same at your end.
Any help appreciated.
Code in in document.Ready section

Is the page where you are calling from also from webservice.gkg4.com? If not, it is illegal to call ajax from a different domain, and the alert that you are seeing is actually from the error handler.
Another problem is that the contentType is json, whereas the web service is returning XML.

Related

How to make an button to make a confirmation box to do a task in Jquery and HTML

In my HTML below button and <p>is used..
<button class="btn btn-info" id ="btn">submit</button>
<p></p>
I have used Jquery to run my script whenever I click submit button as follows,
$(document).ready(function(){
$("#btn").click(function(){
$('#loading').show();
$.ajax({
type: 'POST',
url: 'testme.php',
success: function(data) {
//alert(data);
$("p").text(data);
$('#loading').hide();
}
});
});
});
This works fine and I could see the loading screen until testme.php executes.
Now I need to make a confirmation box as below before executes...
Is some one clicks Yes I need to go ahead and run my testme.php if not I need to close the window box.
I have checked some examples in below site but could not find a method to combine it with my existing code. Can someone help me on this case?
https://www.jqueryscript.net/demo/Sliding-Confirm-Dialog-Plugin-with-jQuery-Bootstrap-Confirm/
Thanks in Advance!
Update:
Here is my complete code after Rory McCrossan's answer But seems there is an issue
...
<?php
// Initialize the session
session_start();
date_default_timezone_set("Asia/Colombo");//set you countary name from below timezone list
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Anomaly Monitoring Dashboard-International Voice</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega#5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite#4.8.1"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed#6"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Sliding-Confirm-Dialog-Plugin-with-jQuery-Bootstrap-Confirm/jquery.confirm.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body style=" background-color: #F0F8FF">
<div class="wrapper">
<div class="sidebar">
<h2>Anomaly Dashboard</h2>
<ul>
</ul>
</div>
<div class="main_content">
<div id="loading" >
<img id="loading-image" src="./assets/loading.gif" alt="Loading..." />
</div>
<?php
include "adminHeader.php";
?>
<div class="mytabs">
<ul class="nav nav-tabs" role="tablist">
<li class="active">Summary</li>
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>jQuery</li>
<li>Bootstrap</li>
<li>HTML</li>
</ul>
</li>
</ul>
</div>
<div class="mytabs">
<div class="tab-content">
<div class="tab-pane active" id="summarytab">Write something for home tab</div>
<div class="tab-pane" id="SSWtab">
<div class="card">
<div class="card-body">
<form method="POST">
<div class="mb-3">
<button type='button' id ="btnnew">submit</button>
<p></p>
</div>
</form>
</div>
</div>
</div>
<div class="tab-pane" id="SBCtab">C# is also a programming language</div>
<div class="tab-pane" id="ctbtab">MySQL is a databased mostly used for web applications.</div>
<div class="tab-pane" id="jquerytab">jQuery content here </div>
<div class="tab-pane" id="bootstab">Bootstrap Content here
<ul>
<li>Bootstrap forms</li>
<li>Bootstrap buttons</li>
<li>Bootstrap navbar</li>
<li>Bootstrap footer</li>
</ul>
</div>
<div class="tab-pane" id="htmltab">Hypertext Markup Language</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(window).load(function() {
$('#loading').hide();
});
$("#btnnew").confirm({
title: "Delete confirmation",
text: "This is very dangerous, you shouldn't do it! Are you really really sure?",
confirm: function(button) {
console.log('AJAX request in progress...');
$('#loading').show();
$.ajax({
type: 'POST',
url: 'testme.php',
success: function(data) {
$("p").text(data);
},
complete: function() {
$('#loading').hide();
}
});
},
cancel: function(button) {
console.log("You aborted the operation.");
},
confirmButton: "Yes I am",
cancelButton: "No"
});
</script>
In the link in your question, it's the second example which is relevant to you. That will bind the event handler to the first button to display the confirmation dialog. From there you can place your $.ajax() logic within the confirm handler for it to be invoked when the user confirms the dialog.
Also note in the example below that I hide the loading spinner in the complete callback. This is to ensure that you don't freeze the UI in a permanent loading state if the AJAX request fails.
$("#btn").confirm({
title: "Delete confirmation",
text: "This is very dangerous, you shouldn't do it! Are you really really sure?",
confirm: function(button) {
console.log('AJAX request in progress...');
/* Commented for this demo only
$('#loading').show();
$.ajax({
type: 'POST',
url: 'testme.php',
success: function(data) {
$("p").text(data);
},
complete: function() {
$('#loading').hide();
}
});
*/
},
cancel: function(button) {
console.log("You aborted the operation.");
},
confirmButton: "Yes I am",
cancelButton: "No"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Sliding-Confirm-Dialog-Plugin-with-jQuery-Bootstrap-Confirm/jquery.confirm.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<button class="btn btn-info" id="btn">submit</button>
<p></p>

Javascript only running on first view (first page) - jQuery Mobile

Possible related error from firebug: ... Cannot call methods on listview prior to initialization; attempted to call method 'option'
I am making this app that requires you to type the answer of a certain ´level´ to go to the next one. The answer is in a list and should only display on exact match for the search. Below is my html for the first two pages and my javascript for hiding the answer untill exact match is provided.
However it ONLY works on the first view (page) and doesn´t work on the second, third, fourth and so on! I really spent a loooong time trying to fix this and I am lost. The only thing that worked for me so far was a prefetch-data="true", but it only works to some extent and stops working after page 3. Other then that I´ve tried to implement many solutions I found here and there but none do what I want. I hope there is some simple thing I am doing wrong.
Why does the script only run on the first view and how do I fix it?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>PARestaurant</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="style" href="images">
<style type="text/css"></style>
<script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!-- Page Index
Home Page
Level Two
Level Three
Level Four
-->
<!-- -----------------------------------------------------------Home Page----------------------------------------------------------- -->
<div data-role="page" id="232114125125124124" data-theme="b">
<div data-role="header" data-theme="a" align="center">
<h1>Star Riddle</h1>
</div>
<div data-role="content" align="center">
<div data-role="collapsible">
<h2>Ready when you are!</h2>
<div>
<ul class="whatever" data-role="listview" data-filter="true"
data-filter-reveal="true" data-inset="true"
data-filter-placeholder="">
<li data-filtertext="Green">You are a genius!</li>
</ul>
</div>
</div>
<div id="blue"></div> <h2>+</h2> <div id="yellow"></div>
</div>
<div data-role="footer" align="center">
<h1>Level 1</h1>
</div>
</div>
<!-- -----------------------------------------------------------Level Two----------------------------------------------------------- -->
<div data-role="page" id="32432532462362345325235235" data-theme="b">
<div data-role="header" data-theme="a" align="center">
<h1>Star Riddle</h1>
</div>
<div data-role="content" align="center">
<div data-role="collapsible">
<h2> You know what to do! </h2>
<div>
<ul class="whatever" data-role="listview" data-filter="true" data-filter-reveal="true" data-inset="true" data-filter-placeholder="">
<li data-filtertext="Level 1">Click me to go back!</li>
<li data-filtertext="Level 3">Up you go!</li>
<li data-filtertext="Level 4">You have to struggle a bit</li>
<li data-filtertext="Level 5">Not so fast</li>
<li data-filtertext="Level 6">No No NO!</li>
<li data-filtertext="Level 7">Stop it...</li>
</ul>
</div>`enter code here`
<div><p>Where do you wanna go?<p></div>
</div>
</div>
<div data-role="footer" align="center">
<h1>Level 2</h1>
</div>
</div>
JAVASCRIPT BELOW
exactMatch = function( text, searchString ) {
return !( text.toLowerCase() == searchString );
};
$(function () {
$(".whatever").listview('option', 'filterCallback', exactMatch);
});
}
Instead of
$(function () {...
Try something like this:
$(document).on( "pageinit", function( e ) {
$(e.target).find(".whatever").listview('option', 'filterCallback', exactMatch);
});
pageinit runs once as each page you visit is initialized for the first time.

How to refresh div with updated php code in jQuery Mobile?

Within a jQuery Mobile page, I have a div which needs to be refreshed after a php mysql JSON call is made. This call updates the number of entries in a database. This update needs to be displayed within the div. I searched stackoverflow and found .listview("refresh"), .trigger("create") and other potential solutions but could not get to work. I think .listview("refresh") is not applicable since I am not using a list.
The main page has two mobile pages within it #outerwrap0 and #outerwrap1:
<html lang="en">
<head>
<title></title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="models/site-templates/themes/whiteBackNavy.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/shuffleMainJplayerJQM1.1.js"></script>
</head>
<body>
<!--*** PAGE 0 ***-->
<div data-role="page" id='outerwrap0' class="outerwrap" data-url="/account_m.php">
<div class="mineBox">
... php ...
</div
</div
<!--*** PAGE 1 ***-->
<div data-role="page" id='outerwrap1' class="outerwrap" data-url="/account_m.php">
<div class="mineBox">
... php ...
</div
</div
the applicable portion of the shuffleMainJplayerJQM1.1.js javascript, wherein the php is updated and code should be called to refresh the div is:
$(".adder").click(function() {
$.ajax({
url: 'AddToMine1.2.php?id=' + currentId,
type: 'POST',
dataType:'json',
success : function (result) {
var errorCode = (result['errorCode']);
switch (errorCode) {
case 0: alert(result['errorMess']);
break;
case 1: alert(result['errorMess']);
break;
case 2: break;
}
},
error : function () {
alert("error");
}
});
// not working - would like to refresh mineBox div here
$(".mineBox").trigger("create");
});
Here is the contents of .mineBox after rendering:
<div class="mineBox">
<p align=center>
<img src="../images/mine_block_full.jpg" width="14%" align="absmiddle" />
</p>
<p align=center><img src="../images/mine_block_full.jpg" width="14%" align="absmiddle" />
</p>
<div data-role="popup" id="popupMenuPM1" data-theme="a" data-overlay-theme="a">
<ul data-role="listview" data-inset="true" >
<li data-role="divider" data-theme="a">Be</li>
<li>Play</li>
</ul>
</div>
<div data-role="popup" id="popupMenuPM2" data-theme="a" data-overlay-theme="a">
<ul data-role="listview" data-inset="true" >
<li data-role="divider" data-theme="a">Want Girl</li>
<li>Play</li>
</ul>
</div>
</div>
Your assistance is greatly appreciated. Thank You!

getJSON works on Android but Not IOS

I am testing getting some json and the json code actually shows on my Android but when I try it on my iPhone it won't work.
Is there anything extra that needs setting for IOS ?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>JSON Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script>
$('#page1').live("pageinit", function () {
$.getJSON("http://mysite.com/api/get_cats", function (data) {
var output = '';
$.each(data.cats, function (index, value) {
output += '<li>' + value.title + '</li>';
});
$('#listview').append(output).listview('refresh');
});
});
</script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
<ul id="listview"></ul>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
If I add an alert: alert(data.cats); I get "index.html [object: Object]" in the iphone"
Any ideas anyone?
Do you have that domain whitelisted ?
It's in config.plist...while on android it's in cordova.xml
See http://docs.phonegap.com/en/2.0.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide
EDIT:
You can alert things from respons jqxhr object as well to find out more. As a response function add another two parameters
function(data, textStatus, jqXHR){...}

Dojo Dijit TimeTextBox Not Working When Pulled Into Page With AJAX

I have one main page with menu buttons. When clicked, they change the main "content" area with AJAX. In the header of this page I have all of the appropriate Dojo references.
I know the AJAX works because i have successfully pulled in and displayed data in the content area, and I know the Dojo Dijit TimeTextBox works because I have successfully displayed it before I make any calls with AJAX.
When I try to make a call with AJAX and pull in new input fields for the TimeTextBox widget, they display only as regular text boxes, and seem to ignore the fact that I have them set to be the TimeTextBox.
Can anyone tell me how to fix this issue?
EDIT:
Here is the code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Admin Page</title>
<link rel="stylesheet" type="text/css" href="styles/adminPage.css" />
<link rel="stylesheet" type="text/css" href="styles/adminStyle.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css">
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TimeTextBox");
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
require(["dojo/ready", "dijit/form/TimeTextBox"],
function(ready, TimeTextBox){
ready(function(){
new TimeTextBox({name: "timeInput", value: new Date(),
constraints: {
timePattern: 'HH:mm:ss',
clickableIncrement: 'T00:15:00',
visibleIncrement: 'T00:15:00',
visibleRange: 'T01:00:00'
}
}, "timeInput");
});
});
function getPage(page)
{
$.ajax({
url: "admin"+page+".php",
type: "POST",
cache: false,
success: function (html) {
$('#content').html(html);
$('#content').fadeIn('slow');
}
});
}
</script>
</head>
<body class="claro">
<div id="container">
<div id="header">
<span class="headerTitle">Lehman Nursery</span>
</div>
<div id="content">
<input type='text' name='date1' id='time1' value='T15:00:00'
data-dojo-type='dijit.form.TimeTextBox'
required='true' />
</div>
<div id="menu">
<a onclick="getPage('Home')">
<div id="homeButton" class="menuAppearance">
<img src="images/icons/home.png"/><br />
</div>
</a>
<a onclick="getPage('Links')">
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/links.png"/><br />Links</div>
<div class="description">
</div>
</div>
</a>
<a onclick="getPage('Hours')">
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/pictures.png"/><br />Pictures</div>
<div class="description">
</div>
</div>
</a>
<a onclick=getPage('Events')>
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/events.png"/><br />Events</div>
<div class="description">
</div>
</div>
</a>
<a onclick=getPage('Feedback')>
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/feedback.png"/><br />Feedback</div>
<div class="description">
</div>
</div>
</a>
</div>
</div>
</body>
<form>
<input type="text" name="date1" id="time1" value="T15:00:00"
data-dojo-type="dijit/form/TimeTextBox"
onChange="require(['dojo/dom'], function(dom){dom.byId('val').value=dom.byId('time1').value.toString().replace(/.*1970\s(\S+).*/,'T$1')})"
required="true" /></form>
^^That is the data being pulled in
Are the css files for those dijits pulled up? You might want to require them at the beginning (when the page loads) which get cached and will be used when the dijits are pulled via AJAX.
EDIT: Not sure but can suggest you try to add startup() call for the widget you created.
it apears to me like you are forgoetting to call:
dojo.parser.parse();
after setting the content i your ajax call. it should look like this:
function getPage(page)
{
$.ajax({
url: "admin"+page+".php",
type: "POST",
cache: false,
success: function (html) {
$('#content').html(html);
dojo.parser.parse();
$('#content').fadeIn('slow');
}
});
}
the dojo parser will not execute by itself, it is too resourses expensive to do that, so each time the content changes so you add a dijit you moust call dojo.parser.parse();

Categories