Shivraj Sawant

Shivraj Sawant

Ok, It is working. The problem was. My site is http and Monaca platform is with https so there was mixed content error.

When I run it on my device, it is working.

Shivraj Sawant

Hello

I am trying to use JSONP in my app using online Monaca ide, but I do not get success. Here is my code

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script>
        // PhoneGap event handler
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            console.log("PhoneGap is ready");
          }
        
        function test()
        {               
           alert("Test");
           $.ajax({
                url: 'http://test.com/test/test.php',
                data: {name: 'Chad'},
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'jsonpCallback',
                success: function(){
                    alert("success");
                }
            });            
        }
        
        function jsonpCallback(data){
        alert("I am in callback");
    }
    </script>
</head>
<body>

    <h1>Welcome to Monaca!</h1>
     <a class="button--large" onclick="test()">Start Demo</a>
    <input type="button" onclick="test()" id="useJSONP" value="Use JSONP"></input><br /><br />
    <span id="jsonpResult"></span>

</body>
</html>

When I use same code with local HTML file, it works, here is my code

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JQuery JSONP</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
 
        $("#useJSONP").click(function(){
            $.ajax({
                url: 'http://test/test/test.php',
                data: {name: 'Chad'},
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'jsonpCallback',
                success: function(){
                    alert("success");
                }
            });
        });
 
    });
     
    function jsonpCallback(data){
        $('#jsonpResult').text(data.message);
    }
    </script>
  </head> 
  
  <body>
    <input type="button" id="useJSONP" value="Use JSONP"></input><br /><br />
    <span id="jsonpResult"></span>
  </body>
</html>

PHP code

<?php
    header("content-type: text/javascript"); 
 
    if(isset($_GET['name']) && isset($_GET['callback']))
    {
        $obj->name = $_GET['name'];
        $obj->message = "Hello " . $obj->name;
         
        echo $_GET['callback']. '(' . json_encode($obj) . ');';
    }
?>

You will find javascript & PHP code from below link
http://www.giantflyingsaucer.com/blog/?p=2682

Please help to solve the problem

Shivraj Sawant

Thank you for your help.
You pointed out correctly, I am not a developer, many things I implement through community help and experimenting with code.

I will go through tutorials suggested by you & then will try to implement with your code.

Thanks again.

Shivraj Sawant

I have a website with MySQL server. I am building app using Onsen UI & Monaca. I want to fetch data from my MySQL server to show in app. How can I achieve this.

Is it possible to make request to server from app as it is not hosted on same server.

Please guide. Code example will really be great help.

Shivraj Sawant

@Shivraj Sawant

Posts made by Shivraj Sawant