How to delete file with jQuery AJAX

Using Client-side scripts like – jQuery and JavaScript it is not possible to delete any files. Need to use Server-side scripting for doing it.

In PHP, you can simply use the unlink() function this removes a file from your server if it exists.

Sometimes you have the requirement to delete a resource file without reloading the page.

This cannot totally be done with PHP you need to use jQuery or JavaScript with it by which send AJAX request to your server for removing a file and according to the response make changes on your Client-side.

For demonstration purpose, I create some <img> elements with Delete Button. When the Button gets clicked then remove the file using jQuery AJAX and replace the <img> source with the default image.

How to delete file with jQuery AJAX

Read more

How to include HTML page with jQuery

If you’re familiar with PHP, you can efficiently embed another PHP or HTML file within your page using include and require statements. This approach saves time, particularly when you need to incorporate the same line of code across multiple files.

However, if you’re not utilizing server-side scripts on your webpage, alternatives such as iframes or client-side scripting languages can be employed.

In jQuery, there exist two primary methods for including a file within another HTML file:

1. AJAX request
2. .load() method

How to include HTML page with jQuery

Read more

How to Use before() and after() method in jQuery

In CSS before and after pseudo-elements use to add style to the targeted selector elements.

There are two methods with a similar name in jQuery.

They adjust the position or add the element before and after instead of changing CSS.

In this tutorial, with examples, I show how you can use before() and after() methods on your webpage.

How to Use before() and after() method in jQuery

Read more

Custom Right Click Context menu with jQuery

Sometimes it is required to show a custom context menu instead of the browser default one when right-clicking on the webpage or on a specific element.

By doing that it is possible to show a context menu according to the element and disable the default menu where necessary.

It is customizable according to the website design.

For implementing this I am using jQuery in this tutorial.

When right-clicking on the element then disable the browser default context menu and display the custom options.

Custom Right Click Context menu with jQuery

Read more