I have looked around for an already existing script for this, but couldn't find one, so i decided to make my own.

The point of this is to make it easy to reload an element, whether its a form or a link.

To use the script, you add a class to the link/form called "js_container-reloader". What the script does is it simply gets the content of the action url or href, creates a wrapper around the element you are reloading, takes the ajax response and puts it in to the wrapper, then removes the wrapper.

Its working as it should at the moment, but i wonder if there is a better way of doing this.

$(document).on("submit", ".js_container-reloader", function(e){ e.preventDefault(); //Call the reloader function elementReloader(e.currentTarget); }); //Link element reloader$(document).on("click", ".js_container-reloader", function(e){
e.preventDefault();

});

*   Takes an element and the type of request this is */

//Set variables
var element = $(element), requestUrl, requestType, data, reloadContainer; //Wrap the element in a reloader div and save the div to a variable element.wrap("<div class='dv_dis-i js_reload-container'></div>"); reloadContainer = element.closest('.js_reload-container'); //If the element is a form if(element.is("form")){ //Save the forms action requestUrl = element.attr('action'); //Save the request type requestType = element.attr('method'); //Save the forms data data = element.serialize(); //If the request should be done by GET }else{ //Get the forms action requestUrl = element.attr('href'); //Save the request type requestType = "GET"; } //Run the ajax script$.ajax({
type: requestType,
url: requestUrl,
data: data,
success: function(result){

if(!result){

//If its not false then load the container with the result
}else{

//Add the result to the wrapper

//Remvoe the wrapper
}
},
error: function(xhr) {

*   An alert is saved to the session if there was an error
*   with any script that was loaded.
*   This function reloads the container which shows the session alert. */
},
});
}

I don't assume my code is expert level as i am not an expert, but the goal is to make it as easy and dynamic as possible for future implementations. I tried looking in to combining the code, especially the first 2 functions for the event listeners, together in to one function, but couldn't find a way that seemed like a proper solution.

Just to clarify about the form posting - i do the form validation and checking in php, in the actual file that is being loaded, and not in JavaScript/jQuery. This script is just for reloading elements.

• Personally I think you would be better switching on the element's type (FORM or A) rather than if a specific attribute. I would also get the method from the form's method aattribute. Also I notice that you pass in a type parameter but don't use it. – Marc Rohloff May 24 '19 at 16:14
• Thank you! I updated the code and added the forms actual method (didn't think about forms having a GET option!), and i use the type now, i forgot i was even sending that. And what do you mean exactly by switching on the elements type? At what point in the code are you referring to? – K.D May 24 '19 at 16:30
• @MarcRohloff please add an answer instead of a comment. Refer to the section When shouldn't I comment? on Comment everywhere. – Sᴀᴍ Onᴇᴌᴀ May 24 '19 at 16:45
• @SᴀᴍOnᴇᴌᴀ Too late, the code is changed now. Answer invalidation and all that. But you're absolutely right that the comment should've been posted as an answer. Just, not now. Too late. – Mast May 24 '19 at 17:02
• @MarcRohloff I actually ended up changing the code even more in my script and switching the element types, there were issues with the way i was doing it, but now it seems to be much better and more dynamic. Thanks for that! – K.D May 24 '19 at 17:43

Sorry I was busier earlier. Here is a more complete review. Just a few things off the top of my head.

• You can use a single call to the on function like:

$(document).on("submit", ".js_container-reloader", ... • var element =$(element), is syntactically incorrect since element is already defined as a parameter. One options is just use element = $(element); another pattern I often see is using a$ prefix on variables to indicate jQuery objects, i.e. var $element =$(element),

• requestUrl = element.attr('action'); would be better asrequestUrl = element.prop('action'); the latter will retrieve the default method for the form if no attribute is set.

• I personally think the use of wrap andunwrap` is an odd way to handle adding an element. I would remove the wrap and container code and just have something like the following on success:

success: function(result){
....
element.after(result);
element.remove();