I want to get some json object from a remote server.
Here is the simplest html you can imagine:
<div id="getHotels" data-theme="e" data-role="button">Get hotels</div>
<ul id="bringHotels" data-role="listview"></ul>
and here is the javascript:
$("#getHotels").click(function(){
$.getJSON("/services/apexrest/Hotels", function(obj){
$.each(obj,function(key,value){
$("#bringHotels").append("<li>"+value.Hotel_Name__c+"</li>");
});
});
});
i have never used the getJSON method but it seems to be quite clear, despite that it doesnt work and I checked the directory - there really is JSON array. So, if I am doing it wrong, please correct me, thank you.
There are no enough informations about the problem to solve it...
It could be a problem in the URL you pass to getJSON. Try to change the first slash with a ./, or use other callbacks to obtain more debug infos:
$.getJSON("example.json", function() {
alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });
Related
Here is HTML code:
<img ng-src="/static/images/Shine_small.jpg" width="32px" height="32px" src="/static/images/Shine_small.jpg">
Here is my code:
expect(element(by.binding('/static/images/Shine_small.jpg')).getAttribute('src'))
.toMatch(/static/images/Shine_small.jpg);
You can use HTMLImageElement read-only attribute complete (w3c spec)
Just watch out to test if src is not empty as it will resolve to complete being true as well. You could use browser.wait to wait for it for a tolerated time to become complete.
Use isDisplayed function. In your case it should be like below.
expect(element(by.binding('/static/images/Shine_small.jpg'))
.isDisplayed().then(function (isVisible) {
if(isVisible)
{
expect(element(by.binding('/static/images/Shine_small.jpg')).getAttribute('src'))
.toMatch(/static/images/Shine_small.jpg);
}
});
try below piece of code...
it('should display image',()=>{
element(by.css("img[src='./assets/images/circular.png']"))
});
src is same as that of given to "img" in html
So I'm learning Riot JS, following a guide. Gives an example explaining step by step.
And adds a "this.update()" to update the riot js variables. Now, it is working for him, but not for me. Can you guys tell me why?
Here's the code.
This is the index.html
<body>
<script src="bower_components/riot/riot.min.js" type="text/javascript"></script>
<script src="tags/all.js" type="text/javascript"></script>
<contact-list></contact-list>
<script>
riot.mount('contact-list', {callback: tagCallback});
function tagCallback(theTag) {
console.log('callback executed');
var request = new XMLHttpRequest();
request.open('GET', 'people.json', true);
request.onload = function() {
if(request.status == 200) {
var data = JSON.parse(request.responseText);
console.log(data);
theTag.trigger('data_loaded', data);
}
}
setTimeout(function() {
request.send();
},2000);
}
</script>
</body>
And this is my contact-list.tag
<contact-list>
<h1>Contacts</h1>
<ul>
<li each={p in opts.people}>{p.first} {p.last}</li>
</ul>
<script>
this.on('mount', function() {
console.log('Riot mount event fired');
opts.callback(this);
})
this.on('data_loaded', function(peeps) {
console.log(peeps);
opts.people = peeps;
this.update();
})
</script>
</contact-list>
After debugging with the console.logs I can see i'm retrieving data correctly from my JSON file, my contact list data is there. But the bullet list isn't updated. It's displayed empty.
Is there any reason for using a callback function?
If not, move your callback function into the tag and update it directly after assigning your fetched data to your tags variable.
Look at the sources in riotgear:
https://github.com/RiotGear/rg/blob/master/tags/rg-include/rg-include.tag
For me it was a perfect example.
Oh nevermind guys, sorry. Don't know how actually the example of the guy in the video worked. Because I had to pass data.people on the html trigger event. Otherwise i was passing a plane Object with an Array in it.
I am using the Onsen framework with jQuery and jQuery mobile, it appears that there is no way to catch the event that fires once the new page is loaded.
My current code, which executes in the index.html file (the master page)
<script src="scripts/jQuery.js"></script>
<script src="scripts/jquery.mobile.custom.min.js"></script>
<script src="scripts/app.js"></script>
<script>
ons.bootstrap();
ons.ready(function() {
$(document.body).on('pageinit', '#recentPage', function() {
initRecentPage();
});
});
in app.js is the following code
function initRecentPage() {
$("#yourReports").on("tap", ".showReport", recentShowReport);
var content = document.getElementById("yourReports");
ons.compile(content);
}
and the HTML:
<ons-page id="recentPage">
<ons-toolbar id="myToolbar">
<div id="toolBarTitle" class="center">Recent Checks</div>
<div class="right">
<ons-toolbar-button ng-click="mySlidingMenu.toggleMenu()">
<ons-icon icon="bars"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-scroller>
<h3 class="headingTitle"> Checks</h3>
<div id="Free" class="tabArea">
<ons-list id="yourReports">
</ons-list>
<ons-button id="clearFreeRecentButton">
<span id="clearRecentText" class="bold">Clear Recent Checks</span>
</ons-button>
</div>
</ons-scroller>
</ons-page>
in this instance the variable 'content' is always null. I've debuged significantly, and the element I am trying to get is not present when this event fires. It is loaded later.
So, the question is, how do I ensure that all of the content is present before using a selector. It feels like this is an onsen specific issue.
In the end I could only find one reliable way of making this work.
Essentially I had to wait, using setTimeout 300 milliseconds for the DOM elements to be ready. It feels like a hack, but honestly there is no other reliable way of making this behave. The app is in the app store and works well, so even though it seems like a hack, it works:
$(document).on('pageinit', '#homePage', function() {
initHomePage();
});
function initHomePage() {
setTimeout(function() {
setUpHomePage();
}, 300);
}
Move your $(document.body).on('pageinit', '#recentPage', function() { outside of ons.ready block.
JS
ons.bootstrap();
ons.ready(function() {
console.log("ready");
});
$(document.body).on('pageinit', '#recentPage', function() {
initRecentPage();
});
function initRecentPage() {
//$("#yourReports").on("tap", ".showReport", recentShowReport);
var content = document.getElementById("yourReports");
alert(content)
ons.compile(content);
}
I commented out a line because I do not have access to that "recentShowReport"
You can see how it works here: 'http://codepen.io/vnguyen972/pen/xCqDe'
The alert will show that 'content' is not NULL.
Hope this helps.
I'm trying to call a function after any form with the class shown below is submitted. However, this doesn't seem to be working for me (the form submits, but the submit button remains active and the loading image is not shown).
$(document).ready(function() {
$('.uniForm').submit(function() {
$('#loadingImage').show();
$(':submit',this).attr('disabled','disabled');
return true;
});
});
Here's some HTML:
<form class="uniForm" id="formABC">
//...form.... here
</form>
<img src="loadimage.gif" style="display: none;" id="loadingImage">
does anyone see anything inherently wrong with this that would be preventing things from working correctly?
I have a feeling it's just not being called correctly. Can I call it myself via some HTML like this?
<button type="button" class="primaryAction" alt="Submit Form" onclick="$('#formABC').submit();">Submit Form</button>
Following your comment, it seems the binding of the handler function to the submit event might be taking place before the form element has been loaded into the DOM.
Ideally, you should bind event handlers only after the DOM has finished loading.
For example:
$(document).ready(function() {
$('.uniForm').submit(function() {
...
});
});
Put an id on the submit input/button and try this:
$('#mySubmitButton').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).attr('disabled','disabled');
$('#loadingImage').show(function() {
$(this.form).submit();
});
});
There is a jQuery plugin named jQuery Form Plugin which helps to submit your form from ajax without refresh and then you can do the rest of actions on its success (which occurs exactly after successful form submission):
jQuery(document).ready(function () {
jQuery('#my_submit_button').click(function (e) {
jQuery(this.form).ajaxSubmit({
target: false,
success: function ()
{
your_other_stuff();
},
});
});
});
function your_other_stuff(){
// rest of things
}
Try something else:
$('.uniForm input[type=submit]').click(function(){
$('.uniForm').submit();
//doStuffafterSubmit
});
I am trying to get the Jquery UI autocomplete working on AJAX loaded dynamic fields in div #right
I do not fully understand the code below.
$("#right").delegate(".drugName", "focus", function(){
//attach autocomplete
$(".drugName").autocomplete({
//define callback to format results
source: function(req, add){
//pass request to server
$.getJSON("druglist.php?callback=?", req, function(data) {
//create array for response objects
var suggestions = [];
//process response
$.each(data, function(i, val){
suggestions.push(val.name);
});
//pass array to callback
add(suggestions);
});
},
});
});
But it works in Chrome/FF. However it seems to be killing AJAX loading in Internet Explorer causing the application to be non - functional
The error returned is
SCRIPT1028: Expected identifier, string or number ajaxfunctions.js, line 41 character 6
The error in the console refers to the brackets on the second last row.
I tried to work this out using the documentation, but couldnt get it to work :-(
Whats happening with the code & IE?
Pls help.
//pass array to callback
add(suggestions);
});
}, //OK the comma here was the problem
});
Got it working. this helped