Is aax communication (jquery) possible within the pushPage of onsenuions-navigator?

Asked 1 years ago, Updated 1 years ago, 70 views

Thank you for your continuous support.
I am developing apps with onsenui and jquery, but I am having trouble handling js in pushpage.

Currently, within ons-navigator, js retrieves and displays a list of items from the database.
Click on each item in the list to go to pushPage.

When I went to pushPage, I would like to go back to the database to retrieve the data based on the key I got on the list page, but I got a jax communication error when I read the page.

Is it impossible to retrieve the data again within pushPage, which was once retrieved from the parent page?

For your information, the js in the detail page are listed as follows.

$( document.body).on("pageinit", '#hoge', function(){
    var options=myNavigator.getCurrentPage().options;
    varparam={"id":options.itemid};
    $.ajax({
        url: "http://sample.com/app/sample.php",
        type: "POST",
        dataType —JSON.stringify (param),
        success:function(xml){
            $("#done").html('<br>br>br>successful connection to server');
        },
        error: function() {
            $("#err").html('<br>br>br> server connection failed');
        }
    });
});

onsen-ui

2022-09-29 22:28

2 Answers

Ajax communication is possible even after transition in OnsenUI.

The above code will only be called when the HTML BODY has been loaded.
Similar answers have been given below, but
You must use the ons.ready called when the OnsenUI transition is complete.

Run js in the html file to which the tab bar is transitioned

var module=ons.bootstrap('my-app', ['onsen']);
module.controller('page1_controller', function($scope){
	ons.ready(function(){
		valid day = new Date();
		$("#target").prepend(today.getDate());
	});
});
<!DOCTYPE HTML>
<html lang="ja"ng-app="my-app"><!--- Specify module name-->
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	</head>
	<body>
		<ons-pageng-controller="page1_controller">!--- Assign a controller class -->
			<ons-toolbar><divid="target" class="center">Day</div></ons-toolbar> 
		</ons-page>
	</body>
</html>

Also, I understand that there is an error in Ajax communication, but what is the error content?
If you write down the details, I may be able to give you a more detailed answer.


2022-09-29 22:28

I think the reason for Ajax communication error is that $.ajax option specification is incorrectly.
I don't know what kind of request you are sending, so if param is an object that expresses the correct request parameters,

$.ajax({
    url: "http://sample.com/app/sample.php",
    type: "POST",
    dataType: "json", // < ----- ここhere
    data:param,//<------*here
    success:function(xml){
        $("#done").html('<br>br>br>successful connection to server');
    },
    error: function() {
        $("#err").html('<br>br>br> server connection failed');
    }
});

I think you have to specify thatPlease check it out.

"Also, if it is ""retrieved every time a page transition"", I think it would be better to use the ons-navigator postpush event instead of the pageinit event."


2022-09-29 22:28

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.