I am a junior web developer and am currently creating a dynamic website. Within this website I am using Javascript in order to structure my pages e.g. entering HTML into a var string and calling upon it to load on the page when necessary.
I am trying to use the Bootstrap Modal for various forms to input data into my database. This is giving me some trouble as some elements such as datepicker is not working I assume because the Modal loads on click of the button where as the date picker loads on page load.
Anyway, I just wanted to know if there is a way to have content and my custom Javascript to load when the bootstrap modal button is clicked e.g.
var outputContainer1 = $('#selectCraft');
$.ajax(apiPrefix + '/craft' + apiSuffix, {
error: function() {},
success: function(data){
for(var i in data){
$('#selectCraft').append('<option value="'+ data[i].id +'">'+data[i].aircraft_name+'</option>');
}
},
type: 'GET'
});
As you can see this is a select element that is getting its information from the database. Which I want to load on button click rather then at the page-load.
My data target for the button is "#flightModal" and the Modal ID is "#flightModal".
If anyone can help I would much appreciate.
Thanks
Ibrahim
You just need to initialize your datepicker after the modal is created. So build you DOM in the success callback, then initiaze the datepicker as you would on a normal page load:
success: function () {
// ...
$('#datepicker').datetimepicker();
}
By the way, if you are working with modals, I recommend using the Bootstrap Dialog JavaScript library, it makes working with models programmatically much easier. For example you can show a simple modal window like this:
BootstrapDialog.show({
title: 'Hello World',
message: 'This is a hello world message'
});
Related
I'm trying to build a button that will allow users to automatically opt into all of a developer's beta apps (or the ones they select from a list I'll present) without the need to navigate to each beta app's sign-up page on the google playstore. I've tried the following, it loads the page, but I can't get the button-click/form submit right when trying it through ajax.
$.ajax({
url: 'https://play.google.com/apps/testing/com.joaomgcd.autoshare',
success: function( data ) {
// process data (which is actually your page contents)
//console.log(data);
alert("Loaded");
//$("input.action").click();
//var clickme = document.querySelector(".action");
$('.joinForm').submit()
//clickme.click();
alert("Done");
}
});
I get the first popup, but not the second one. This particular developer has each link on one page of their website, I'm just trying to make it easier for his communities to opt into all betas instead of one-by-one. What am I doing wrong in my above code? Do I need to be clicking the input button titled "Become a Tester" (class input.action) or submitting the form that contains that input button (form class joinForm)?
Per request: Code of the Beta Opt-In page
Error being thrown:
Scenario: user profile. I would like to be able to display a user name with a popover that displays a limited amount of information from the user profile. So far, I have that part working. I can build it on the fly and have it do what I need. The popover works perfectly.
What I would also like to do is have the user be able to click on the user name and bring up a Bootstrap modal form with more information about the user (if provided). The first problem I am seeing is that it appears the data-toggle attribute can only have a single setting:
echo '' . $user_row['user_name'] . '';
In that example, if I add the modal to the data-toggle attribute it doesn't seem to do me much good.
I have discovered by tinkering (and that is why the class 'userprof' in the code above), that a JavaScript click event can be triggered (right now all I'm doing is a basic JS alert dialog to test), but from there I would want to load the modal. I am not sure if I can make it all work.
I have a set of functions I've used successfully for another modal (calling this one 'userModal') that I got some help from someone here a while back with -- is it possible to call that from the click event?
// code to open the modal with the caption and description:
$('#userModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget); // Button that triggered the modal
var title = button.data('title'); // Extract info from data-* attributes
var body = button.data('body'); // Extract info from data-* attributes
var modal = $(this);
modal.find('.modal-title').text( title );
modal.find('.modal-body').append( body );
});
// when modal closes, clear out the body:
$('#userModal').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
Since these are "anonymous" functions I am not sure I can call them ... feeling a bit lost in the code here. Any help pointing me in the right direction would be great. I'd even be willing to consider a different idea, but I would like this kind of functionality (hover and click) for this situation and possibly something else. Thanks!
You're listening for the modal to show itself, when the DOM is showing the modal.
try using something like this, and use a button or a link with data-toggle="modal"
$(document).on('hidden.bs.modal', '#userModal', function ()
{
$(this).find(".modal-body").text('');
});
for reference https://jsfiddle.net/y063mu4t/1/
You can try:
$(document).on('click', 'a.userprof', function(){
$('#userModal').modal('show');
});
To make your callback function work, you need to add according data-* attribute to each of the <a> tag.
I am creating an extension with bootstrap modal whose form fields are title and description. I would like to pre-fill the title form field with the webpage's title using "document.title".
I have this code in my extension.js;
$("#myModal").bind( 'show', function () {
$("#title").val(document.title);
});
to prefill the title field which is not working.
I'm open to suggestions on how to fix this.
I'm creating the extension using crossrider api. The extension shows the bootstrap modal upon right-clicking a context menu on a web page. Thanks.
It depends on the bootstrap version you use. Bootstrap provides custom events for most plugins' unique actions. As of 3.0.0, all Bootstrap events are namespaced.
$('#myModal').on('show.bs.modal', function (e) {
$("#title").val(document.title);
})
Or:
$('#modal-content').on('shown.bs.modal', function() {
$("#title").val(document.title);
})
It might be a typing error in your question but your selectors can't work. You can use .classes or #ids but not something like title as selector.
I am building an appointments calendar using the fullCalendar jquery plugin and backbone.
I am reading this tutorial here about it:enter link description here
In the section "Let’s start a dialog" code is shown as to how to create a modal box and enter a new event,the code is based on the dialog widget of the jquery UI,enter link description here
here is the code specifically:
render: function() {
this.el.dialog({
modal: true,
title: 'New Event',
buttons: {'Cancel': this.close}
});
What I am trying to do is add more html in that dialog. I want to add a select element for example so that the user can choose the duration of the appointment.
The jquery documentation in http://api.jqueryui.com/dialog/ does not indicate how to do that.
In order to get a better a picture of what I want to do is to look at the modal box that appear when you go to create an event on outlook.com calendar.
Of course the data will be sent with a ajax...but that is a different topic.
The jqueryui dialog uses html content that's inside element you are applying plugin to.
I think it doesn't have built-in functionality to load content from external resources.
So you can either put html inside element before initializing dialog, or use its callbacks.
E.g. if you want to load data via ajax into it:
el.dialog({
modal: true,
title: 'New Event',
buttons: {'Cancel': this.close},
open: function(){
var thisdialog = this;
$(thisdialog).html('loading data...');
$.post('external_resouce.html',
function(data){
$(thisdialog).html(data);
}
);
}
I need a terse, clean way to implement this in asp.net mvc (+/- jquery or js)?
User clicks an element in webform A;
Webform B pops up;
User interracts with webform B;
On closing webform B, probably by a submit button, the source element in webform a is updated with a value from webform B
Thanks.
With ASP.NET MVC, I'd probably render a DIV on the page, initially hidden, perhaps via AJAX if the contents depend on values selected on the initial page. I'd use the jQuery UI dialog plugin to popup the dialog. The dialog could contain a form that submits back to the server. You could also use the onclose handler for the dialog to both copy values from the inputs in the dialog for use on the rest of the page. If you populated the dialog via AJAX you could have the server generate the HTML -- say by rendering a partial view and returning it -- or return json and generate the dialog on the fly in the browser.
I've resorted to using cookies. I've found this to be the only reliable way to do this. I'm using GrayBox for my dialog, so I have a function in the dialog that looks like this:
function selectValue(id, name) {
SetCookie("_someuniqueprefix_RetID", id);
SetCookie("_someuniqueprefix_RetValue", name);
parent.parent.GB_CURRENT.hide();
}
Then in my calling page I am launching the dialog which displays a partial in the GrayBox:
$(function() {
var selectUrl = '/_somecontroller/Select';
// attach a method to the chooseButton to go and get a list of
// contact persons to select from
$("#chooseButton").click(function() {
GB_showCenter('Select My thing', selectUrl, 500, 620, function() {
var id = GetCookie("_someuniqueprefix_RetID");
var value = GetCookie("_someuniqueprefix_RetValue");
DeleteCookie("_someuniqueprefix_RetID", "/", "");
DeleteCookie("_someuniqueprefix_RetValue", "/", "");
$("#MyID").val(id);
$("#MyName").val(value);
});
});
});
Also you'll need to grab a function off the web for SetCookie and GetCookie
Hope that helps
You can use javascript from the popup window to call functions on the opener via window.opener. So your popup could call a function on the parent page to pass the data back when the user clicks the submit button.
I'm not sure what your requirements are, but IMO using ajax for this sounds like overkill. If all you need is some form data from the popup webform passed to the opener webform, then there's no need to make a call to the server.