Using AJAX without Javascript: Has anyone tried this and had success? Pros/Cons?

http://domajax.fuz.org

Domajax is a free jQuery plugin that give you tools to add ajax calls within your application, without a piece of javascript. It uses HTML5’s data- attribute, and jQuery’s .on() method to handle your ajax interactions.

I’m trying to find ways to use Asynchronous websites for database access without using Javascript or Flash. Flash because it’s old and hated, and Javascript because it’s not an enjoyable language to use.

I found this in my searches, but I wanted to know if anyone else has tried it, and if they have, what has their experience been?

Edit: I just noticed the last commit to this project was in 2015. RIP

Aside from that the description is “a little” misleading… without javascript? There’s totally a shitton of Javascript. You might not have to write it yourself but in the background it’s definitely there.
And there is an argument to be made that code not under your control can be more a pain in the rear then any language you might use.

Also you were looking at the 2.0 branch, last commit in master was Dec 2016 :wink:

Update jquery.domajax.js

Update jquery.domajax.js 

Update README.md

Update menu.html.twig

Update menu.html.twig

Update README.md

detailed commit messages ftw :roll_eyes:
I have a hard time taking any project serious that can’t even do the simplest of things right :confused:


As for the general idea… it might be nice for non-techy people like layout people or the marketing people that wanna put in some stuff on the run. But the problem is that you’re always reliant on the functionality that’s already there, and if something is missing you gotta implement some huge new feature for that. Then theres some combinations of attributes that doesn’t really work with the idea “that guy” had and such, it’s just a pain I’d imagine.
Just write it properly from the start because my guess is that it’ll get an unmaintainable mess real fast.
Not to mention that this isn’t the job ob content-editors anyway (also have a hard time imagining a scenario where this would be really effective, if you’re writing a big app you’re probably going to have issues rather fast).

The goal for me was to avoid using as much JS as possible. I don’t enjoy it as a language the way I do PHP. Maybe I’m just weird like that.

Do you know of a better alternative for implementing AJAX than just using JS, jQuery, or Vue.js directly?

What is wrong with you :scream:

I mean… considering what AJAX stands for it’s going to be quite hard to get around some amount of javascript :wink:
Which framework you use at the end of the day really depends on the usecase you’re going for. jQuery is more or less the swiss-army knife. I personally don’t really like using it but I still use it because it’s just so ubiquitous. Then again I try avoiding javascript in general where possible and try using just vanillaJS where I need something.

Let me clarify. I like Blade PHP.

Right. I mean alternatives to AJAX in general. I think we’ve had this conversation already? Something something “web sockets”. Yeah, we have.

That makes sense. Wait, you avoid JS and try to use vanillaJS? Did you mean you avoid jQuery to use vanilla JS?

No I mean JS in general. I try doing stuff without JS as far as possible, doesn’t work for interactive stuff obviously. I meant for content and layout mainly :slight_smile: Usually when you google “how do I do X” in 99% of cases you’re going to get a jQuery snippet on stackoverflow which just kinda annoys me these days. I just have an inherent dislike for jQuery from back when it as real bad (it really got better over the years). There’s so many possiblities with the new CSS selectors, a lot of people just don’t know how to use them or that they even exist. Same with animations.

What really annoys me about a lot of developers is that they write like 2 lines of jQuery code to show and hide an element on click and import like 10(?) kb (I don’t even know how big jQuery is these days) because that’s what stackoverflow spat out and/or they just don’t know any better. For a lot of “younger” developers jQuery is synonymous with JavaScript, which is a little alarming in my eyes but oh well, I rant :slight_smile:

1 Like

I have joined Upwork and are currently making a widget that has to be made in vanilla js because the product has to be incorporated into a Wix page.

1 Like

Yes, I’ve elected to stick to using animate.css for animations if I can help it.

https://daneden.github.io/animate.css/

I am guilty of this.

<script src="//code.jquery.com/jquery-3.2.1.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $("#felony_circumstances").hide();
    $("#radio_conviction").click(function()
      {
        $("#felony_circumstances").show();
      });
    $("#radio_no_conviction").click(function()
      {
        $("#felony_circumstances").hide();
      });
    $("#auth_worker_circumstances").hide();
    $("#radio_no_auth_worker").click(function()
      {
        $("#auth_worker_circumstances").show();
      });
    $("#radio_auth_worker").click(function()
      {
         $("#auth_worker_circumstances").hide();
      });
    $("#previously_applied_job").hide();
    $("#previously_applied_date").hide();
    $("#radio_previously_applied").click(function()
      {
        $("#previously_applied_job").show();
        $("#previously_applied_date").show();
      });
    $("#radio_no_previously_applied").click(function()
      {
         $("#previously_applied_job").hide();
         $("#previously_applied_date").hide();
      });
  </script>

I am that young developer who is trying to learn and produce something usable at the same time. Though I do understand jQuery is not JavaScript, finding a place that explains what all these are in relation to each other for new people has been hard to find. I’d expect it to come up with the litany of searches I’ve done so far, but all I’ve seen is W3Schools and all accounts have said to avoid that place.

I will certainly check this out.

That’s essentially what I’m looking for. A way to use JavaScript without using it directly. I’m looking for what Blade templating is to PHP, but for JS, essentially. Something that essentially lets me learn how to create things quickly without having to learn JavaScript well before doing that.

I intend to learn the base languages of course. I’d just rather learn them in passing rather than directly and all at once through the use of a more friendly language for it.

I understand you there. One thing you can do is altering your google search with either vanillaJS or -jquery or both, that way you’ll get more results without jQuery examples (the same goes for Stackoverflow search itself, but who uses that anyway :D).
Another thing you can do is creating just a snippet of code and see what the jquery function actually does.

Though it’s quite old now this is also a rather interesting talk imo:

And the Followup:


On a sidenote:

If you’re doing what you’re doing in the above snipped give every of the elements you want to hide a class i.e. hidethis then select by it $(".hidethis") in jQuery or querySelectorAll(".hidethis") in vanilla.

Also if you’re wanting to hide an element when the page is first shown you’re better off using CSS. If you define <html class="no-js"> you can use document.querySelector("html.no-js").classList.add("js").remove("no-js"). This way you can adjust styles to whether the user has JS enabled or not. If you’re then doing html.no-js .hidethis {display: none;}.
This is all in HTML5Boilerplate and Modernizr too :slight_smile: . You should read the documentation on HTML5BP and/or watch Paul Irish’s video on it too, there’s some really interesting stuff in there :slight_smile:

Honestly the documentation on there is quite good. What people are mad about is the “certificates” you can get from there that basically don’t mean anything. See W3Fools. The site used to be worse but it’s actually not bad now.
WebPlatform was pretty neat when it was still a thing, but it got abandoned sadly :frowning:

1 Like

Naw. I’m what amounts to a “full stack” junior developer trying to build a useful project and learn the languages required to do so at the same time. There’s no real dead line for this, but “sooner is better” as you can imagine.

Discerning what I should use and then also learning it means a notable time investment. I’m looking for “what I should use” at the moment. I was trying to avoid JavaScript in general (as in, completely, even if it meant using HTML5 instead), simply because it looks like something that would take me longer to learn than a language that’s more easily read, and because of the technical people I’ve spoken to, it does not have a good reputation on its own. Maybe with all the libraries made for it, it is easier, but that’s another layer to learn.

Thanks for the resources. They’ll definitely be useful.

What I’m trying to create is essentially a replacement for Microsoft Access.

So, could you give an example of how you’d do that when these things are unrelated?

To illustrate, this is what I have:

Screenshot from 2017-10-31 13-57-13

Which becomes this with that code snippet when the radio buttons are swapped:

Screenshot from 2017-10-31 13-58-13

They’re unrelated show/hides. Using a single class for that, I wouldn’t know how to separate them to where one radio button wouldn’t have an affect on both elements to be shown/hidden. So I figured the best direct way would be to just give everything its own ID and connect them accordingly using those.

I have a similar one further down, but that one shows two form fields that are also unrelated to the above toggles.

That’s very useful. I’m not sure if I’m going to be able to build a site around “whether the user has JS enabled or not”. I think I’d have to just say “if you have it disabled, you can’t use the site.” I have a search filter for elements built using jQuery, as well as a Words Per Minute calculator when filling out a form. You can opt out of the former, as I wouldn’t personally care, but the latter is required for the form.

Ah, that makes a lot of sense. The particular instances of people giving JS “the business” were in referencing how the examples for PHP, PDO, and transactions in SQL were handled. Not sure why, but those were what I saw the most gripes were for.

Ah ok didn’t see that in the original snippet :smiley: That’s fine then :slight_smile:
Could still use vanilla if you’re not using much else of the jQ library. If you are that’s perfectly reasonable. It’s always a matter of how much you need from jQ.
In case you are using HTML5BP you can use this to hide using the provided hidden class (if you are not a) you should and b) just make your own class):

qsa = document.querySelectorAll.bind(document); // be lazy, that's fine
//hiding stuff
qsa("#yourbutton").addEventListener("click",function(){ // same as $.click
    qsa("#whateveryouwanttohide").classList.add("hidden");
})
//showing stuff
qsa("#yourbutton").addEventListener("click",function(){ // same as $.click
    qsa("#whateveryouwanttohide").classList.remove("hidden");

This does the same that jQ does (though jQ does it in the style attribute) in way lighter code :stuck_out_tongue: But as it sounds like you’re using more of jQ further down the road you can use your code without worrying. In the original snippet you posted it looked like it was the only thing you used :wink:

Regarding W3schools I never really looked at the examples, just the documentation so I can’t speak for the examples :slight_smile:

/edit
apparently I have a typo in there somewhere but I’m too lazy to find it XD point is, it’s possible without jQ :stuck_out_tongue:
/edit2
fixed it, can’t just alias querySelectorAll without binding it :smiley: I thought I used it before but oh well xD

1 Like
[Javascript is totally readable guys](http://jsfuck.com)