jQuery Forum

Script not running unless I refresh page
[2Replies]
- 21-May-2012 01:37 PM
- Forum: jQuery Mobile
I am currently working on a mobile app that is causing some strange problems...

I have two pages that are exactly the same but on one of them scripts will not run unless I refresh the page.

The source for the two pages are:
items.html:
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>Items</title>
6. <link rel="stylesheet" href="theme/style.css" />
7. <link rel="stylesheet" href="theme/FFXIVDB.min.css" />
8. <link rel="stylesheet" href="theme/jquery.mobile.structure-1.1.0.min.css" />
9. <script type="text/javascript" charset="utf-8" src="scripts/ffxivdb.js"></script>
10. <script type="text/javascript" charset="utf-8" src="scripts/cordova-1.7.0.js"></script>
11. <script type="text/javascript" charset="utf-8" src="scripts/jquery-1.7.2.min.js"></script>
12. <script type="text/javascript" charset="utf-8" src="scripts/jquery.mobile-1.1.0.min.js"></script>
14. <script type="text/javascript">
15. //Find the items
16. $(document).ready(function () {
17. alert("A script is running");
18. /*var url = baseurl + 'jsonhandler.ashx?getitemsbasedonquery=true&query=';
19. var query = getUrlVar("query");
21. $.getJSON(url + query, function (json) {
22. for (var i = 0; i < json.length; i++) {
23. var obj = json[i];
24. $("#ulItemList").append("<li data-mini=\"true\"><a href=\"item.html?id=" + obj.ID + "\">" + obj.NameEN + "</a></li>");
25. }
26. $("#ulItemList").listview('refresh');
27. });*/
28. });
29. </script>
30. </head>
31. <body>
32. <div data-role="page" data-theme="a">
33. <div data-role="header" data-position="inline">
34. <h1>Search results</h1>
35. </div>
37. <div data-role="content" data-theme="a">
38. <ul id="ulItemList" data-role="listview" data-theme="a"></ul>
39. </div>
40. </div>
41. </body>
42. </html>
and itemcategories.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>Categories</title>
6. <link rel="stylesheet" href="theme/style.css" />
7. <link rel="stylesheet" href="theme/FFXIVDB.min.css" />
8. <link rel="stylesheet" href="theme/jquery.mobile.structure-1.1.0.min.css" />
9. <script type="text/javascript" charset="utf-8" src="scripts/ffxivdb.js"></script>
10. <script type="text/javascript" charset="utf-8" src="scripts/cordova-1.7.0.js"></script>
11. <script type="text/javascript" charset="utf-8" src="scripts/jquery-1.7.2.min.js"></script>
12. <script type="text/javascript" charset="utf-8" src="scripts/jquery.mobile-1.1.0.min.js"></script>
14. <script type="text/javascript">
15. //Find the items
16. $(document).ready(function () {
17. alert("A script is running");
19. /*var url = baseurl + 'jsonhandler.ashx?getcategories=true';
21. $.getJSON(url, function (json) {
22. for (var i = 0; i < json.length; i++) {
23. var obj = json[i];
24. $("#ulItemCategoryList").append("<li data-mini=\"true\"><a href=\"itemtypes.html?id=" + obj.ID + "\">" + obj.Name + "</a></li>");
25. }
26. $("#ulItemCategoryList").listview('refresh');
27. });*/
28. });
29. </script>
30. </head>
31. <body>
32. <div data-role="page" data-theme="a">
33. <div data-role="header" data-position="inline">
34. <h1>Categories</h1>
35. </div>
37. <div data-role="content" data-theme="a">
38. <ul id="ulItemList" data-role="listview" data-theme="a"></ul>
39. </div>
40. </div>
41. </body>
42. </html>
As you can see some code has been marked as comments to make it as simple as possible.

You can see the app here

To access items.html you will need to enter some search query and then press search. You will now see the alert is called.

To access itemcategories.html you just press the button Items by Categories. Now the alert is not called unless you press F5 or CTRL+R

I'm totally clueless as to what is going on. I can't see any differences to the two pages (and you can check the source yourself) so why do they behave differently?!?

If you have any suggestions I would be very happy to hear them.

Problem with controls not rendered when inserting from json
[3Replies]
- 18-May-2012 08:43 AM
- Forum: jQuery Mobile
I am filling an UL with data I get from another site using the following method:

<script type="text/javascript">
//Find the items
$(document).ready(function () {
var url = baseurl + 'jsonhandler.ashx?getitemsbasedonquery=true&query=';
var query = getUrlVar("query");

$.getJSON(url + query, function (json) {
for (var i = 0; i < json.length; i++) {
var obj = json[i];
$("#ulItemList").append("<li><a href=\"item.html?id=" + obj.ID + "\">" + obj.NameEN + "</a></li>");
}
});
});
</script>

<ul id="ulItemList" data-role="listview" data-theme="a">

</ul>

After all the data has loaded the listitems (and their contained links) are not themed (or maybe rendered is a better word) by jquery mobile. I suspect that all is themed before the data is loaded and I need to make these controls themed myself but I have no clue as to where to start.

They just look like regular links and I would really like to have a list matching the rest of the design of the site I am building.

Any help is much appreciated :D

Problems using getJSON()
[3Replies]
- 16-May-2012 06:24 AM
- Forum: Using jQuery
I am currently trying to develop a phone app using PhoneGap. It's a game item app that should retrieve information from a database I have compiled. I have a .Net project that exposes the data using .ashx file.

The problem is that I cannot retrieve the information from the site with getJSON...

I have the following very simple C# code that generates the information server-side:

public void ProcessRequest(HttpContext context)
{
if (context.Request.QueryString["id"] != null)
{
using (DataClassDataContext db = new DataClassDataContext())
{
Item item = db.Items.FirstOrDefault(x => x.ID == Convert.ToInt32(context.Request.QueryString["id"]));
string json = "{";
json += "\"NameEN\" : \"" + item.NameEN + "\",";
json += "\"DescriptionEN\" : \"" + item.DescriptionEN + "\",";
json += "\"ID\" : " + item.ID.ToString() + "";
json += "}";
context.Response.Write(json);
}
}
}

This is working very well and when I go to /JSONhandler.ashx?id=xxx I get valid JSON and everything is fine.

The problem is that when I try to access the information with my script it all goes downhill...

I use the following to access the information:

$(document).ready(function () {
var url = 'http://mydomain.com/jasonhandler.ashx?id=';
var query;
$('button').click(function () {
query = $("#query").val();
$.getJSON(url + query, function (json) {
$("#results").append(json.NameEN + ' ' + json.DescriptionEN);
});
});
});

When I use chrome I can see that the status of the call is cancelled and nothing is returned. When I run the same script locally there are no problems.

I have tried using the above method to access information from Twitters API (http://search.twitter.com/search.json?callback=?&q=username) and this works fine so why can't I access my own information?

I have also tried the following:

$(document).ready(function () {
var url = 'http://mydomain.com/jsonhandler.ashx?id=';
var query;
$('button').click(function () {
query = $("#query").val();
$.ajax({
type: "GET",
url: url + query,
async: false,
beforeSend: function (x) {
if (x && x.overrideMimeType) {
x.overrideMimeType("application/j-son;charset=UTF-8");
}
},
dataType: "json",
success: function (data) {

$("#results").append(data.NameEN + ' ' + data.DescriptionEN);
}
});
});
});
and the result is almost the same. The status of the call is pending instead of cancelled. But the endresult is the same... I get nothing.

Can anyone give me any pointers as to what is wrong? I believe this is a cross domain problem but I am puzzled by the fact that I can access the information from twitter when I can't access the information from my own server...

Response title

Attachments

jQuery Forum

Activity Trend