How to use AJAX in DRUPAL - javascript

I want to implement AJAX in DRUPAL 4.7 as I am beginner in Drupal can any one help me in this, it would be great if I get a snippet of Code.
Actually in a page I have list of items is being there using pagination it is being accessed, but everytime when I click on the next button it relaods the page, Since in the same page I have other features like ADS, TAGS so it takes more time each time loading.
So I need to list out the only the content.
So do help me in this Issue.

You really should upgrade to D6 if AT ALL possible. You're like 5 years behind the times and in Drupal years, that's a loooong time.

You could perhaps try and use a search engine.
The first result is from Drupal's documentation itself.
So now that you've mentioned what's wrong (i.e. pagination), the possibility of getting help increases.
So you're saying your pagination links reload the whole page. What is the href attribute set to?

If you upgrade to Drupal 5, you could use http://drupal.org/project/ajax_views . At any rate, I'd recommend taking a look at the code in that module and see what you can use/what ideas you can get.

It sounds like you have a JavaScript fatal error on your page, which will disable all JavaScript. There should be an return false attached to the click handler for the pagination, but if that fails, the graceful degradetion would be to execute the link, which will simply reload the page.
So I would suggest you get something like Firebug for Firefox or any other JavaScript development tool, and first check if you get fatal errors.

Related

javascript scratchblocks squarespace

I would like to use Scratchblocks (a tool for rendering visual Scratch code blocks from a text listing, on GitHub) on my Squarespace website. The problem I am getting is that the scratchblocks are never rendered on the first load - but only after a refresh.
This is in the header (set in the header for that particular blog):
<script src="https://scratchblocks.github.io/js/scratchblocks-v3.1-min.js""></script>
Then I think I need to call this function at the end of the page - I've put it in the footer:
scratchblocks.renderMatching('pre.blocks');
NOTE: When I view the source I sort of see this JavaScript twice at the end of the page. Not sure what is happening there.
Here's an example of it on my website, where it renders the scratchblocks only after a refresh. [UPDATE - following the fix provided below, this now renders first time, every time as far as I can tell.]
[http://www.glennbroadway.com/coding-zone/2017/4/6/simple-collisions-in-scratch]2
Here's an example of someone else using it and it working properly. I've inspected the source and I can't work out how they are doing it.
https://codeclubprojects.org/en-GB/scratch/memory/
I've also tried all the different methods listed elsewhere on stackoverflow for getting javascript to load only after the HTML has finished. I can't get any of them to work - but I think the problem is something to do with Squarespace, I just don't have the knowledge to work out what.
Any help would be greatly appreciated.
In Squarespace, when your custom Javascript only works after a page refresh, it most likely has to do with Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
You may be able to disable AJAX for your template. Or, see the other approaches outlined here: https://stackoverflow.com/a/42604055/5338581 including:
window.addEventListener("mercury:load", function(){
// do stuff
});
In addition, I would generally recommend placing custom code in the "Footer" code injection area unless you have a specific reason to do otherwise.

Finding out which Javascript methods are never called

I have a load of code, and I think much of it is deprecated with numerous methods that are never called. I would like to know which methods in this code will never be called, either as a result of button clicks or via other methods. I could go through and comment out the suspicious methods one-by-one and test the code, but is there a better way?
I am using Visual Studio 2012, and I have tried using JS Lint but that doesn't seem to tell me what I want to know. I really like the Code Analysis for C# and SQL that VS2012 does, but it doesn't do this for Javascript. What should I use?
Open your JS file as the script in a webpage in Chrome. Just surround your JS with an html and script tag:
<html><script>
var mycode = goeshere();
</script></html>
Once you open it in chrome, right click anywhere on the page and click 'Inspect Element'.
Alternatively you can just press CTRL+SHIFT+J to bring up the console.
Once the pane opens, click on the 'Profiles' tab.
Select "Collect JavaScript CPU Profile", and follow the steps to run it.
This will give you timing counts per function call. Try to work through as much of the functionality as you can, then once you are finished look at the function timing counts. Any call with 0 time probably wasn't called. This should at least give you a starting point.

Add a button dynamically to a WebPage from Firefox Addon.

I actually want to add a button to Gmail. When someone opens a email, he/she sees a button and when someone clicks on it, I add a function to it. I know one way but it's very intensive where I use setInterval() every 300 ms and run a function to check if it's Gmail or not and then add a button dynamically. I need something less intensive because I don't want people to have problems running my add on.
I want it all from my add on script so that I can easily communicate between other functions of my add on.
To add to pages it depends. Pages can do many tricky things (like GitHub using PJAX see this addon on how it was done).
Method 1 - addEventListener to window or gBrowser
But most usually you can catch a DOMContentLoaded or load event. Template HERE.
Method 2 - Observe http-on-examine-response and loadContext
If the URL of the nsIHTTPChannel matches your pattern then get the contentWindow from the loadContext and then manipulate. I need to make a clean template for this but you can see some messy ones: here and here
Method 3 - Add ProgressListener
ProgressListeners are nice because it helps you catch anchor changes, and usually when sites ajax and change page they change the url somehow but it doesnt really load a new page. I'm working on a template for this but it's not ready yet.
Info about addEventListener
If you add event listener in some situations it works for when 3rd parameter is true or when false. If you find one that works for your situation it will always work.
To figure out what combination works for you install this addon: event-listener-experiment-DOMC-and-load it's on GitHub so you can install straight from GitHub with this addon GitHub Extension Installer
Install that addon then navigate to your page, look in the browser console to see what feedback you're getting. It will tell you which works for you. If you need more help tell me the site and I will help you figure it out.
Here's a bootstrap template you can use once you figure out the combination:

"Stop running this script" error in IE7 and IE8 while trying to navigate to another page

I have created a Drupal website that uses Openlayers to display maps. In one of these maps there are some "Filters" which the user can use to dynamically change the data shown in the map. The data are related to countries are shown as bubbles over the countries. The bubbles are drawn using Openlayers' API. A good amount of calculations go behind the scene while filters are selected. I have used setTimeout to avoid long running loops. The filters work fine. However, after a number of filters are clicked (e.g. if 12 filters are clicked), if the user tries to move to another page by clicking a link, in IE7 and IE8 the following error shows -
"Stop running this script?
A script on this page is causing your web browser to run slowly.
If it continues to run, your computer might become unresponsive."
This error does not show in any other browser and does not show in IE7, 8 until a link is clicked. Any pointer in this regard will be highly appreciated.
UPDATE : The problem was in OpenLayers' event cache. OpenLayers's clears the event cache in the window unload event and this was getting stuck in IE7 and IE8 (I am not sure why). So far I have been able to solve the issue when user clicks another link, by calling OpenLayers.Event.unloadCache() on click of normal links.
jQuery can be very resource expensive. The articles linked bellow gives you 10 good advices to perform better your jQuery applications. The most useful for me (I had the same problem a month ago) was to replace $.each() with traditional for lops and to replace extensive DOM construction with jquery templates. Also the use of ID instead of classes and to give a context for the selectors, selector caching, and so on.
This list is ordered using my own criteria of "usefulness" in the advices.
10 ways to instantly increase your jquery performance
improve your jquery 25 excellent tips
10 advanced jquery performance tuning tips from paul irish
8 jquery performance tips
You need to optimize your client script. Please refer to answers here.

LinkButton sometimes requires two clicks

I have an ASP.NET 4.0 Web Forms app and I'm using jQuery to do most of the JavaScript. The problem I'm having is that some of the links sometimes require two clicks for them to do anything.
Seemingly this happens at random and I have been unsuccessful in reproducing the problem in any kind of repeatable fashion, also there don't seem to be any JavaScript errors, so that's probably not the issue.
I'm at a loss as to what might be causing the issue. What might it be?
Without a view of your Javascript, HTML or backend code, there's not much I can suggest as to what might be causing the problem.
However, if you have Firebug installed, you could use that to see what clicking the button is doing each time and go from there.
Also... what is it supposed to do? What does it do the first time? These are questions that will need answers before debug assistance can be provided

Categories