Reload page not working after validation using JS - laravel

So I have a form that has Laravel validation on it. Page reload is working well if there're no problems with the form such as required fields, but if validation fails, the reload page is not working. I am forcing the page to reload if the back button is clicked. Here's the code have.
<script type="text/javascript">
$(window).load(function() {
$('form').get(0).reset();
});
</script>
All fields should be blank after successful submission.
What should be the other things to do to achieve it in laravel blade file?

Have you tried location.reload(); ?

Thanks for the help.
I have done it this way:
<script>
if (!!window.performance && window.performance.navigation.type === 2) {
//navigation type 2 is accessed using back button while,
//0 is accessed using the link or redirected after validation and 1 is refresh page
window.location.reload();
}
</script>

Related

Inertiajs - Switch to another page locally

I would like to know how to switch between different pages on the client side only, without inertia.visit().
I am using Laravel and Inertiajs.
I understand that props must be specified from the laravel side in order to move to another page.
Is there any way to switch pages without communication between client and server?
I want to switch pages only on the client side with the URL, not by switching components within the same page.
Not sure if you are asking for this, but InertiaJS has an alternative for manual visits - the InertiaJS Link:
<template>
<Link href="/myPage" v-text="`Click me`" />
</template>
<script setup>
import { Link } from '#inertiajs/inertia-vue3'
</script>
Logically, anyways you'll have to register a route in routes/web.php, else you'll get a 404:
Route::get('/myPage', function () {
return inertia('MyPage');
});

JQuery mobile disables links and forms

I've made page with sidebar, which can be hidden. I added JQ mobile becouse I need swipe event for handling it on mobile devices, but JQ mobile broke the page completely.
All forms are submitted by AJAX (I found event for forms and links in G Chrome- developers) and all links also tries to load content by AJAX.
Is there any way how to disable it for whole page (some global config, not just with data-ajax=”false” which doesn't work for me at all)?
Could anyone help me fixing that? Thank you :)
After few hours browsing documentation, I've found, what I needed. I just needed to move config code before JQ Mobile script loading.
Now it works;
<script src="files/script/lib/jquery.min.js"></script>
<script type="text/javascript">
$(document).on("mobileinit", function () {
$.extend($.mobile, {autoInitializePage: false});
});
</script>
<script src="files/script/lib/jquery-mobile.min.js"></script>

Meta refresh on session.maxInactiveInterval and AJAX don't get along

I have JSF web page using PrimeFaces 5.1 and I want to redirect redirect to some xhtml page once session is expired.
I have set session timeout to 1 minute (for testing it will be set to 30 after that) in web.xml
<session-config>
<session-timeout>1</session-timeout>
</session-config>
And i have added
<meta http-equiv="refresh" content="#{session.maxInactiveInterval};url=#{request.contextPath}/season_expired.xhtml"/>
to <h:head> of the default template which is used on every page of the application.
Everything works fine for the most of the time (when I move between pages etc..) except when I'm using using some form where every refresh is made by AJAX. Then i get redirected after one minute.
Is there a way to "refresh" session with AJAX?
You can use JS setTimeout() for that which you can clear out with clearTimeout() when an ajax request is made. You can use jsf.ajax.addOnEvent() to register a global ajax event listener function.
<script>
var redirectToExpired = function() { window.location='#{request.contextPath}/expired.xhtml' };
var expireTimeMillis = 5000;
window.redirectOnExpire = setTimeout(redirectToExpired, expireTimeMillis);
jsf.ajax.addOnEvent(function(data) {
if (data.status == 'begin') {
clearTimeout(window.redirectOnExpire);
window.redirectOnExpire = setTimeout(redirectToExpired, expireTimeMillis);
}
});
</script>
Like as with the meta refresh header, this is a bit naive as it doesn't work nicely when you have the same webapp open in multiple browser tabs. In a "forgotten" tab, the redirect will still happen in the background while you're active on the same webapp in another tab.
Better is to just not do that all, but rely on ViewExpiredException during a real user action. You can find in javax.faces.application.ViewExpiredException: View could not be restored how to register an error page for that and also how the meta refresh header could be used there.
See also:
Execute JavaScript after every JSF ajax postback

JQuery Mobile events does not fire after ajax call

I'm JQM newbe and I'm using it for our ASP.NET MVC 4 project. Here's a simplified version of code that I'm using:
Controller:
public ActionView ShowModel()
{
return View("ShowModel", new Model());
}
View (ShowModel.cshtml Javascript):
<script>
$('#page').bind('pageinit', function() {
$('#spanSubmit').click(function () { $('form').submit(); });
});
<script>
<form action="#Url.Action("ShowModel")">
<span id="spanSubmit">Submit</span>
</form>
After AJAX query I can't fire form submitting again also no other callbacks that were attached in pageinit callback are working.
Everything starts working when I'm adding data-ajax="false" to form tag. But I really want it to work with AJAX, so can anyone explain me what should I do.
I know that my question was asked several times but I still can't make this page work. Thanks in advance.
I needed to look more into documentation and HTML code after AJAX call. After AJAX completed JQM creates an additional page with same id. So calling $('#page').bind fails because there are two pages now with page id.

button not working in MVC when JQuery SCRIPT tag is used in view

i am using script tag in my MVC view and my src for Script tag is "http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js".
the issue iam facing is html buttons are not working/postingback.
If i remove script tag,everything works fine.
whts the actuals problem with my code.?
there could be number of issues, the script tag you are refereing to includes the jquery library from the CDN. One possibility could be that there is some javascript code in the view that is disabling your buttons you can verify by doing the following
1) keep the script tag (jQuery) included in the view
2) in the script section of your view (if you have else create one like)
<script>
$(function(){
$(":button").removeAttr("disabled");
});
</script>
3) so your final code will look like
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(":button").removeAttr("disabled");
});
</script>
check now if it works... if it works then it means that you have some code that is disabling the buttons and upon removal of jquery library js error would have occured that why it seems to work...

Resources