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);
}
);
}
Related
I found 2 similar questions ont stackoverflow, but it didn't help.
I'm using VueJS and semantic-ui modal.
According to my structure of code, each time i call the "show modal" method, a new modal is added to the source page with the same id :
<div id="myModal ...>
So finally the content of this modal is wrong and not expected because the changes are in the last modal (conflict id). But anyway duplicating the modal code is wrong.
So i made a jsfiddle to be clear : https://jsfiddle.net/3ut5d9uu/5/
To reproduce the bug :
click on "open modal", you see the name "a"
click on "change name", open modal, the name has changed (just appending "x"), this is ok. You can repeat if you want.
click on "change page", you go to page 2, click again to go to page 1
"change name" has now no effect in the modal content.
Help to debug : i can see in my developement browser that each time "openModal" is called, a full code is added at the end at the DOM and never removed :
<div class="ui dimmer modals page inverted transition hidden">
<div id="myModal"...
So we have several same ids "myModal".
But i could'nt fix that.
Thanks for your help.
As mentioned in the comment, there's a conflict between vue and jquery
Vue uses a shadow dom that adds and removes items as needed
jQuery relies on the item remaining in the DOM the entire time.
this conflict happens when you go from one page to another.
While I would strongly recommend removing jquery, in favour of something like https://github.com/almino/semantic-ui-vue2, there is a way to handle this.
here is the working fiddle
https://jsfiddle.net/3ut5d9uu/6/
this is done through a couple key things,
maintaining scope of dome by tracking it within vue. Here we assign reference to the jQuery modal object to a vuew data object
,mounted: function () {
this.modalDom = $('#myModal').modal({ inverted: true, closable: false });
}
you will also need to add modalDom to data
let dataPage1 = {
name: 'a',
modalDom: null
};
and then use that to show/hide modal
openModal: function() {
this.modalDom.modal('show');
},
closeModal: function() {
this.modalDom.modal('hide');
},
voilà, Bob = yourUncle;
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'
});
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 was trying to add a new tab page using tab.addchild programmatically after creating dojox.layout.contentpane with href attribute.
Following is the sample snippet of the relevant code (tabMain is tab control placed in the page)
dijit.byId('tabMain').addChild(new dojox.layout.ContentPane({
title: 'My page',
href: 'country.jsp',
closable: true,
parseOnLoad: true,
postCreate: function () {
dojo.parser.parse();
}));
This country.jsp has custom widget (that contain two standard dijit widgets).
But the custom widgets are not parsed and hence I am not getting the custom widget properly loaded, where as other standard dijits mentioned in the country.jsp loads perfectly.
To rule out the problem with my page and custom widget declarations, I put this custom widget directly in a page without loading inside a contentpane/tab (and loaded inside as dialog page), it works fine. So, I assume that the dojo parser is not parsing the custom widget, when I load it in the content pane as shown in the above code.
Does this mean, custom widget cannot be used for such type of loading or Am I missing anything extra to force the parser to work? I tried running parser on load, downloadend, downloadstart, ready events, but with no luck.
Any help would be appreciated.
Without knowing anything about DOJO, your provided snippet is missing a closing bracket inside the ContentPane constructor call, making it invalid (and thus not parsable).
Try:
dijit.byId('tabMain').addChild(new dojox.layout.ContentPane({
title: 'My page',
href: 'country.jsp',
closable: true,
parseOnLoad: true,
postCreate: function () {
dojo.parser.parse();
}
}));
I have web page on which I display a lot of summary information. I would like to be able to, by clicking a right button or link, to open up a new window and display the underlying data.
For many reasons I cannot request the underlying data again from the server once the summary information page is generated
What I would like to achieve is:
Embed the underlying data in a hidden
table in the summary page
On thesummary page I also provide a 'drill
down' button
Open a new window upon a click of
this button
Inject the content of the hidden
table into the new windows.
What I want to learn are:
What to pass to the href parameter
of the window.open(href) function?
How to get a reference to the new
window and inject the content?
I am using jquery 1.5.2
You should pass about:blank.
open returns a new window object; you can write to its document.
However, you should consider using a modal dialog, such as jQuery UI Dialog, instead.
I'd look at using the jQuery UI dialog widget and open a dialog rather than a new window. It would be dead simple to copy stuff from the DOM into the dialog when it opens.
$('.drilldown-button').click( function() {
$('<div title="Details"></div>').dialog({
autoOpen: true,
modal: false,
open: function() {
$('.hidden-details').clone()
.appendTo($(this))
.show();
// maybe add some handlers, etc.
},
buttons: {
'Close': function() { $(this).dialog('destroy'); }
// maybe other buttons for different actions
}
});
});