UploadField reinitialised after DOM update - ajax

I have a form with an UploadField. We submitted via ajax and then on completion the form is returned from the backend and added back into the page without a page reload.
This works fine however we now are moving to ES6 (from ES5) with webpack and while the form is replaced, the UploadField isn't reinitialised and therefore no longer works correctly.
We do run two jQueries however I don't think this is the problem as no errors are thrown when updating the DOM. I've also looked at initialising the field manually however I haven't had much luck and am not sure where Entwine fits in the mix of it. Whats the best way to get the UploadField working correctly after an AJAX update?

Related

Primefaces Ajax response fail randomly

I am using p:datatable and on clicking of row (Command link) I am displaying a panel. Most of the time it is working fine but in regression testing some time it is getting hanged but request is going to ManageBean fetching all the data.
But it is not rendering the panel. This error has no specific pattern. I have put log in all possible place even in phaselistner lifecycle everything looks good.
I checked in firebug response is also coming. from server
I am using weblogic 10.3.6,primefaces 3.5 and internet explorer 9.x
Try putting in a component in the page where the data table lives. This displays Ajax events and alot more. Then compare the log output for when it succeeds against the output for when it fails. This may point to DOM as was suggested or somewhere else.

How to reset or re-initialize a Jquery plugin being used on AJAX-updated links?

I am using this plugin for adding arrow key navigation to a website
Works great! However, sometimes my links are updated via AJAX and then the highlighting disappears. So I started re-initializing the plugin when my links were updated. I noticed this solved the problem, however now I had multiple copies of the plugin running, thus highlighting multiple buttons at once.
I know there isn't a 'built in' destory method in Jquery, but does anyone have any ideas on how to re-initialize a plugin or at least get rid of the old instance running.
You can see the source code of the plugin on GitHub
The plugin code is simple and I believe what I am trying to achieve is simple as well. Thanks!
The plugin you are using has an update function, call that function as soon as you get the ajax result back.
for example
var $keyNav = $('#navigation a').keynav();
and on ajax success
$keyNav.update();
I haven't tested this code but I think it will work.

FB Comments loaded via ajax div

Here's my issue, I'm trying to load a FB comments module via an AJAX div. Now, it works if I go directly to the php page, but if I load it from within the div, it doesn't. I've looked at the other posts (FB javascript SDK after jquery LOAD (ajax)), but still can't seem to get it to work, looking for clarification.
If you want to see what I'm talking about, check http://azconceptphoto.com/lindsey and check out testimonials.
Ideally, on the normal part of my site, I can just load the HTML5 code and it works fine, though for some reason it doesn't remotely work via the AJAX div. And considering the posts from before are out of date (2011), I was hoping to get more feedback on this.
Based on the code from your link you are not using any of the PrototypeJS Ajax methods to get the backend script. Ajax.Updater is the method you need to use so....
Here is my suggestion
change the definition of loadXMLDoc() to
function loadXMLDoc(div, location)
{
new Ajax.Updater(div,location,{'evalScripts':true});
}
this will update the contents of div with the contents of location. Also if the response has <script> tags in it then the javascript will be parsed and evaluated (thats the option evalScripts)

MVC 4, Jquery Mobile, Ajax.BeginForm causing forms to submit twice

Does anyone know of any bugs or other insight to explain why when using MVC4 with jquery mobile, any form that is created using Ajax.BeginForm results in the form being submitted twice to the controller.
I had originally thought that since I am using the js bundling that the same js file might have been being included twice and might be triggering on form submit, however thats not the case, my list of js files are:
jquery-1.6.4.js
jquery-ui.1.8.11.js
jquery.mobile-1.1.0.js
jquery.unobtrusive-ajax.js
jquery.validate.js
knockout-2.0.0.js
MicrosoftAjax.js
MicrosoftMvcAjax.js
MicrosoftMvcValidation.js
Modernizr.js
Within the project Ajax is fully enabled for everything i.e. i'm not disabling anything through mobileinit.
I have not posted any form code because it literally happens with every form - a form with one field and a submit button will cause the submission twice - but only where Ajax.BeginForm is being used.
Html.BeginForm doesn't exhibit any of these problems.
I've been stuck on this for a few days now so any help would be greatly appreciated
jQuery Mobile by default hi-jacks any form submission and performs its own AJAX request. To stop this behavior you can place the data-ajax="false" attribute on any <form> tag. Also make sure to stop the regular behavior of the form so it doesn't submit normally, something like:
$('#my-form').on('submit', false);
Docs: http://jquerymobile.com/demos/1.1.0/docs/forms/forms-sample.html
You could also just use the built-in jQuery Mobile AJAX rather than including extra JS for it. Which would only require you to make the action attributes of the forms to the server-side file to which they posts.

EditLive! Rich Text Editor - submitting form via ajax

The project I'm working on is using the Java EditLive! rich text editor. I've been trying to make the EditLive form post via ajax, but am having some problems using IE8. Here are the steps we're taking:
Load the main page
The user clicks a link and the EditLive applet is loaded and attached to the page via ajax
The user finishing editing their document and clicks the submit button
The form posts via ajax (we're using jQuery.post())
The EditLive section is reloaded and the EditLive content is correct.
The form immediately posts again
The EditLive content is back to being blank.
Unfortunately (for debugging reasons), this is not happening in FireFox - there is only a single form post and the values are saved correctly.
From what I can tell debugging this in IE8, it looks like the submit event is getting called twice with 2 different forms. My thought is that the applet isn't getting destroyed correctly, though I've tried everything in my power to destroy it.
So I was wondering if anyone has any experience successfully submitting EditLive data via ajax? Or maybe this is just a limitation to the product?
Any help would be greatly appreciated!
I know this is an old issue but you likely want to look at the autoSubmit property of EL:
http://docs.ephox.com/display/EditLive7/AutoSubmit+Property
http://docs.ephox.com/display/EditLive/AutoSubmit+Property
I suspect that by using an AJAXy submit process this is somehow causing you issues with EditLive and its standard behavior. I would try turning off autoSubmit and grabbing the content yourself in your jQuery posting process.

Resources