I am submitting a form directly without using Ajax request, I want to show loader when getting a response from the backend.
How is it possible?
{!! Form::open(['route' => ['patient_signup'], 'method' => 'post', 'name' => 'sign_up_form']) !!}
and in controller
public function patient_signup()
{
if ($result) {
return redirect(route('home'))->with('success', $message);
} else {
return Redirect::back()->withInput()->with('error', $message);
}
}
Everything working fine but I want to show loader when getting a response from the backend.
Please provide me a better solution.
You can add div tag after body tag like below
<body>
<div class="pageLoader" id="pageLoader"></div>
In css
.pageLoader{
background: url(../images/loader.gif) no-repeat center center;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9999999;
background-color: #ffffff8c;
}
then in JavaScript
$(window).on('beforeunload', function(){
$('#pageLoader').show();
});
$(function () {
$('#pageLoader').hide();
})
Updated
return redirect(route('home'))->with('success', $message)->with('loader',true);
then in JavaScript
$(window).on('beforeunload', function(){
#if(isset($loader))
$('#pageLoader').show();
#endif
});
$(function () {
$('#pageLoader').hide();
})
It feels like you're fudging this a little. Spinners typically work with ajax requests as the spinner provides a visual feedback that an action is ongoing. The action being a request has been sent to the server by the browser and the browser is now waiting on a response. The response is required in order to remove the spinner (response could also be a failure or timeout etc.) and the spinner is removed without a page refresh.
In your use case, the response from the server is in fact redirecting the user to another page, or back to the form page with errors.
So basically what you want to do is have a loading indicator (spinner, words, etc.) which is initially hidden and you display when the form is submitted and it will automatically disappear if the user is redirected back to your form page.
As an example:
<div class="relative grid place-items-center h-screen">
<form id="some-form">
<button id="form-submit" class="px-4 py-2 bg-gray-800 rounded text-white">Submit</button>
</form>
<div id="loader" class="hidden" style="display: none">
Loading ...
</div>
</div>
Then your javascript:
let form = document.querySelector('#some-form');
let loader = document.querySelector('#loader')
form.addEventListener('submit', function (event) {
event.preventDefault();
// using non css framework method with Style
loader.style.display = 'block';
// using a css framework such as TailwindCSS
loader.classList.remove('hidden');
// pretend the form has been sumitted and returned
setTimeout(() => loader.style.display = 'none', 1000);
});
You could use jQuery or whatever you want but you get the idea. Example jsFiddle here.
Related
I'm using the jQuery plugin Masonry and I'm having an issue that happens when I make an ajax call to another page to load in images for a gallery. The ajax call works and the images load in but when the call is made, something happens that removes one of the classes that Masonry appends too one of my divs.
Here is how my html looks on the first page. Everything is fine here and shows the class masonry-brick, which I need to render out the appropriate css to make everything look nice and it also renders out the inline css.
<a href="/system/images/series_uploads/15/original/berkshire_25585_walnut_famousdaves03.jpg?1330115640" rel="lightbox['gallery']">
**<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">**<img alt="" src="/system/images/series_uploads/15/gallery/berkshire_25585_walnut_famousdaves03.jpg?1330115640" title="Berkshire" />
<div class="gallery-text">
<h3>Berkshire</h3>
<p>HDP – High Definition Porcelain</p>
</div>
</div>
</a>
When I click on the link to make the ajax call, the images load in fine and it works on all the links but the class masonry-brick is removed and the images lose their css.
jQuery("#project-galleries-navigation li.load-category a").on("click", function(){
var href = jQuery(this).attr("href");
jQuery("#gallery").fadeOut(300).remove("img").load(href).fadeIn(2300);
return false;
});
This is the code i'm using for masonry.
var $container = jQuery('#copy-wrapper-gallery');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
isAnimated: true
});
});
This is what ends up happening to my html when the page loads in the new data. The class masonry-brick is no longer present and the inline css disappears as well.
<a href="/system/images/series_uploads/7/original/ashton_23931_smokey_beige_.jpg?1330114250" rel="lightbox['gallery']">
**<div class="item">**<img alt="" src="/system/images/series_uploads/7/gallery/ashton_23931_smokey_beige_.jpg?1330114250" title="Ashton" />
<div class="gallery-text">
<h3>Ashton</h3>
<p>Porcelain</p>
</div>
</div>
</a>
Has anyone had this problem or knows a way to fix this issue?
I was able to get it to work by modifying this jquery and putting in a callback function for it.
jQuery("#gallery").fadeOut(300).remove("img").load(href, function(){
jQuery("#gallery").masonry("reload");
}).fadeIn(2300);
e.preventDefault();
});
I have a form inserted by jQuery Ajax to a page's div (say, 'content') and when the user finishes filling the form and hits 'submit' button, the result will be shown for further verification. The html and ajax code are as follows:
HTML:
<form id="userForm" action="..." method="post">
...
...
</form>
Ajax:
$(document).ready(function() {
$('#userForm').ajaxForm({
success: function(returnData) {
$('#content').html(returnData);
}
});
});
The 'returnData' is the filled form (without input fields) for further confirmation. Now, how do I implement a 'back' button such that the user may go back and modify the previously entered data?
I am working on Google App Engine with Python. Thanks.
I wouldn't replace the form with new HTML.
I would rather hide the form with display: none and add the new HTML for viewing alongside. If you want to go back, then you can just hide the "viewing div" and show again the form, without the need to refill any input elements.
Something along these lines should work
HTML:
<div id="content">
<div id="user-form-container">
<form id="userForm" ...>...</form>
</div>
<div id="viewing-container"></div>
</div>
CSS:
#viewing-container {
display: none;
}
The viewing part contains some sort of back-button, which hides the viewing area and shows the form again
jQ:
$(document).ready(function() {
$('#userForm').ajaxForm({
success: function(returnData) {
$('#viewing-container').html(returnData);
$('#user-form-container').hide();
$('#viewing-container').show();
$('#viewing-container #back-button').click(function() {
$('#user-form-container').show();
$('#viewing-container').hide();
});
}
});
});
I'm using the BlockUI jquery plugin to show a loading message in a div until the content is loaded using JQuery's load method.
The problem is, the content I'm pulling in contains images. The load callback fires before the images are fully loaded and the div is unblocked too early.
Is there a way I can wait for all the images to load before BlockUI unblocks the div?
Alternatively, if I can override the unblocking I can do the following, using the waitForImages plugin
$('#mydiv').block({ message: 'Loading' });
$('#mydiv').load('ajax.php', function() {
$('#mydiv').waitForImages(function() {
$('#mydiv').unblock();
});
});
I reckon you should wrap your DIV #mydiv inside another DIV.
$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157623591220769&nsid=21696934#N05&format=json&jsoncallback=?", function(data) {
$.each(data.items, function(i, item) {
$("<option>").attr("value", item.media.m).html('image ' + i).appendTo("#imagesLink");
});
});
$("#imagesLink").on('change', function() {
$('#mydivContainer').block({
message: 'Loading'
});
setTimeout(LoadImage, 10, this.value);
});
function LoadImage(imagePath)
{
$('#mydiv').html($('<img>').attr('src', imagePath));
$('#mydiv img').waitForImages(function() {
$('#mydivContainer').unblock();
// alert("Finished!");
});
}
#mydivContainer
{
width: 400px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.blockUI.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.waitforimages/2.4.0/jquery.waitforimages.js"></script>
choose an image <select id="imagesLink"></select>
<div id="mydivContainer">
<div id="mydiv"></div>
</div>
Or a fiddle jsFiddle where you can test it.
I have this fairly basic code within a $(document).ready listener:
$('#contact-us-button').fancybox({
padding: 20,
beforeLoad: function () {
$("#slideshow").data('nivoslider').stop();
},
afterClose: function () {
$("#slideshow").data('nivoslider').start();
}
});
$('.get-a-quote').fancybox({
padding: 20,
beforeLoad: function () {
$("#slideshow").data('nivoslider').stop();
},
afterClose: function () {
$("#slideshow").data('nivoslider').start();
}
});
Whereas the HTML:
<a id="contact-us-button" href="impianto/get-a-quote-form.php"></a>
[...]
<div class="product">
<h1>Ferrari California</h1>
<a href="dettaglio.php?id=7">
<img src="images/showcase/ferrari-california-showcase.jpg" />
</a>
<a class="get-a-quote" href="impianto/get-a-quote-form.php?id=7"></a>
</div>
Fancybox binds correctly but shows that message in place of my form. There are no conflicts among class names and IDs. Any ideas? Please note that Fancybox 1.3.4 behaves correctly with about the same code (different options).
Try adding the fancybox.ajax class to your links like
<a id="contact-us-button" class="fancybox.ajax" href="impianto/get-a-quote-form.php"></a>
and
<a class="get-a-quote fancybox.ajax" href="impianto/get-a-quote-form.php?id=7"></a>
Try using the property 'type' : 'iframe' if you want it to show another web page's content inside it like a window to the other page.
Something like this in your < head > tag:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'type' : 'iframe'
});
});
</script>
Also it might be obvious but if not... With this specific javascript enabling "fancybox" class links as popup links, your link to fire a popup would have class set as matching the class name in the javascript above, something like:
Link
can we use google AJAX Language API with EXTjs?????
i have tried example for translitration i have one html file
and typemarathi.js
google.load("elements", "1", { packages: "transliteration" });
function onLoad() {
var options = {
sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage: [google.elements.transliteration.LanguageCode.MARATHI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control = new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the editable DIV with id
// 'transliterateDiv'.
control.makeTransliteratable([myname]);
}
google.setOnLoadCallback(onLoad);
it works fine.
but if i write the textfield in extjs
Ext.onReady(function(){
var form1=new Ext.FormPanel({
renderTo:document.body,
frame:true,
title:'My First Form',
widyh:250,
items:[{ xtype:'textfield', fieldLabel:'First name', name:'firstname'}]
});
});
and try to pass firstname (name attribute to control.makeTransliteratable([firstname])) then it does not work... it says invalid id error
but if i pass->(html textfiled name to it) control.makeTransliteratable([myname]) it works fine
(i want to type and display multiple nonEnglish languages data
programatically frontend i used EXTjs is there any another way to do so if yes the suggest me. pls..
Yes you can.
Besides someone should clean his code, thats hurrible.
Yes, you can. But you should know that ExtJs automatically generates identifiers for html elements:
html:
<div class="x-form-item x-form-label-left x-box-item" id="ext-gen27" style="left: 0px; top: 0px;">
<label style="width: 55px;" class="x-form-item-label" id="ext-gen28">Send To:</label>
<div style="padding-left: 60px; width: 668px;" class="x-form-element" id="ext-gen26">
<div class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" id="ext-gen24" style="width: 668px;">
<input type="text" name="to" id="ext-comp-1002" autocomplete="off" size="24" class=" x-form-text x-form-field x-form-focus" style="width: 651px;">
</div>
</div>
</div>
js:
....
items: [{
xtype: 'combo',
store: ['test#example.com', 'someone-else#example.com' ],
plugins: [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
fieldLabel: 'Send To',
name: 'to'
}]
As I understand you need to translate the label. In order to do this you should get the id of the label. To do this you can use TextField's label property (myField.label.id). If you want to translate a lot of elements then probably it'll be better for you to use something like this:
var control = new google.elements.transliteration.TransliterationControl(options);
var labelIds = [];
Ext.each(Ext.select('label'), function(item){
labelIds.push(item.id);
});
control.makeTransliteratable(labelIds);
But be aware that you should call this only after rendering all elements. Also you can write a some plugin that will inject this functionality into 'render' method. Writing a plugin is a better but a bit more harder way.