I am working on opencart. I tried to create a modal dialog popup every time user click a link that contains a product page. That links has a tabs inside (review,description). It load successfully, but the tabs are not working. How can i fix this?
This is how i call this:
$('a[href*="index.php?route=product/product"]').click(function(event){
event.preventDefault();
showDialog(this.href);
});
$("#dialog-modal").dialog({ //create dialog, but keep it closed
autoOpen: false,
height: 550,
width: 1000,
position: "center",
modal: true,
close: function(event, ui) { $('#wrap').show(); },
open: function(event, ui) { $('.ui-widget-overlay').bind('click', function(){ $("#dialog-modal").dialog('close'); }); }
});
function showDialog(urlToLoad){ //load content and open dialog
$.ajax({
type: "POST",
url: urlToLoad,
success: function( returnedData ) {
var $html = $(returnedData);
var content = $html.find('#content').find('.breadcrumb').remove();
content = $html.find('#content').html();
var container = document.getElementById('dialog-content');
container.innerHTML = content;
$("#dialog-modal").dialog("open");
$('#tabs a').tabs();
}
});
}
Apparently the $('#tabs a').tabs(); after $("#dialog-modal").dialog("open"); is not working.
Finally i solve this. It's just a silly problem, i forgot to import the jquerytabs.js in my caller page. So the tabs() function doesn't work. Now it's work perfectly.
Related
I have created the following button for an interactive grid (IG) using JavaScript Initialization Code in the IG attributes section.
function(config) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
lastToolbarGroup = toolbarData.toolbarFind("actions4"),
assembleButton = {
type: "BUTTON",
hot: false,
icon: "fa fa-send u-info-text",
iconBeforeLabel: true,
action: "assemble-as"
};
lastToolbarGroup.controls.push( assembleButton );
config.toolbarData = toolbarData;
// this is how actions are added
config.initActions = function(actions) {
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { apex.event.trigger("#hiddenAssembleAsButton", "hidden_assemble_as_button_click"); }
});
}
return config;
}
Then I created the hiddenAssembleAsButton using that name as the Static ID under advanced.
The button is defined by a dynamic action Hidden_Assemble_As_Button_Click which is where I think I should be able to redirect the page, but I'm not sure.
It seems like the page redirect should happen in the jQuery Selector but I don't know what to put there or if that's the correct area to add the code.
I can add images if necessary but I feel like I've described this pretty well.
Sometimes, you need a button somewhere in the interactive grid, but you still like to use the declarative options APEX provides with basic buttons, like doing all the stuff like passing variable values, calculating checksums or opening a dialog when your target page is a model page. This can be difficult in pure javascript.
In this case, you can also just create a basic button, set it up all the way you like in the designer, then hide it using Advanced --> Custom Attributes: style="display:none". Also, set a static ID like button1.
Then, in your action, you can simply trigger a click on the button.
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { $('#button1').click(); }
});
Clicking the button does something. It triggers an event called hidden_assemble_as_button_click binded to an id #hiddenAssembleAsButton. You want it to redirect. The simplest option is to do the redirect right in that code. Replace the actions.add block with this one:
actions.add({
name: "assemble-as",
label: "Assemble as ...",
action: function(event, focusElement) { window.location.href = "http://www.stackoverflow.com"; }
});
I've integrated Paypal to my website and everything worked as expected. However when i added a new language (greek) i got a problem when pressing pay with paypal button. When change back to english everything works and button is rendering with no probs.
The error i got from paypal is:
Code i'm using:
<div id="paypal-button-container">
<!--Paypal button will load-->
</div>
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
style: {
color: 'blue',
shape: 'rect',
label: 'pay',
height: 40
},
// Set up the transaction
createOrder: function(data, actions) {
console.log('kostas');
console.log(actions);
return actions.order.create({
purchase_units: [{
amount: {
value: amount,
}
}]
});
},
// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// Show a success message to the buyer
console.log(details);
sendData();
function sendData() {
fetch(url, {
method: "POST",
headers: {
"Content-type": "application/json",
"X-CSRFToken": csrftoken,
},
body: JSON.stringify ({
orderID: orderID,
transID: details.id,
payment_method: payment_method,
status: details.status,
}),
})
.then((response) => response.json())
}).render('#paypal-button-container');
Since is the first attempt to work with paypal i would appreciate any help if you can give me any hint on the below error or any idea on how to troubleshoot.
Many Thanks
when i added a new language (greek) i got a problem when pressing pay with paypal button.
You don't show the code you are adding, so it's impossible to say what specifically is triggering the error, but it appears it may be something in the order creation call, which is not the correct place for changing button text.
To change the language of the buttons to something other than the default (auto-detected based on the browser's language), use the locale query string parameter on the SDK src line.
Here is the documentation: https://developer.paypal.com/docs/checkout/reference/customize-sdk/#locale
I am having a problem with my fancybox 3 and jquery ui datepicker.
if I place the datepicker outside the fancybox.. the dropdown for months and years are working.. but when I place it inside fancybox. the dropdown is not being triggered. any idea what is happening?
$("#Date_To").datepicker({changeMonth: true,changeYear: true});
image
Try disabling focusing, something like this:
$('[data-fancybox]').fancybox({
autoFocus : false,
trapFocus : false,
touch : false,
beforeClose : function() {
$( ".selector" ).datepicker( "hide" );
}
});
Demo - https://codepen.io/fancyapps/pen/QqLXaz
I tried using modal and found a solution. is there any way I can covert this code for fancybox?
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
$confModal.on('hidden', function() {
$.fn.modal.Constructor.prototype.enfor
i have a listview of kendoui, when the page render, the listview show the data correctly, but when i change the datasource doesnt show the new data :/.
here is my code.
my listview.
Html.Kendo().ListView<CashControl.Models.cajeros>()
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.DataSource(ds=>
{
ds.Read(read => read.Action("CajerosRead", "Monitoreo"));
ds.PageSize(30);
}));
here is mi JS to change de datasource
$("#mapabutton").click(function () {
alert(message);
if (message != null) {
var listview = $("#listView").data("kendoListView");
var datasource = new kendo.data.DataSource({
transport: {
read: {
url: "Monitoreo/Index",
dataType: "jsonp",
type: "POST",
data:{checkNodes: message}
}
}
});
$("#listView").data("kendoListView").setDataSource(datasource);
$("#listView").data("kendoListView").refresh();
}
});
here is the return data in JSON
{"Data":[{"idcajero":"1","estado":1,"tipo":"SmartPay","url":"glyphicons-halflings.png","nombre":"sp3","disp1":[{"nivelActual":120,"nivelMaximo":1000,"nombre":"MEI"},{"nivelActual":100,"nivelMaximo":1200,"nombre":"MEI"},{"nivelActual":159,"nivelMaximo":245,"nombre":"MEI"}]}],"Total":1,"AggregateResults":null,"Errors":null}
the return data is the same in the load page or the datasource change :/
I haven't dealt with KendoUI, but I have worked with several other Telerik controls.
They've all required that the datasource be set to null, then set to the new value. If I skipped the setting to null, it wouldn't update.
I know I am new to the .net world, so there are limitations to what I know and understand. I am using Sitecore, and Sitecore generates the .aspx pages behind the scenes, so I have no access to the source, what I do have access to is the .ascx which is the sublayout ... so i tried to put some javascript onto the layout ... and I read that I am allowed to this with tags, but when I run the program now, it is not firing. Anything I am missing, please advise. Thank you for your assistance.
<!-- Custom Feedback Code -->
<script type="text/javascript">
function showModal() {
var url = document.URL;
var popUp = 'http://local.meau.com/components/supportcenter/feedback.aspx?value=';
var site = popUp + url;
var runpopUp = 50;
if (runpopUp >= Math.random() * 100) {
$(document).ready(function () {
$.fancybox({
'width': 500,
'height': '55%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
'href': site,
'showCloseButton': false,
'title': 'We Request your Feedback'
});
});
}
}
</script>
<!-- End of Custom Feedback Code -->
I would suggest to start by removing (commenting out) the randomization logic - to make sure that your code is working deterministically first. Next, what is done in your code - the anonymous function is added as $(document).ready event handler inside showModal function. Unless you call showModal before $(document).ready fires, your handler will never be executed. Therefore, #Maras's suggestion should work, assuming, of course, that jquery javascript is loaded into the page.