error handling for AJAX div - ajax

I've been using a very helpful AJAX-based script called AJAXTwits to load multiple Twitter timelines for a sports team into a div. The nice thing about the script is that it (1) combines multiple timelines into one chronological timeline and (2) caches the xml for faster loading. Every so often, though, Twitter's feeds go down, meaning that (i) the caching fails, (ii) the content won't load (I get stuck with the loading message), and (iii) if the problem is big enough, the whole page (not just div) breaks and throws a 404 error.
So, I'd like to add error-handling -- specifically, a pre-written message/div-content that will replace the loading message if the content doesn't load within a set amount of time. I've found some nice examples on this forum on how to handle timeouts. But those deal with a much simpler function/script syntax. Being a cut/paste/emulate programmer, I'm having trouble adapting that.
The main html looks like this:
<ul id='AjaxTwits'>
<li id='AjaxTwitsLoader'>
<em>Loading tweets</em>
</li>
</ul>
<script type="text/javascript">
getAjaxTwits("AjaxTwits/AjaxTwitsRequest.php", 6);
</script>
Without digging into the script and php files, is there any kind of error/timeout handling that can be placed into this html? Any help appreciated!

I did not use this script before therefore i can't help you on this, but i can recommend what i've been using for showing twitter messages on my apps.
It is a jquery plugin which you can find here: http://tweet.seaofclouds.com/.
I don't think you will have the same problem, because it uses jquery to make the ajax call. It worths to try.
Hope it helps.

Related

CKEditor with HTML content stores, displays but cannot display for edit

I have used CKEditor for a few years without really understanding it. I now want to use it to display text which will include HTML, CSS, JavaScript and PHP example code. None of that needs to execute it is just to show the code to others.
Currently I used the textarea replace method to edit content and I need to carry on that way. When I add the content first time it is sanitised (mysqli_real_escape_string) and stored in a MySQL database correctly. It also then displays correctly with the CKEditor markup working as markup and the HTML/PHP showing as a code example. However, when I edit the content a second time the HTML examples become "real" HTML and are no longer visible as examples.
For example this:
<?php echo "hello"; ?>
<p>Hello</p>
is correctly (?) stored as:
<p><?php echo "me"; ?></p>
<p><p>Hello</p></p>
and displays on the page as shown in the first code snippet (which is what I want). When I then hit edit again the code examples vanish into the background as real HTML (part of the page). If I put the code examples in as code snippets (which I would rather not have to do because of the intended users) the result in the editor (second edit) looks like this:
<!--?php echo "me"; ?-->
Hello
I am sure i am missing a basic understanding of what is going on behind the scenes but can anyone explain how to allow users to type in text which includes HTML, CSS, JavaScript, PHP and MySQL code examples which must then appear as examples and not markup (and be editable as examples).
I have played with config.entities and config.protectedSource after some research but they do not seem to be relevant (or to work). Weirdly a couple of times it seemed to work fine and I thought I had cracked it but then stopped with no further changes to the config. That means I now have less idea what I am doing than when I started!
You don't mention which version you are using, but if it's relatively new (4.4+) you can use the Code Snippets plugin that was designed exactly for this. See the demo at http://ckeditor.com/demo#widgets. It might help with the encoding issues too. There's docs on it too.
Th help with the current encoding issue, it would help a LOT if you showed us how you output the data and load it into CKEditor. For example "When I then hit edit again" doesn't really describe anything without context. For example, do you use setData() with AJAX? Do you use an inline editor? Code examples would be the best.

When loading html with ajax: should I bring the scripts and css too?

I mostly bring JSONs with my ajax requests, but sometimes I do bring HTML snippets.
For example there are these forms I use for creating things in my application: "create user", "create message", etc. I need to reuse them a lot, and I bring them with ajax calls, as opposed to having them preloaded and hidden.
My question is:
The scripts and css's that give functionality and style to these loaded html's, should be preloaded or should they come with the html as well?
Example of loaded html:
create_message.html
-------------------
<div id="create-message-form">
...
<button id="submit-message">Send</button>
</div>
The script that gives functionality to this form needs to set a click-handler to "#submit-message" and other stuff related.
create_message.js
------------------
$("#submit-message").click(...);
...
Should that script be pre-loaded or be in the create_message.html snippet?
I would generally tend to pre-load the script, as it makes it so you have to load it only once and simplifies your architecture quite dramatically. Only if it makes speed wise a drastic difference I would consider loading it as needed - but the moment you need to access that part of the system twice you lost your speed gain.
However, if most of your communication is JSON already I would recommend checking out some of the client side templating solutions. This one for example: http://handlebarsjs.com/ or Underscorejs has a template function.

Sharing - social buttons in websites

I want to implement social buttons in my website. What is the best script choice according to your experience?
I found this: http://www.addthis.com/
Is it a long way to do a simple thing?
It looks like you just need to insert the generated block code
anywhere you want the buttons to show up in your document. For
a pure html page this would be extremely simple (cut and paste).
For a MVC or serverside generated website it might be a little
more tricky, but you'd just have to paste the same code in your
view, and maybe call a helper to include
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f904e27168d5473"></script>
in the head of your document, or inline with the rest of your code.
I guess it really depends on how your website is set up.
I'd rate it from extremely easy to slightly moderate.

Joomla $document->addScriptDeclaration to add after body

Is there a way I can load a script at the end of the body tag instead of loading in the header? I want to load Facebox and load the jscipt calls to it after the body has loaded.
Despite what jdog wrote, there are a number of ways to take content just before Joomla echoes it to the browser and edit it. This article gives a good overview: http://www.howtojoomla.net/how-tos/development/how-to-fix-joomla-content-plugins
The specific example turns strings into links, but you can modify that to insert your markup right before the </body> tag.
no.
I assume you want to do this for website load speed reasons, what you could do is look at CSS/JS compression components, such as JFinalizer and see which of those support deferred loading of Javascript.

Why does my website need so much time to render?

When cached, my starting page only needs to load one element (the "root document") - but then it needs some time until it's rendered completely:
alt text http://www.walkner.biz/_temp/firebug_net.png
The elements following are things loaded asynchronous via JavaScript.
Two questions:
Why does it take so "long" from loading the root document until the DomContentLoaded-event?
Does it make sense to load some not-so-important things asynchronously? Is it important to have the DmoContentLoaded-event as early as possible? Unfortunately there's not much documentation about that event, but I don't think it's the moment when the page is displayed, is it?
I'm not sure YSlow is gonna help him as that will download all elements for a page and run performance tests on them, whereas swalkner's problem is how long it is taking to render the HTML page itself when all other elements (images, CSS, etc) are cached.
At least that's what I think he's saying.
In the original question you said, "The elements following are things loaded asynchronous via JavaScript." but then listed nothing. What is loaded?
I would suggest checking for Javascript errors in the first instance. Then try removing some of your asynchronous loading calls one by one until you hit the bottleneck. In fact, remove them all, how long does the downloaded HTML take to render? Take that time and work from there.
Is your HTML document very big? Does it use lots of inline styles that could be in the CSS file?
Perhaps if you posted a link to the site then people would have a look at it.

Resources