Develop Reference

Semantic-ui modal duplicated with VueJS

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;

Unable to close closable tabs and to activate tabs

I made a fiddle which demonstrates these issues. The first issue is that it is impossible to close closable tabs in a TabBar. The code is as simple as:
Ext.create("Ext.tab.Bar",{
renderTo: "one",
items:[{"text":"One","closable":true},{"text":"Two","closable":true}]
});
Documentation says, that
closable : Boolean bindable
True to make the Tab closable and display the close icon
So, this property is not only about this close icon, but also about this behaviour to be closed.
The second issue I face is that it is impossible to activate tabs added to a tabpanel through a tabbar. The code is also very simple:
Ext.create("Ext.tab.Panel",{
renderTo: "two",
id: "test2",
items:[{"title":"One","closable":true},{"title":"Two","closable":true}],
listeners: {
render: function () {
this.getTabBar().add({"text":"Three"});
}
}
});
Just try to activate this last tab and you will fail. And if you set active property on this tab, then you won't be able to deactivate this tab. So, how can we fix all this?

TabBar is used internally by a Ext.tab.Panel and typically should not
need to be created manually.
The tabbar's implementation relies on the fact that it is a part of a tabpanel. If we dig in it's source, we will see that in the "closeTab" method implementation it checks if there is an underlying card to close:
if (tabPanel && card) {...
Related to the second behavior, if you will check out the "doActivateTab" method implementation, also in the tabbar source code, this is what you will see:
doActivateTab: function(tab) {
var tabPanel = this.tabPanel;
if (tabPanel) {
// TabPanel will call setActiveTab of the TabBar
if (!tab.disabled) {
tabPanel.setActiveTab(tab.card);
}
} else {
this.setActiveTab(tab);
}
}
So if there is no tabpanel, it will just activate the tab, if there is, it will call the tabpanel's "setActiveTab", that if it doesn't find a card attached to the tab-to-be-activated, activates the previous tab.
You should not add directly to the tabbar, instead add to the tabpanel:
this.add({"title":"Three"});

Here's a working fiddle. Seems like setactivetab needs to be after render.

Page becomes unresponsive after closing a modal

I am creating a system for hotel management that manages guests and checkins.
I am having trouble with the response time of my modals.
I have a cancel button inside the modal which closes the modal BUT DOESN'T reload the page. Here's what I got in the cancel button:
$("#cancel").click(function(event) {
event.preventDefault();
jQuery(".ui-dialog").dialog().dialog('close');
jQuery(".ui-widget-overlay").dialog().dialog('close');
});
Here's the problem:
When the modal appears (by clicking another button), I click cancel and the code above is to be executed. I did this numerous times (Open modal and cancel) and the page became unresponsive. You have to wait minutes before it closes the modal after doing it for over 5 times. You can't even close the tab of the browser.
Any ideas would be very much welcome. Thank you.
PS.
I uploaded the system to the web for you to see.
http://greenenergiesllc.com/temp
Login: joel
Password: 1234
PHP file that creates some of my modals: https://www.dropbox.com/s/azi51w0pzp69kgh/checkin.php
Code snippet on how I create a modal:
jQuery( "#ex4").dialog({
height: 'auto',
width: 450,
modal: true,
closeOnEscape: false,
open: function(event, ui) {
jQuery(this).parent().children().children('.ui-dialog-titlebar-close').hide();
}, position: ["center", 100],
resizable: false
});
EDIT:
This is what I've done so far. I solved the DOM problem of creating too many objects by adding .remove after the close call.
$("#cancel").click(function(event) {
event.preventDefault();
jQuery(".ui-dialog").dialog().dialog('close').remove();
jQuery(".ui-widget-overlay").dialog().dialog('close').remove;
});
However, after closing the modal for the first time, it won't open for the second time and I got this error.
--> UPDATE: Using remove won't bring the modal back when called. I am completely confused now what to do. I need to remove those DOM elements when called by using .remove() but I need to bring them back when called.
Uncaught TypeError: Cannot call method '_focusTabbable' of undefined

Dont need to use like that way. Try
$(".ui-dialog").dialog( "close" );
$("#cancel").click(function(event) {
event.preventDefault();
$(".ui-dialog").dialog( "close" );
$(".ui-widget-overlay").dialog('close');
});

It's not appear to be a problem with the close function.
When you click on link, the modal appears. In this moment, you create one modal in the DOM. See:
If you click many times, you have created many others modals in the DOM. See:
The problem is in your function that trigger this modal. With many HTML in your DOM, more slower the "close" function will be.

events calendar using jquery

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);
}
);
}

jQuery ui tabs select help needed. Can I cancel the action?

I'm using the following function to update the tabs on a jQuery ui tabs widget.
function updateTheTabs(select, disable) {
var selectIdx = vehicleSelectorControl.tabIndexByName(select);
$tabs.tabs('option', 'disabled', [])
.tabs('option', 'disabled', convertToTabIndices(disable))
.tabs('option', 'collapsible', true)
.tabs('select', selectIdx)
.tabs('option', 'collapsible', false)
.tabs('select', selectIdx);
}
I'm toggling the 'collapsible' option to achieve a desired behavior by the client. I also update the content of the tab on tabSelect. My question is I would only like the first tabSelect to actually trigger the call to the server. The 2nd tabSelect is just meant to show the tab. I realize this is a bit of a hack. Other controls on the page affect the tab states and in a certain case, a tab was already selected so the first call wasn't updating its content, hence I made it collapsible, select it (which is actually de-selecting it), set collapsible to false, then selecting the tab (this triggers the update properly). Anyways the client likes the current behavior except that I can see the server is being called twice. I tried breaking the chain in to two pieces and setting a boolean variable in between then checking it when deciding to update the tabs. I didn't quite get the behavior I wanted. Can anyone point me in the right direction here? Again, I don't want to call the server if it's not necessary. I would like a solution that doesn't require changing the 'updateTheTabs' function. Thanks so much for any advice or tips.
Cheers,
~ck in San Diego

I'm not sure I got what you wanted to do, but to the sentence "...except that I can see the server is being called twice", I take that you want to cache the content of the tab.
You may try to set the cache option to true when you initiate the tabs:
$tabs.tabs({cache: true});

It might be easiest to just use a global to keep track of whether or not the tab has been loaded. Then in beforeLoad, check if the tabs has been loaded. If not, load it, otherwise just show it. In example code below, be sure to change 'my-tab' to match the title in the html, i.e. My Tab
var tabLoaded = false;
$("#tabs").tabs({
beforeLoad: function(event, ui) {
if($(ui.panel).attr('id') == 'my-tab' && tabLoaded) {
event.preventDefault();
}
});