I have the jquery datepicker plugin bound to any elements with class="datepicker".
$(".datepicker").datepicker();
I am loading a form with:
<button type="button" class="btn btn-xs pull-right" data-toggle="modal" data-target="##modal" href="profile/eventnew"><i class="icon-plus"></i></button>
In the form that is loading I have a field with class='datepicker', however it is not getting picked up by the datepicker plugin as the element was not there when $(".datepicker").datepicker(); was executed.
I know that with events, I can use the jquery .on() method to bind to ajax loaded elements, but there is no event here.
How do I bind something such as $(".datepicker").datepicker(); to Ajax loaded elements?
Many Thanks
try:
$('#myModal').on('shown.bs.modal', function () {
$(".datepicker").datepicker();
})
Related
I have 2 submit buttons- 1 for "save", 1 for "show saved list".
I want if "subbutton" is clicked, redirect to resource controller public function store(Request $request), if "list" is clicked- redirect to resource controller public function index().
My functions work well. But I dont know how to link them with different buttons.
create.blade.php
<button type="submit" value="subbutton" name="subbutton" class="btn btn-primary">SAVE</button>
<button type="submit" value="list" name="list" class="btn btn-primary">SHOW</button>
A suggestion would be to transform your listing button to an a tag
SHOW
thereby, the submit button would carry out the form submission and the anchor tag would list the resources.
I have a modal that is triggered when the button is clicked in the main page. It works and the success modal is displayed and the url modal is closed. But my problem is that if I click the button again, url modal cannot be displayed. Here's my code.
<button class="btn pink apply_btn" type="submit" name="button">Apply</button> //my apply button in the page
<form class="search_form" action="" method="">
#csrf
<label>
<input type="url" required id="instagramLink" value="" placeholder="Instagram Post URL (Paste Here)">
<p>
<span class="alert"></span>
</p>
</label>
<div class="flex_box">
<button class="btn pink" type="button" id="save">Apply</button>
</div>
</form>
<script src="{{ url('/assets/js/modal.js') }}"></script>
And this is my ajax code in closing the url modal.
success: function(store) {
$(".apply_modal").hide();
$(".applyfnsh_modal").toggleClass("open");
$('.alert').html('');
},
error: function() {
$('.alert').html('Error occured while applying. Please try again.');
}
In my modal.js
//apply pop up
$(".apply_btn").on("click", function(){
$(".apply_modal").toggleClass("open");
$("body").toggleClass("open");
});
$(".modal_close").on("click", function(){
var modal = $(this).parent("div").parent("div");
modal.toggleClass("open");
$("body").toggleClass("open");
});
$(".apply_modal").on('click touchend', function(event) {
if (!$(event.target).closest('.apply_box').length) {
$(".apply_modal").toggleClass("open");
$("body").toggleClass("open");
}
});
So when the url is valid, save to db and display the success modal, which works, but clicking again the apply button in the page, is not displaying the url modal again. I have tried the answers here but nothing is working.
Ok, so here's what I'm thinking is happening... $(".apply_modal").hide(); is setting your modal's style to "display: none;" directly onto the DOM element. In order to display your modal, your code is simply applying a class of "open" to the modal. Any local styles to a DOM element override any styles from CSS. What this means is that the CSS styles applied to the class "open" don't matter because the div itself has a style attribute in it, and that style attribute contains "display: none". To fix this, wherever there is an instance of .toggleClass("open");, add a "show" declaration (.toggleClass("open").show();). You should do some serious refactoring if this works, but it'll at least let you know if we're on the right track.
I have a problem regarding the bootstrap tooltip on ajax loaded content.
I know there are other answers but it doesn't seem to work for me and i tried alot of methods.
First i am initializing the bootstrap tooltip using this code:
$(document).on('ready', this, function(e){
$("[rel='tooltip']").tooltip();
});
Which works great on normal content but not on ajax.
Secondly i have found here that i need to add a selector so i added a class to the ajax loaded content in this form:
<button data-toggle="modal" rel='tooltip' data-placement="top" data-original-title="View Supplier Details" data-target="#view-supplier" type="button" class="btn btn-success view-supplier btn-xs margin-left-5 tooltip-aj">
And modified the call of the tooltip to the following:
$(document).on('ready', this, function(e){
$("[rel='tooltip']").tooltip({
selector:'tooltip-aj'
});
});
But still can't get it to work. Can somebody please help me.
Regards!
Ok i found an answer just after i posted the question:
Here it is, as it is a bit frustrating sometime:
$('body').tooltip({
selector: '[rel=tooltip]'
});
Just add this DEMO
<button data-toggle="modal" rel='tooltip' data-placement="right" data-original-title="View Supplier Details" data-target="#view-supplier" type="button" class="btn btn-success view-supplier btn-xs margin-left-5 tooltip-aj">
$('body').tooltip({
selector: '[rel=tooltip]'
});
Thanks to Mystic Jay
Please find below my code:
Template of customer search form
<script type="text/x-kendoui-template" id="customer-search-view-template">
<div class="searchform" id="searchCustomer">
<form class="frmSearch">
<input name="searchTxt" data-bind="value: customerName" class="k-textbox" />
<button class="k-button" data-bind="click: searchClicked">Search</button>
<button class="k-button" data-bind="click: newClicked">New</button>
</form>
</div>
</script>
customer-search.js where loading above template and creating viewmodel object
$(function(){
var views = {};
templateLoader.loadExtTemplate("customer-search-view-template", "../views/customer-search-template.html");
var layout = new kendo.Layout($('#customer-search-view-template').html());
layout.render($("#main"));
// Create an observable view model object.
var customer = kendo.observable({
customerName: "John",
searchClicked: function() {
this.set("customerName", "Search clicked");
},
newClicked: function() {
this.set("customerName", "New clicked");
}
});
// Bind the view model to the personFields element.
kendo.bind($('#searchCustomer'), customer);
});
When I click the search button, the text is set in the textbox but this also refresh the page with ?searchTxt=Search+clicked in the address bar.
May I know why this button click refresh the page and how do I stop refreshing the page on button click ???
I would try and place the attribute 'type' for each like so:
<button type="button" class="k-button" data-bind="click: searchClicked">Search</button>
<button type="button" class="k-button" data-bind="click: newClicked">New</button>
The page thinks that each are performing a form submit action, but by placing the type attribute, you can access the event you intended for search. You may not need your form tags if you are not going to post any data, but rather just a js event handler. Good luck.
The reason is that you are inside a <form>, which has no settings (URL, method, etc), so the browser's default behavior is probably to perform a GET to the current URL (which is a refresh). You could just use <div> instead of <form> if you just want to execute that method.
I am creating a 9-step proposal form using django form wizard. All is well, until I wanted to use ajax to load the next step. I'm having a hard time configuring the ajax call in jquery because django forms don't have action url included in the form tag. Why is it like that anyway? A win-win situation for me is to have a loading screen for next step and if there is an upload file process in the step, show percentage loading for the uploaded file. Thanks!
I'm using this code, and It's working for me. I don't put any action inside the form, as you can see. I use the jquery 'on' function when the form is submited because all the form is reloading and changing inside the div#creation. Then the ajax url must be the one that displays your form.
In my case, the first step of the form is rendered also through ajax with get, when I click on some button. That's why there's isn't any form in the div at first. (I'm using bootstrap's modals).
<div id="creation">
<!-- form to be display through ajax -->
</div>
The template that is reload in the FormWizard Class in views is the following html:
template_name = 'creation_form.html'
Code por creation_form.html:
<form id="creation-form" action="#" method="post">
{% csrf_token %}
<table>
{{ wizard.management_form }}
{{ wizard.form }}
</table>
{% if wizard.steps.prev %}
<button name="wizard_goto_step" class="btn btn-primary" aria- hidden="true" type="submit" value="{{ wizard.steps.first}}">First</button>
<button name="wizard_goto_step" class="btn btn-primary" aria-hidden="true" type="submit" value="{{ wizard.steps.prev}}">Previous</button>
{% endif %}
<input id="create-submit" class="btn btn-primary" type="submit" value="submit" />
</form>
Here is my ajax call:
$('#creation').on('submit', '#creation-form' , function(e){
e.preventDefault();
var fd = new FormData($('#creation-form').get(0));
$.ajax({
url: '/create/',
data: fd,
type: "POST",
success: function(data){
$('#creation').html(data);
},
processData: false,
contentType: false
});
});
Hope this is a proper response for your answer.
I'm currently having a hard time going to the first/previous step, if you figure it out please tell me how.
This is what you're looking for?
Here's what I did-
Created separate model forms for each step.This helped in easy server side validation.
Made ajax calls for each step to validate form on the server side and on success render the next form and hide the previous form.
On submit of last form async POST the data for persistence and processing and render the response asynchronously below the last step.
Also maintained a progress bar for each step.
This is how I created my async form wizard using django forms. Not neat but works! :)