I'm currently creating a phonegap app that receives data from an API. I make use of ajax to retrieve the information and then append that information to a div. Now this workings fine in the browser but when I do this in android using phonegap nothing seems to happen and no information is appended to the div. Here is the code:
$.getJSON(
AddressAccess+"Home/loginitems/email/"+UserEmailAddress+"/format/json",
function(data)
{
$('#updateprofilename').append(data[0].Name);
});
As you say, that u're using $('.selector').append(something) - you're using jQuery Mobile for dynamic generation of markup.
When dynamically adding content (lets say a <div> to another <div> you have to refresh your content by doing something like this: $('[data-role="content"]').trigger('create'); in order to update your page-content after dynamic enhancemant.
more simple:
you have a <div> and you're dynamicly adding another <div>:
$("#YourWrapperDiv_ID").append('<div id="DynAddDiv_ID">My dynmicly added content</div>');
$("#YourWrapperDiv_ID").trigger('create');
Related
angular.module("app.categories").controller("CategoryController", t), t.$inject = ["$scope", "$stateParams", "$state", "categoryManager"]
angular.module("app", ["ionic", ["app.home","app.products",...]);
angular.module("app").run(["$templateCache", function(t) {
t.put("app/scripts/about/about.html", '<ion- view>.....'),t.put("app/scripts/home/block.html", '<div>....')}]); //this is how the page content is loaded
I am running this app in the browser using Ionic ('Ionic serve' in the root directory). I am not able to run basic JavaScript on the page who's content has been loaded like this. After a timeout if DOMContentLoaded is called, the element is picked up but running the following only manipulated the id of element, not the html or the value
setTimeout(function(){
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('customBox').id = 'changed'; //to test, id changes
document.getElementById('customBox').innerHtml = '<h1> test </h1>'; //does not change anything, no errors in console
document.getElementById('customBox').text= '<h1> test </h1>'; //does not change anything, no errors in console
document.getElementById('customBox').html= '<h1> test </h1>'; //does not change anything, no errors in console
});
},2000);
Is there anything that's preventing any change to the page content in the browser? How to make changes in the DOM content using simple JavaScript for this Ionic Android app?
Don't try to manipulate the html of an angular app directly unless you have written a custom directive. If you want to change the innerHtml use ng-bind-html on the div and just modify your scope.
Also, don't use setTimeout in an angular app, always use the $timeout or $interval services instead.
So your code, somewhere inside a controller, should just look like this:
$scope.testContent = '<h1> tet </h1>';
and the html:
<div id='customBox' ng-bind-html="testContent"></div>
Although the main reason your code doesn't work is that as soon as you've changed the id to "changed" all the other getElementById calls won't find the div.
Try using angular.element like this
angular.element( document.getElementById('customBox') ).innerHtml = '<h1> test </h1>';
Visit this link for detail https://docs.angularjs.org/api/ng/function/angular.element
I've this following JS code, it's working perfectly in the desktop but it's not working in the touch devices.
jQuery(document).ready(function(){
jQuery("#gallery_trigger").click(function () {
jQuery(".my-second-portfolio").trigger( "click");
});
});
From my analysis, I figured that following line of code is not working
jQuery(".my-second-portfolio").trigger( "click");
I understand that .trigger( "click"); is not appropriate for the touch devices, so could you please help me to work this code in all devices?
Try 'tap' or 'vclick'
http://api.jquerymobile.com/tap/
$(".my-second-portfolio").tap();
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate. Because of this $(document).ready() will trigger before your first page is loaded and every code intended for page manipulation will be executed after a page refresh. This can be a very subtle bug. On some systems it may appear that it works fine, but on others it may cause erratic, difficult to repeat weirdness to occur.
Classic jQuery syntax:
$(document).ready(function() {
});
To solve this problem (and trust me this is a problem) jQuery Mobile developers created page events. In a nutshell page events are events triggered in a particular point of page execution. One of those page events is a pageinit event and we can use it like this:
$(document).on('pageinit', function() {
});
To execute a code that will only available to the index page we could use this syntax:
$('#index').on('pageinit', function() {
});
There's also another special jQuery Mobile event and it is called mobileinit.When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind them to mobileinit. One of a good examples of mobileinit usage is turning off ajax page loading, or changing default ajax loader behavior.
$(document).on("mobileinit", function(){
//apply overrides here
});
Or you could use something like this:
$('div:jqmData(url="index.html")').on('pageshow',function(){
// code to execute on that page
//$(this) works as expected - refers the page
});
You could try to use $('.my-second-portfolio')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/
I'm having separate but related issues relating to dropdown events in both the native and chrome browser on an android device (Samsung Galaxy Tab4).
Chrome - when selecting an item in a dropdown, the change event is fired EVERY time but the UI value doesn't update until focus is changed
Native Browser - The first time a select is changed, everything works fine. All subsequent interactions with select is as follows
--- First time an option is selected, change event DOES NOT fire and value does not update on UI
--- Second time an option is selected, change event does fire, value updates on UI
I'm using knockout with Ajax calls to fill the dropdown list. Here's the template code html (on change event here is just an alert for testing change event):
<div class="col-xs-5 col-sm-5 col-md-2 col-lg-2 search-form-label" data-bind="visibleFade: advancedSearch">
Proceeding Type
</div>
<div class="col-xs-7 col-sm-7 col-md-4 col-lg-4 search-form-data" data-bind="visibleFade: advancedSearch">
<select class="select-12" data-bind="disabled: !proceedingTypeCodes.loaded(), event: {change: onSelectChange}, value: ProceedingType, options: proceedingTypeCodes, optionsText: 'Name', optionsValue: 'Code', optionsCaption: '-- ALL --'"></select>
</div>
The view model is actually built up based on a model brought back from an Ajax call (using the json, it creates the model and binds to self. Values are brought back based on ajax requests, added to select list and loaded is marked as true. This is all called on page load
_dataService.getRemoteSiteData("Case/GetCaseStatusCodes?isForSomething=false", null, _loadCaseStatusCodes);
var _loadProceedingTypeCodes = function (data) {
_viewModel.buildModel({ proceedingTypeCodes: data }, _self);
_self.proceedingTypeCodes.loaded(true);
};
It's worth mentioning that all of this works for all other browsers, devices and platforms. We even have another site that uses this exact same paradigm for building select lists which works great (although there is only one select list on that search page whereas there are multiple ones on this page).
Anyone run into this problem?
I believe this problem is unique to Android's native browser and even when I stripped away knockout, bootstrap, etc, there was still some inconsistency.
What seems to be working is using jquery 'on' and $(this).focus methods to guarantee what you click on is in focus
$('.container').on('click','select',function(){
$(this).focus();
});
I used on as this call is in my _layout page so these inputs won't be on the page when it loads (generally) but it can really go anywhere. Very annoying bug but I think this is a decent workaround.
Related to the chrome issue, this was fixed in Chrome 40.* release
I noticed that I can't use relative paths in my Cordova project when referencing them in object tags. For example, this works on the browser but not in Phonegap:
<object id="pause" type="image/svg+xml" data="img/icons/pause.svg" class="icon clickable hidden"></object>
However, this functions perfectly fine in both Phonegap and the browser:
<img id="pause" src="img/icons/pause.svg">
Using a remote path also works in Cordova, but everything falls apart when I use a local/relative one. Here's what Android spits back:
<img src="file:///android_asset/webkit/android-weberror.png" align="top">
<h2>Webpage not available</h2>
<p>The webpage at file:///android_asset/www/img/logo.svg could not be loaded because:</p>
<!-- The net::ERR_FILE_NOT_FOUND is replaced by a localized error string -->
<p>net::ERR_FILE_NOT_FOUND</p>
Unfortunately, I can't use a remote location (since that won't let me execute the onclick and onmousedown events inside the SVGs). Also, avoiding <object> tags altogether is not an option, since I need to execute and change some of the code inside the objects (like changing the fill color).
Is this a bug? If not, what can I do to get my code to work?
A jacky workaround to this is reading the file manually using Javascript and putting the contents directly into the data attribute so that it reads <object data="data:image/svg+xml;utf8,[FILECONTENTS]"></object>. It's not elegant, but it works fine.
I'm trying to bind interactions to dynamically loaded links:
HTML:
<div id="content">
My dynamic content will be here.
</div>
JS:
$(function(){
loadContent();
$('#content').css('height',400);
$('#content').on('click','a',function(){
alert();
});
});
This is working fine on desktop, and with a quite short content on Android.
But it will not work with longer content on Android (with no JS error on Eclipse). Yet, I have not identified any other differences but content length between working and not working pages. Therefore, I tried to artificially limit the length of the content, and then it is working fine.
Do you have any clues of what is happening ?
// EDIT
I updated the code as I had made some basic mistakes when typing this question. This version better reflects the core problem.
// EDIT
I finally managed to isolate what produced a conflict. It is due to a css update of the div after content being loaded. If I artificially remove the height style attribute using Weinre, then the links are clickable again!
I can't see how this is working on desktop at all because the on() call should be inside the DOM ready handler, and the event name should come before the filtering element, like this:
$(function(){
loadContent();
$('#content').on('click', 'a', function(e) {
alert('something');
});
});
First, fix your document ready function to wrap loadContent and on.
Second, If you load content after the page is loaded. you should bind event to the body like this
$(function(){
loadContent();
$('body').on('click', '#content a', function(){
alert('Hello world!');
});
});