I am building an advanced search form, and upon submit of criteria it brings back search results.
I wanted to implement a page loader for this, so on submit it then triggers the loading of the page
This tutorial works for the page itself
https://www.w3schools.com/howto/howto_css_loader.asp
Can anyone help me make this work when the submit button is clicked instead?
You can use JavaScript to show your loader when your submit button is clicked by adding at to the button directly
<input type="submit" onclick="document.getElementById(ID_OF_YOUR_LOADER).style.display='initial';">
or in a separate script-Tag:
<script>
document.getElementById(ID_OF_YOUR_SUBIMT_BUTTON).onclick=function(){
document.getElementById(ID_OF_YOUR_LOADER).style.display='initial';
}
</script>
Your loader would look like this:
<div id="ID_OF_YOUR_LOADER" class="loader" style="display:none"></div>
Related
Whats "best practice" for rendering components in a form based on user input?
I want a second input field added to the form when a user clicks option 2 on the dropdown button. I also want this if show cleared when a user clicks another option.
<form>
<button class='test'>my dropdown button with option 1,2,3</button>
<input type=text> input field 1</input>
<!-- if button clicked options 2, add second input field -->
<input type=text>input field 2</input>
</form>
Template.name.events({
'click .test': function() {
// something to render input field 2
}
)};
Thank you.
You can show your elements on conditional basis with helpers.On your second button click you can set a session and use it in a helper.Then in your html page use {{#if}} your element {{/if}}
And for clearing it , destroy this session.
Hope this make sense to you.If any query lmk
Any browser. All other functions operate as normal. I can traverse routes, open modals, dropdowns, manipulate collections... everything works.
But at some point, the browser will no longer scroll. In any view. Unless I refresh the browser window. Then scrolling goes back to normal.
What might cause this? Why does refreshing the page fix the issue? Is there a method to smack reactivity upside the head?
This is likely due to navigating away from a (Bootstrap ?) modal without properly closing it.
When you show up a modal in HTML5 frameworks, they usualy display a backdrop (some kind of fullscreen grayed out component) and disable scrolling to simulate desktop experience.
You can solve this problem using a simple iron:router pattern, if you're not using this package, be sure to execute the corresponding code whenever you navigate away from a page where a modal might get shown.
client/views/modal/modal.html
<template name="modal">
<div id="modal" class="modal fade">
...
</div>
</template>
<template name="main">
{{> modal}}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
Show Modal
</button>
</template>
client/config/router.js :
// define the plugin
Iron.Router.plugins.hideBootstrapModalOnStop=function(router,options){
router.onStop(function(){
// hide modal backdrop on route change
$(".modal-backdrop").remove();
// remove modal-open state on body
$("body").removeClass("modal-open");
});
};
// activate the plugin
Router.plugin("hideBootstrapModalOnStop");
The .modal-open class set on the HTML body tag is the one disabling scrolling when it is set, so by making sure that we remove that class whenever we navigate away from a page when a modal is possibly shown, we prevent this weird unexpected behavior to happen.
I have a create view where the user and fill some data and if they click on a button a dijit.dialog opens with a list of items to select. Everything works fine, except that when the dialog confirms the selected items it goes to the controller to do some logic and refreshes the create view deleting the data that the user filled previously.
How can I make the dialog persist what the user already filled (maybe going to the controller to set the data before opening it)? Or maybe try to close the dialog, refresh the list that I show on the dialog and part of the create view that uses what the user selected.
Not sure if I make myself clear enough.
Edit
My project is based on Spring Roo:
<form:create .....>
.. inputs and tables ..
<input type="button" ../> //goes to controller and loads page with dialog open
<tiles:insertTemplate template="/WEB-INF/views/dialog.jspx" />
</form>
Dialog code:
<div id="dialog" dojoType="dijit.Dialog">
<form id="items" dojoType="dijit.form.Form">
<jsp:doBody/>
<input id="save" type="submit" name="sendDialogData">
</form>
</div>
I thought that would make the dialog part of the form but just checked with firebug and it is created after the "wrapper" (the div that contains everything)
I am using the example in the jqGrid Demos page located in Row Editing > Inline Navigator, but I need to have my add button out of the navigator like in example Live Data Manipulation > Add Row. I have already placed the add button:
<table id="editgrid" ></table> <div id="pagered" ></div> <input type="BUTTON" id="bedata" value="Edit Selected" />
and the event
$("#bedata").click(function(){ jQuery("#editgrid").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false}); });
My question is, what is the name of the event or the configuration of the jqgrid that I have to use, in order to insert the new row directly in the grid like in the inline navigator example whitout the modal form dialog when I click the betadata button?
I have already set the modal property to false, but it doesn't work,
Any help would be really appreciated
ANSWER:
The name of the event is addRow, I found it in the inline-editing document.
I am trying to refresh a sidebar.php in wordpress on a form submit (that is in a widget on the sidebar.php).
I have video on the page and if the entire page refreshes, the video has to play from the beginning.
I need a solution to simply refresh the sidebar.php when someone submits the form ... I am not an expert php programmer so simple is best!
btw. I am using formidable plugin for the form.
thanks in advance!
Sounds like a job for ajax!
Now, you could do it from scratch, but that would be unnecessarily painful. Instead, I recommend including jquery into your page by adding this into your header
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
(which uses the latest version, which is hosted on google)
Now that you have jquery loaded, there are many easy ways to submit your data without interrupting the flow of things. Here is how I would do it (I am assuming that you are using method="post"):
Change your <input type="submit" > into a <button>, so clicking on it doesn't trigger the built-in form submit (which would interrupt your video).
Set the id attribute of your button to something so that you can reference it easily like <button id="mysubmitbutton">. (While you are at it, give id attributes to all the form fields you care about if you have not already so that you can reference them easily as well, like <input type="text" name="firstName" id="firstName"> instead of just <input type="text" name="firstName">)
Inside the <head> portion of your website, add some code that looks like something like this:
<script type="text/javascript">
//makes it so that it goes after the html document is ready for it
$(document).ready(function() {
//this ties a onclick event to your button you made
$("#mysubmitbutton").click(function(){
//when the button is clicked, it will asychronously post to where you want it to
$.post("urlthatwasinyouractionequalsattribute.php",
{
//put all your post variables here, referencing the ids you made earlier
firstName: $("#firstName").val(),
time: $("#time").val() //be sure you don't have a trailing comma on the last one
},
function(data) {
//data is whatever the other website sends back. do whatever you want here...
alert("Result: " + data);
});
});
});
</script>
Fire it up and it should work. Obviously, you will need to change the values so that it matches your form, etc.
Hope that helps! Please mark as answer if it did.