I need my text to auto update when the mySQL database is updated.
Could someone please help with this? I've looked a lot and no post says what I need, i'm new to ajax and don't know much about it. All I know is HTML, CSS, PHP and javascript.
First of all, you might wanna check jQuery. It'll be very simple if you know javascript, and it'll make your development a lot easier.
Then you need to check how an ajax call is implemented with jQuery. Again, really simple, here's an example.
test.php
$var1 = $_POST['key'];
$var2 = $_POST['key1'];
//Some code here
echo 'Test finished'; // This is returned to the ajax call
JAVASCRIPT
$.ajax({
url: '/test.php',
type: 'POST', /*Method, POST or GET depending on your needs*/
async: true, /*This makes the ajax call asyncronously or not*/
data: {'key':value,'key2':value2},/*data to send*/
success: function(result){ /*Return from PHP side*/
/* result contains the data replied from the PHP script. */
alert(result);
}
});
If you want to replace some parts of your HTML you might wanna check functions like, append, after, before, prepend and html,etc. Also learn something about JSON, it's a data format. Really simple and yet magnificent
Hope this helps you! It looks like homework, but you'll ace it in no time, you'll see.
Related
My company is launching a Marketo campaign landing page to promote a microsite/testing tool I have built. I have a basic understanding of Marketo, but that is it.
We want to include some stats on the page using live data from my app, I can easily build an API to get this data, and based on what I have read I can show it in the Marketo landing page using a custom code filed.
I am trying to find proof that the code field can handle JSONP, but I can't seem to, I am hoping someone here could validate that it does.
Essentially I would want to put something like this in the code block:
<script>
// this is pseudo-code
function show_stats(json){
$("#holder").text("stuff from json")
}
$( document ).ready(function() {
$.ajax({
url: "https://myapp.mycompany.com",
dataType: "jsonp",
jsonpCallback: "show_stats"
});
});
</script>
<p id="holder"></p>
If by code field you mean the custom HTML element in the landing page editor - the docs indicate that you can put any scripts in there. I haven't tried exactly your pseudo-code, but anything I've tried putting in one has rendered as expected.
Also, at the template editor level of a Marketo landing page template, it's just a normal HTML document with some extra classes thrown in, so you can put whatever code you want in there - so I don't see any reason why that wouldn't work.
The only thing that you might run into trouble with JSONP stuff, is possibly cross-domain CORS issues?
Dumb question time. I was trying to integrate my JSON data with a flipbook plugin, using a Mustache templating system. Needless to say, this wasn't working at all.
I'm a jQuery noobie, so is there any easy way to bind and animate the JSON data to/with a plugin (with or without the Mustache tags)??
From your question it is a bit hard to deduce what you want, but I feel you got already all the pieces together. First the example you have been linking to in a comment: https://github.com/blasten/turn.js/wiki/Making-pages-dynamically-with-Ajax
This fetches not yet loaded pages via Ajax, and the sample code assumes the Ajax call gets HTML back from the server, as can be seen in the code snippet from there (after adding a missing '}':
$.ajax({url: "app?method=get-page-content&page="+page})
.done(function(data) {
element.html(data);
});
Here the done function processes the data it got back from the server by straight injecting it into the element, which is expected to contain the current page.
I assume next that you do have a server side method, but that method returns JSON instead. Let me assume for the moment that it returns the following structure:
{ "title" : "the title of page N",
"text" : "here is some text for the page N." }
The next thing is to render this JSON into into html in the done funktion, before inserting the result into the page. Looking at the short tutorial on the README.md this might look like:
$.ajax({url: "app?method=get-page-content&page="+page})
.done(function(data) {
var pageHtml = Mustache.render("<h2>{{title}}</h2><p>{{text}}</p>", data);
element.html(pageHtml);
});
If the server returns the proper data you should now see a
<h2>the title of page N</h2><p>here is some text for the page N.</p>
appear on the page.
I see there are several posts on this issue, however none of the answers are very clear or are working for me. I have a simple JQuery Post that works great in a browser, but doesn't post to the PHP page on the server through the native app on IOS. Is there a handler I can add to make it work or is it a whitelist issue? Either way is there a good resource or simple instructions to fix the issue? See my code below.
$(function() {
$('#RFQ, #sQuote, #sQuote1, #sQuote2, #sQuote3').submit(function() {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function(data) {
$('#RFQ, #sQuote, #sQuote1, #sQuote2, #sQuote3').html( $("#formResponse").html() );
}
});
return false;
});
});
Make sure you modified your file Cordova.plist correctly to allow external access.
Open your file Cordova.plist and check that you made the following:
1 - Set OpenAllWhitelistURLsInWebView to YES
2 - Right click on ExternalHosts -> Add Row
3 - Set the String value of your new added row to *, so you should have your new line look like this:
Item0 String *
Normally, you would replace * with the external URL you want provide access to. But, to make sure that the problem really comes from the whitelist, we will use *.
For more information about domain whitelist, check the online doc: http://docs.phonegap.com/en/2.1.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide
Hope this helps.
Let me know if this works for after modifying your Cordova.plist file as described above.
I am learning jQuery so please bear with me. I am attempting to populate an HTML unordered list using the following code. The error I am encountering is:
HTMLfile: No such interface. The code breaks on the following jQuery library statement:
fragment.appendchild(script)
Here's the code (a fragment of a successful jQuery Ajax call).
Json contains ID and Name.
success: function(data) {
var $defs = $('<ul id="mylist"></ul>').insertBefore('#lst');
$.each(data.d, function (index, list) {
$(this).appendTo($defs).wrap("<li>" + list.Name + "</li>");
})
},
Thank you
I can't be sure, because there is not enough of your script here, but it may be that your this statement isn't pointing to an HTML element. Console log your this statement to see what it is. I don't know what data.d is, but jQuery likes to replace this statements when you might not expect it to.
Maybe show more of your code?
Learning to understand what this is in JavaScript can be hard enough for people new to the language, so I generally advise people to learn JavaScript, before learning jQuery. Otherwise I think it will take longer to learn JavaScript, and be harder, more error-filled learning experience.
I'm using the flickr api to create a simple gallery based on images pulled in by their tag.
The gallery is working fine in every browser except ie6. When you navigate to the page (by clicking a link) in ie6, the $.ajax success/error code blocks refuse to fire, however when the page is reloaded, or navigated to directly (by entering a url) there are no problems.
$.ajax({
type: "GET",
url: "http://api.flickr.com/services/rest/?&method=flickr.photos.search&api_key=" + api_key + "&user_id=" + user_id + "&tags=" + tags + "&format=json&jsoncallback=?",
cache: false,
dataType: "jsonp",
contentType: "application/json; charset=utf-8",
success: function(data) {
alert('good');
},
timeout: 2000,
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
The above code is obviously a simplified version of the actual javascript, but the bug is still present.
Any help would be greatly appreciated. This seems to be a very weird bug. Perhaps it's a caching issue?
This problem is pretty recurrent. IE caches AJAX calls. You need to append a random number or string to your call each time so that it doesn't run a cached call.
url: "http://[your url]&rand=" + Math.Random(),
Two thoughts:
Is your call within a
$(document).ready() block?
Try getting rid of the ampersand
right at the beginning of the query
string:
/?method=flickr.photos.search&...
How is the "link" triggering the AJAX load?
inline onclick="doSomething();"
inline href="javascript:doSomething();"
via jQuery $('#somelink').bind('click', doSomething);
something else?
I ask because IE6 has a known bug whereby if you have/use the javascript: protocol on a link... then use JavaScript to load a different page it requests the page but never renders it. I wonder if (depending on how your AJAX is attached) if the above bug extends to AJAX requests not just location.href requests.
Four things related to your code but not to your question:
timeout is not taken into account by $.ajax when dealing with jsonp
nor is contentType
the error callback is never called in the context of a jsonp request
You should really use the data parameter (the code would be far cleaner than with the custom url building it currently shows)
Point 1 & 3 are due to limitations in the way $.ajax is implemented. I recommend http://code.google.com/p/jquery-jsonp/ if you really need those features.
Now, apart from what karim79 pointed out, I see nothing wrong with your code. So my guess is you have something else going wrong prior to it in the function you feed to $(document).ready(). IE is far less lenient than other browsers when it comes to javascript syntax. Try putting the $.ajax call as early as possible.
Also:
Does it work in IE7?
What version of jQuery are you using?