I just want to display following reviews which I got from my database on the Jquery UI dialog box on loading but it displays nothing:
{"results":[{"review_text":"good"},{"review_text":"not bad"},{"review_text":"great"}]}
Could you please check my code below and help me to find my mistake.
Here is my view:
<?php
$data = array(
'name' => $item_id,
'class' => 'all_reviews',
'content' => 'Reviews'
);
echo form_button($data);
?>
<div id="see_all_reviews">
<div id="load_reviews"></div>
</div>
Here is my JS file:
$(".all_reviews").click(function() {
var self = this;
var id = $(self).attr("name");
$.post('filter/get_reviews', { id: id }, function (data) {
var my_obj_review = data;
$.each(my_obj_review, function (i) {
var reviews_text = my_obj_review[i].review_text;
$("#load_reviews").text(reviews_text);
});
}, "json").error(function() { $( "#load_reviews" ).text(data.message);
});
$( "#see_all_reviews" ).dialog({
autoOpen: false,
title: "Reviews",
modal:true,
draggable:false,
width: 600,
height: 600,
close:function(){ $(this).dialog('destroy'); }
});
});
You primary issue is that your AJAX call is returning a data object not a data list. Replace:
var my_obj_review = data;
with:
var my_obj_review = data.results;
Additionally, this:
$(self).parent().find("#see_all_reviews").text(review_text);
can be replaced with this:
$("#see_all_reviews").text(review_text);
In either case, your each loop is going to replace that element with the last item in the list. Are you trying to append reviews to that div?
Finally, you may need to initialize your dialogue:
$("#see_all_reviews").dialog({
autoOpen: false,
show: "blind",
hide: "blind"
});
Here's your code refactored slightly:
$(document).ready(function() {
$(".all_reviews").click(function() {
var item_id = $(this).attr("name");
$.post('contr/get_reviews', { item_id: item_id }, function (data) {
$.each(data.results, function (n, result) {
$("#see_all_reviews").text(result.review_text);
});
// Above loop equivalent to:
$("#see_all_reviews").text(data.results[data.length-1].review_text);
}, "json")
.error(function(data) {
$("#see_all_reviews").text(data.message);
});
$("#see_all_reviews").dialog();
});
});
And here's a fully functioning fiddle: http://jsfiddle.net/klenwell/d7r7s/
Related
I´m using the jQuery UI tooltip plugin.
Now I want to change the <div class="ui-tooltip-content"> in <div class="ui-tooltip-content2"> with jQuery.
I´m using $('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content') inside the "each" function but it doesn´t show any effect. I don´t get an error in the console.
I´ve made a JSFiddle. Just inspect the tooltip and you will see that the class hasn´t changed.
Complete code:
$('*[data-id]').tooltip({
tooltipClass: "tooltipitem",
content: '<div class="loading">Laden...</p>',
hide: {
effect: "slide",
delay: "10000"
},
position: {
my: "left+153 top+20",
collision: "flipfit"
},
});
$('*[data-id]').each(function () {
let $tooltip = $(this);
let id = $tooltip.attr("data-id");
ajaxManager.add({
url: "https://xy.eu/datenbank/itemscript.php",
type: "GET",
cache: "true",
data: {
"var": id,
},
success: function (data) {
let $content = $(data);
let title = $content.siblings('[class^=item-titletl]').text()
let icon = $content.siblings('[class^=parent2]').html()
$tooltip.tooltip({
content: function () {
return [data];
},
});
$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');
$tooltip.attr("title", "=")
$("<img class='icon-small' src='https://xy.eu/images/icons/" + icon + "'/
>" + title + "</>").appendTo($tooltip);
}
});
});
});
The problem is that the tooltip appends when you hover over the element, that's why this code doesn't working, you element was not created yet, at that moment.
$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');
You can do it by adding this option, this will add additional class to ui-tooltip-content
classes: {
"ui-tooltip-content": "ui-tooltip-content2"
},
The full code will be
$tooltip.tooltip({
classes: {
"ui-tooltip-content": "ui-tooltip-content2"
},
content: function () {
return [data];
},
});
Remove this line:
$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');
You can check the docs here.
the problem is in your code you are trying to add and remove classes but the element is not present in DOM. I have modified your code
jQuery(document).ready(function ($) {
var ajaxManager = $.manageAjax.create('cacheQueue', {
queue: true,
cacheResponse: true
});
// Tooltip Script
$('*[data-id]').tooltip({
tooltipClass: "tooltipitem",
content: '<div class="loading">Laden...</p>',
hide: {
effect: "slide",
delay: "100000"
},
position: {
my: "left+153 top+20",
collision: "flipfit"
},
});
$('*[data-id]').each(function () {
let $tooltip = $(this);
let id = $tooltip.attr("data-id");
ajaxManager.add({
url: "https://elder-scrolls-online.eu/datenbank/itemscript.php",
type: "GET",
cache: "true",
data: {
"var": id,
},
success: function (data) {
let $content = $(data);
let title = $content.siblings('[class^=item-titletl]').text()
let icon = $content.siblings('[class^=parent2]').html()
$tooltip.tooltip({
content: function () {
return [data];
},
});
setTimeout(AdAndRemoveClass,500);
$tooltip.attr("title", "=")
console.log($tooltip)
$("<img class='icon-small' src='https://www.elder-scrolls-online.eu/images/icons/" + icon + "'/ >" + title + "</>").appendTo($tooltip);
}
});
});
});
function AdAndRemoveClass(){
var tool= $('.ui-tooltip-content');
if(tool.length ==0){
setTimeout(AdAndRemoveClass,500);
}
else{
console.log(tool)
tool.addClass('ui-tooltip-content2');
tool.removeClass('ui-tooltip-content');
}
}
check the working fiddle here
I'm trying to open a Kendo UI kendoWindow from within an MVC View. I also use a Partial View as the content of the kendoWindow. Moreover, I use the Kendo UI MVVM pattern to bind my elements.
First let me to show you my main View and my pop-up Partial View (kendoWindow).
The important part of my main View (Parent) is as follows:
#{
ViewBag.Title = "My Main View";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/ViewModel/main.js"></script>
<script src="~/Scripts/InitView/main.js"></script>
<script type="text/javascript">
var viewModel;
$(function () {
viewModel = initVm({
GetPartialContent_Url: '#Url.Action("GetPartialContent")'
});
initView(viewModel);
kendo.bind($("#container"), viewModel);
viewModel.Onread();
});
</script>
<div id="container">
<div id="Window-box"></div>
// Some other elements like the button which opens the kendoWindow are defined here.
</div>
My initVm is as follows:
function initVm(arg) {
var vm = kendo.observable({
onOpenKendoWindow: function () {
$("#Window-box").kendoWindow({
iframe: true,
content: arg.GetPartialContent_Url,
title: 'Some Title',
width: 500,
height: 'auto',
close: function (e) {
//Is it possible to get some data from kendoWindow (Partial View) here?
}
});
var dialog = $("#Window-box").data("kendoWindow");
dialog.maximize();
}
});
return vm;
}
Until now, I showed you the important parts of my main View. Now I want to show you the important parts of my kendoWindow (Partial View).
My Partial View which is used as the content of the kendoWindow is as follows:
#{
Layout = "~/Views/Shared/_PartialLayout.cshtml";
}
<script src="~/Scripts/ViewModel/partial.js"></script>
<script src="~/Scripts/InitView/partial.js"></script>
<script type="text/javascript">
var partialVM;
$(function () {
partialVM = initPartialVm({
GetTransactions_Url: '#Url.Action("GetTransactions", "Account")'
});
initPartialView(partialVM);
kendo.bind($("#container"), partialVM);
});
</script>
<div id="container">
<div id="gridTransactions"></div>
</div>
And my initPartialVm is as follows:
function initPartialVm(arg) {
var vm = kendo.observable({
onSelectTransaction: function () {
// KendoWindow should be closed here and passing some data from here to main View (close event of kendowWindow);
}
});
return vm;
}
Note: The 'gridTransactions' is a Kendo UI GridView (inside of kendoWindow - Partial View). Each rows of this grid has a select button and the 'onSelectTransaction' function is fired when each of these select buttons is clicked.
And finally, the main question is that, how can I close the kendowWindow by clicking each select button of the GridView and pass some data to the close event of the kendowWindow?
Yes it is possible. I found it much easier and a bit cleaner to wrap all the dialog functionality up into a dialog controller and extend it a bit in javascript.
Once the .js part is done it makes for a cleaner use. If you don't prefer to do this then look for the findDialog function below (it shows how get a handle to a dialog and call the close method on it).
As far as sending data on close, It would be easy to add a callback in the dialog to be called when the dialog is closed, supplied on invocation, then add a property in the widget to set the custom data to pass through in the dialogs close() back to the consumers event handler.
Also, please note I am no javascript expert, it took me longer than I would like to admit to work the bugs out of this but it has held up solidly for about 6 years. Feel free to offer suggestions.
In Bundle Config:
bundles.Add(new ScriptBundle("~/bundles/myCustom").Include(
...
"~/Scripts/MyCustom/MyCustomDialogs.js",
...
));
Where you register scripts:
#Scripts.Render("~/bundles/MyCustom")
In your index view or parent view :
<div id="_applicationDialogs"></div>
<div id="_mainAppContentLoadsHere"></div>
var _mainDialogController;
$(document).ready(function () {
...
_mainDialogController = $("#_applicationDialogs").kendoMyCustomDialogController().data("kendoMyCustomDialogController");
...
}
Where you want to invoke the dialog: SomePartial
function lnkDetailsOnClick(someID) {
_mainDialogController.createDialog({
dialogId: "frmUserDetail_" + someID,
modal: false,
title:"Daily Details",
pin: true,
height: 575,
width: 1025,
actions: ["Refresh", "Maximize", "Minimize", "Pin", "Close"],
url: '#Url.Action("SomePartialView", "SomeController")',
data:{
someID: someID,
dialogName:'frmUserDetail_'+ someID //NOTE : This will come back in the invoked partial as Model.DialogName so it can be dismissed with ease.
}
});
}
Dismissing the Dialog Inside of SomePartial :
#model MyModelThatHasTheDialogHandle
function btnClose_Click() {
var dialog = _mainDialogController.findDialog('#Model.DialogName');
dialog.close();
}
Now for the long .js file :
(function ($) {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget;
var MyCustomDialogController = Widget.extend({
init: function (element, options) {
var that = this;
Widget.fn.init.call(this, element, options);
that._create();
},
onResize: function () { },
options: {
modal: true,
dialogId: "dlgController1",
url: "",
data: null,
pin: false,
width: 300,
height: 300,
actions:["Close"],
title: "Information",
disableMaximize:false,
name: "MyCustomDialogController",
autosize: false,
onDialogClosed: null,
hideOnClose: false
},
_create: function () {
var that = this;
},
createDialog: function (options) {
var that = this;
var wrapperName = options.dialogId + "_wrapper";
that.element.append("<div id='" + wrapperName + "'></div>");
var wrapperElement = that.element.find("#" + wrapperName);
wrapperElement.kendo_MyCustomDialog(options);
},
findDialog: function (dialogId) {
that = this;
var wrapperName = dialogId+"_wrapper";
var dialog = $("#" + wrapperName);
//var dialog = wrapper.find("#" + dialogId);
return dialog.data("kendo_MyCustomDialog");
},
forceCloseAllDialogs: function ()
{
that = this;
$('.MyCustom-window').each(function () {
$(this).data("kendoWindow").close();
});
},
isModalWindowActive: function ()
{
that = this;
return $('.MyCustom-window-modal').length > 0;
},
currentModalWindow: function () {
that = this;
return that.findDialog($('.MyCustom-window-modal')[0].id);
}
});
ui.plugin(MyCustomDialogController);
})(jQuery);
(function ($) {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget;
var _MyCustomDialog = Widget.extend({
init: function (element, options) {
var that = this;
Widget.fn.init.call(this, element, options);
that._create();
},
onResize: function () { },
options: {
modal: true,
dialogId: "frmMain",
url: "",
data: null,
pin: false,
width: 300,
height: 300,
actions: ["Close"],
title: "Information",
name: "_MyCustomDialog",
disableMaximize:false,
autosize: false,
onDialogClosed: null,
hideOnClose:false
},
_create: function () {
var that = this;
that.isModalWindowActive = true;
that.modifiedData = false;
that.frmElement = $("#" + that.options.dialogId).data("kendoWindow");
if (that.frmElement == null) {
var template ;
if(that.options.modal)
template = kendo.template(that._templates.divModalFormWrapper);
else
template = kendo.template(that._templates.divFormWrapper);
that.wrapper = $(template(that.options));
that.element.append(that.wrapper);
if (that.options.autosize)
{
that.options.height =null;
that.options.width = null;
}
that.frmElement = that.wrapper.kendoWindow({
title: "Loading...",
modal: that.options.modal,
visible: that.options.autosize,
draggable: true,
resizeable:!that.options.disableMaximize,
width: that.options.width,
height: that.options.height,
resizeable: true,
pinned:that.options.pin,
resize: function () {
that.onResize();
},
content: {
url: that.options.url,
data: that.options.data,
type: "POST",
datatype: "json",
traditional: true
},
refresh: function () {
that.frmElement.title(that.options.title);
if (that.options.autosize) {
that.frmElement.center();
}
},
actions: that.options.actions,
close: function (e) {
that.IsModalWindowActive = false;
if (that.options.hideOnClose == false) {
if (that.frmElement != null)
that.frmElement.destroy();
this.destroy();
that.wrapper.remove("#" + that.options.dialogId);
that.wrapper.empty();
}
if (that.options.onDialogClosed) {
that.options.onDialogClosed(that.modifiedData);
}
}
}).data("kendoWindow");
}
if (that.options.autosize)
that.frmElement.center().open();
else if (that.options.hideOnClose == true)
that.frmElement.open();
else
that.frmElement.center().open();
if (that.options.pin)
that.frmElement.pin();
},
setModifiedFlag:function(modified)
{
var that = this;
that.modifiedData = modified;
},
close: function () {
var that = this;
that.frmElement.close();
},
show: function () {
var that = this;
that.wrapper.show();
that.frmElement.open();
},
setTitle: function (title) {
var that = this;
that.frmElement.title(title);
},
height: function () {
var that = this;
var wtfHeight = that.frmElement.options.height;
if (isNaN(wtfHeight)) {
if (wtfHeight.indexOf("px") >= 0)
wtfHeight = wtfHeight.replace("px", "");
}
return wtfHeight;
},
_templates: {
divModalFormWrapper: "<div id='#=dialogId#' class='MyCustom-window MyCustom-window-modal'></div>",
divFormWrapper: "<div id='#=dialogId#' class='MyCustom-window'></div>"
}
});
// add the widget to the ui namespace so it's available
ui.plugin(_MyCustomDialog);
})(jQuery);
I have problems with a Jquery function.
I get the jquery library from google.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
First, I put the following the code on a .js
(function($){
jQuery.fn.jConfirmAction = function (options) {
var theOptions = jQuery.extend ({
question: "Are You Sure ?",
yesAnswer: "Yes",
cancelAnswer: "Cancel"
}, options);
return this.each (function () {
$(this).bind('click', function(e) {
var submitBtn = $(this);
if($(this).attr("jconfirmed")){
submitBtn.removeAttr("jconfirmed");
}else{
e.preventDefault();
thisHref = $(this).attr('href');
var btns = {};
btns[theOptions.yesAnswer]=function() {
$( this ).dialog( "close" );
if (thisHref!=null){
window.location = thisHref;
}else{
submitBtn.attr("jconfirmed", true);
submitBtn.click();
}
};
btns[theOptions.cancelAnswer]=function() {
$( this ).dialog( "close" );
submitBtn.removeAttr("jconfirmed");
};
var content='<p>'+theOptions.question+'</p>';
if(theOptions.checkboxText!=undefined){
content='<p>'+'<input type="checkbox" id="cbox">'+theOptions.checkboxText+'<br/><br/>'+theOptions.question+'</p>';
}
$('#dialog-confirm').html(content);
$('#cbox').click(function() {
/*
if($('#cbox').attr("checked")){
$('.ui-dialog-buttonset button:first-child').show();
}else{
$('.ui-dialog-buttonset button:first-child').hide();
}
*/
});
$('#dialog-confirm').dialog({
resizable: false,
modal: true,
buttons: btns,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
draggable: false,
dialogClass: 'main-dialog-class'
});
}
});
});
};
})(jQuery);
And, in a jsp file call the function.
<script type="text/javascript">
$(document).ready(function() {
$('.confirm').jConfirmAction();
});
</script>
But i have the following error in console:
Uncaught TypeError: Object [object Object] has no method 'jConfirmAction'
I tried to fix this by putting the function code in the same jsp, between <script type="text/javascript"></script>. That works for some pages, but in others pages have the same error. Is there a way to call the function only if jquery has been loaded?
Wrap your entire JS code with document.ready()
$(document).ready(function () {
(function ($) {
jQuery.fn.jConfirmAction = function (options) {
var theOptions = jQuery.extend({
question: "Are You Sure ?",
yesAnswer: "Yes",
cancelAnswer: "Cancel"
}, options);
return this.each(function () {
$(this).bind('click', function (e) {
var submitBtn = $(this);
if ($(this).attr("jconfirmed")) {
submitBtn.removeAttr("jconfirmed");
} else {
e.preventDefault();
thisHref = $(this).attr('href');
var btns = {};
btns[theOptions.yesAnswer] = function () {
$(this).dialog("close");
if (thisHref !== null) {
window.location = thisHref;
} else {
submitBtn.attr("jconfirmed", true);
submitBtn.click();
}
};
btns[theOptions.cancelAnswer] = function () {
$(this).dialog("close");
submitBtn.removeAttr("jconfirmed");
};
var content = '<p>' + theOptions.question + '</p>';
if (theOptions.checkboxText !== undefined) {
content = '<p>' + '<input type="checkbox" id="cbox">' + theOptions.checkboxText + '<br/><br/>' + theOptions.question + '</p>';
}
$('#dialog-confirm').html(content);
$('#cbox').click(function () {
/*
if($('#cbox').attr("checked")){
$('.ui-dialog-buttonset button:first-child').show();
}else{
$('.ui-dialog-buttonset button:first-child').hide();
}
*/
});
$('#dialog-confirm').dialog({
resizable: false,
modal: true,
buttons: btns,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
draggable: false,
dialogClass: 'main-dialog-class'
});
}
});
});
};
})(jQuery);
});
Include all your JS files at the end of the file and try again, and one side note ? use '!==' to compare variables with 'null' and 'undefined'
I have an MVC view with a few dropdown lists. There is some custom validation on there that under certain conditions will show an action link by the side of the drop down list. These action links will pop up a modal window with information related to the choice made in the dropdown list.
My problem is that I can seem to see how to take the value chosen from the dropdown and get it in to my ajax request!!
Here is my code: (dropdown)
<div id="holderlist">
#Html.DropDownListFor(i => i.holderid, (SelectList)ViewData["holdersList"], "", new { #class = "chosenlist" })
</div>
(action link)
<div id="add" style="display:none;">
#Html.ActionLink("Actions", "existingOfficers", "Roles",
new { id = ?????<how do I get DDL chosen ID here> },
new { #class = "openDialog", dialog_id = "productDetail", dialog_title = "Workflow Centre" })
</div>
(ajax request)
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: 706,
height: 300
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
What I cant do is get the ID set to the ID of the value chosen in the DDL. The DDL value isn't at this point stored in the database as this is essentially a new input form.
Any help would be greatly appreciated :-)
jQuery(function($) {
$('.helpButton').each(function() {
$.data(this, 'dialog',
$(this).next('.helpDialog').dialog({
autoOpen: false,
modal: true,
title: 'Info',
width: 600,
height: 400,
position: [200,0],
draggable: false
})
);
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
});
You can test here
I have a jQueryUI Dialog loading up a form from an external url, the form renders fine and posts ok but neither the save or cancel buttons seem to close the form yet the dialog close icon does it's job just fine.
Here is my script that spawns the dialog and should handle the buttons:
$(function () {
$('a.modal').on('click', function() {
var href = $(this).attr('href');
$("#modalAdd").html("")
.dialog({
title: $(this).attr("title"),
width: 400,
height: 300,
buttons: {
"Save": function() {
$.post(href,
$("form").serialize(),
function() {
$(this).dialog("close");
});
},
Cancel: function() {
$(this).dialog("close");
}
}
})
.load(href, function() {
$(this).dialog("open");
});
return false;
});
});
The final solution was to declare the variable outside of the scope of the dialog declaration as follows:
$(function () {
$('a.modal').on('click', function() {
var href = $(this).attr('href');
var modal = $("#modalAdd");
modal.html("")
.dialog({
title: $(this).attr("title"),
width: 400,
height: 300,
buttons: {
"Save": function() {
$.post(href,
$("form").serialize(),
function() {
modal.dialog("close");
});
},
Cancel: function() {
modal.dialog("close");
}
}
})
.load(href, function() {
**modal**.dialog("open");
});
return false;
});
});
It's because of variable scope, as soon as you start the call back function for the $.post call, this is no longer the dialog box. Try calling $("#modalAdd").dialog('close'); instead.
If you don't mind expanding your $.post() and $.load() calls, you can set the context of this to a certain element using the full $.ajax() method. See the "context" option in the docs.
this is changed in the ajax callback function, you need to cache to a local variable.
"Save": function () {
var $this = $(this);
$.post(href, $("form").serialize(), function () {
$this.dialog("close");
});
},