I am using query mobile for a phonegap application, I am passing through parameters through the url to the next page.
For example:
main.html?id=1, menu.html?id=2 etc
To allow this I have to turn ajaxEnabled to false to allow it to pass through the information I need. In doing so I am unable to use transitions from page to page which means I get a white flash as the page reloads.
I am generating these links dynamically.
$.ajax({
url: 'URLTO WEBSERVER',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
var list = '<li><a href="menu.html?idcat='+item.id_cat+'">'+item.category_cat+'</li>'
output.append(list);
});
},
error: function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
output.text('There was an error loading the data.')
}
});
Is there a solution?
you can use method jquery serialize data for your paramater.
via changePage method in jquery
I hope solved :D
I think he is concerned about the "white plash page" that happens after the request is completed from server and then he calls changePage.
He is not worried about how to send parameters to server etc. This is assuming all that is working fine.
Related
Using dustjs for templating engine within Expressjs 4. Want to render the template client-side when user fills out a form and clicks a search button using xhr. Everything seems to go fine so far as getting the json from xhr call but dust.render does not render the result.
Here is the dust template on the page:
<script id="result-template">
// extra table tags removed for brevity
{#search_results}
{fname}
{lname}
{accountId}
{email}
{status}
{/search_results}
</script>
<div id="output">
Below is the js/jquery in an external js file making the xhr call to server-side. Inside the success callback is where I'm trying to render the result from the call, basically user fills-in a search form and clicks submit:
$(document).ready(function () {
$('#main').on('click', '#search-btn', function (e) {
e.preventDefault();
$.ajax({
url: '/support/search/ah',
type: "post",
headers: {token: sessionStorage.getItem('somekey')},
data: {'phone': $('#mobile').val(),
'email': $('#email').val(),
'fname': $('#fname').val(),
'lname': $('#lname').val()
},
success: function (data, textStatus, request) {
var source = $("#result-template").html();
var compiled = dust.compile(source, "intro");
dust.loadSource(compiled);
dust.render("intro", data, function(err, out) {
$("#output").html(out);
$('#search-result').dataTable();
});
},
error: function (data, textStatus, request) {
// handle error
})
})
xhr call is successful, and I can see that 'data' variable contains the json with values, however, I'm not able to render them using dust.render and there are no js errors being observed when the page loads or when the results come back.
Here is the json result from xhr call:
{"search_results":[{"fname":"Duke", "lname":"Wellington","accountId":"007","email":"duke_wellington","status":"Breathing"}]};
I tried the same template with same json results at atakdubya.github.io replacing its array example and it works fine.
If anyone can point out what I'm doing wrong it would be immensely appreciated.
Depending on your browser, you can't have a script tag with no type or it will be interpreted as Javascript, and Dust isn't valid Javascript.
Try adding type="text/dust" to your script tag. This JSFiddle works for me.
http://jsfiddle.net/Lutr4h2e/1/
Following is the technologies that I have used:
HTML 5, JS, JQuery, AJAX, RESTFul POST web service, IOS
Problem Statement:
I have created an iOS native application and placed certain HTML and JS files in my application. On starting the application on simulator I open my HTML file in web view and on click of a button I hit a web service that is deployed on my local windows machine.
However, I am not able to hit my web service. I am able to perform the same activity from Android emulator and from my local client test program.
Request you to please help me with this issue.
Below is the AJAX code that hits the service:
var jsonObject = new Object();
jsonObject.passengers= 4;
jsonObject.country= "India";
jsonObject.state= "Maharashtra";
var url = "http://<HOST>:<POST>/JerseyTest/services/emanual/demo";
$.ajax({
url: url,
type: "post",
data: inputJsonString,
success: function(data, status){
alert("success");
alert("In Success: " + JSON.stringify(status));
alert("In Success: " + JSON.stringify(data));
//$("#result").html('Submitted successfully');
},
error:function(data, status){
alert("failure");
alert("In Error: " + JSON.stringify(status));
alert("In Error: " + JSON.stringify(data));
//$("#result").html('There is error while submit');
}
});
This code works on from standalone HTML file, from Android Emulator.
Is there any extra configuration that I need to do on iOS machine or for simulator?
Any help is highly appreciated.
Regards,
Vineet
Make sure jQuery is loaded by putting an alert("jQuery is loaded") inside
$(function(){
alert("jQuery is loaded")
});
If jQuery isn't loaded, check in XCode if the jQuery source file is inside the Compile Sources which is under the Build Phases tab in the project Target. If it is, remove it and add it to Copy Bundle Resources.
Also, try formatting the AJAX like this,
$.ajax({
url:url,
type: 'post',
beforeSend: function(xhr, status, error){
xhr.overrideMimeType("application/json; charset=UTF-8");
},
data: {key: "value"},
error: function(data) {
alert("Error");
console.log("Error");
},
success: function(data, textStatus, jqXHR) {
alert("Success");
}
});
Sounds like a CORS issue. Make sure your REST service headers include:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Credentials: true
I've built a simple web service using the Web Api and I want to consume it from a simple mVC view using jQuery. I'm developing on localhost and consuming the service from Azure, which is why I'm using jsonp.
When I run my jQuery I view in Fiddler and the request is successful and json sent back but the .Ajax function returns these errors:
NaN, parsererror, and callback was not called
<script>
$(function () {
var callback = function(data) {
alert(data);
};
$.ajax({
url: 'http://itjobsdirect.azurewebsites.net/api/values/getbytitle?title=developer',
type: 'GET',
dataType: 'jsonp',
jsonpCallback: 'callback',
success: function (data) {
$('#main').text(data);
},
error: function(jqXHR, textStatus, error) {
alert(jqXHR.status + jqXHR.message);
alert(textStatus);
alert(error);
}
});
});
</script>
I found this question: JsonP with Web Api is it still relevant?
Thanks for your help!
Yes, the link to that question you have there is still relevant.
ASP.NET Webapi doesn't ship with a default formatter that understands the dataType of 'jsonp' and so the solution here is to add a custom JsonpMediaTypeFormatter (as shown in the answer for the questions you have linked).
https://gdata.youtube.com/feeds/api/users/EXAMPLE/uploads?v=2&alt=jsonc
When visiting this url direct from a browser, it will return the correct data 100% of the time. If a video has been added, it's there, if a video has been deleted, it's gone.
When getting this data through file_get_contents('https://gdata.youtube.com/feeds/api/users/EXAMPLE/uploads?v=2&alt=jsonc');
The data seems to be cached or not updated/current data...
If you continue refreshing the page, it will show/hide new videos, as well as show/hide deleted videos for about 5-10 minutes, then it will be accurate.
The same thing happens when I get data using $.getJSON(), or $.ajax()...
Shouldn't the data be the same as when visiting the url in the browser?
I'm simply trying to get the most recent video uploaded by a user "EXAMPLE".
public function ajaxUpdateVideoFeed()
{
header("Content-type: application/json");
$json = file_get_contents('https://gdata.youtube.com/feeds/api/users/EXAMPLE/uploads?v=2&alt=jsonc');
$data = json_decode($json, TRUE);
$videoId = $data['data']['items'][0]['id'];
echo json_encode($videoId);die();
}
Try appending a random number to the end of you url call. https://gdata.youtube.com/feeds/api/users/EXAMPLE/uploads?v=2&alt=jsonc&r=RAND where RAND would be some arbitrary randomly generated number each time the url is called. Not sure if this will work for you, but it may be worth a try.
I'm having a similar issue. I'm trying to retrieve current state of a specific video via $.ajax() call, and the response data appears to stay cached. If I try the url from a browser the data is updated.
$.ajax({
url: 'https://gdata.youtube.com/feeds/api/videos/YouTubeID?v=2&alt=json'
type: "post",
dataType: 'json',
cache: false,
success: function(response, textStatus, jqXHR){
var ytState = response.entry.app$control.yt$state.name;
},
error: function(jqXHR, textStatus, errorThrown){
console.log( "The following error occured: "+ textStatus + errorThrown );
},
complete: function(){
}
});
I have tried json, jsonp, cached=false, appending a time stamp, appending my developer key to url, and no success.
**EDIT
By using POST vs GET in my ajax request it seems to eliminate my similar caching issue.
EDIT EDIT
Nevermind, I suck. Using POST is producing a 400 error.
Before you hate me because this goes against the purpose of ajax, here's my reasoning:
I have an HTML5 PhoneGap application that does data access to an asp.NET MVC web service using Form Authentication. I want to link to an action that returns a PDF file, then and show that file in mobile Safari. The problem is, if I do a target="_blank", the request comes from safari, which doesn't have the forms authentication auth cookie, stored in the app, so the request is not authenticated. If I don't use target="_blank", the request is authenticated properly, and loaded in the entire webview (PhoneGap) and I don't have access to the "Open in iBooks" or "Open in.." buttons provided by Safari.
I want to be able to ajax load the PDF, then display the result in safari, by opening in a new tab. Is this possible?
Edit: I'm trying this now:
$.ajax({
url: downloadURL,
type: 'GET',
xhrFields: {
withCredentials: true
},
success: function(data, textStatus, jqXHR) {
//console.log(data);
window.location = 'data:application/pdf;'+data;
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('Error retrieving data: ' + errorThrown + '\n' + jqXHR);
},
complete: function(jqXHR, textStatus) {
}
});
but this is resulting in an invalid pdf download. Any idea how I can fix it?