We Keep Coding

Javascript - JQuery - Kendo - Why is my function executing

Hi I'm kinda new to JS and I'm trying to figure out why i'm getting unexpected behavior.
I'm trying to define some functions and hook up some buttons but some events are firing on page load and I can't tell what determines if it will fire or not and more importantly how to stop it.
//this one does not execute on page load
var saveDataCallback = function(){
alert('Save Successful');
};
//this one executes on page load
var addFieldToForm = function(){
alert('wtf mate');
};
$(document).ready(function(){
//this one does not execute the alert when I load the page
$("#showMePOTATOSALAD").on('click', function (){ alert(JSON.stringify(formDataObj)) });
var dialog = $("#addToFormDialog");
//this one does execute the dialog open when I load the page
$("#addToForm").on('click', function(){ dialog.data("kendoDialog").open() });
}
this was the issue
dialog.kendoDialog({
title:'Add Field to Form',
modal:true,
width: 500,
height: 350,
content:"",
actions:[
{text: 'Cancel'},
{text: 'Add', action: addFieldToForm() }
]
});
Changed to
dialog.kendoDialog({
title:'Add Field to Form',
modal:true,
width: 500,
height: 350,
**visible: false,**
content:"",
actions:[
{text: 'Cancel'},
{text: 'Add', action: **addFieldToForm** }
]
});
Thanks in advance

As mentioned in the comment, your document ready code block is missing a close parenthesis...
Change the following--
$("#addToForm").on('click', function(){ dialog.data("kendoDialog").open() });
}
To:
$("#addToForm").on('click', function(){ dialog.data("kendoDialog").open() });
});

$(document).ready(function(){
//this one does not execute the alert when I load the page
$("#showMePOTATOSALAD").on('click', function (){ alert(JSON.stringify(formDataObj)) });
var dialog = $("#addToFormDialog");
//this one does execute the dialog open when I load the page
$("#addToForm").on('click', function(){ dialog.data("kendoDialog").open() });
}
it's normal, the alert will be displayed when YOU CLICK ON THE ELEMENT WITH THE ID=showMePOTATOSALAD and the dialog when YOU CLICK on THE ELEMENT WITH THE ID=addToForm.

Kendo - how to close modal window from view

I have a modal window that displays two text boxes (customer id and customer name). When the user clicks on 'save', I'd like to close the modal window. I tried using $('#NewCustomer').hide() but that doesn't seem to close the window. So how do I close a kendo window from a different function from my ViewModel? Any help would be appreciated.
Thanks!
JS
var viewModel = kendo.observable({
ShowNewCustomerForm: function () {
var newCustomerWindow = $('#NewCustomer').kendoWindow({
title: "Add New Customer",
modal: true,
width: 500,
height: 300
}).data("kendoWindow");
newCustomerWindow.center().open();
$('#AddNewCustomerBtn').hide();
},
SaveCustomer: function (e) {
// close #NewCustomer here
$('#NewCustomer').hide();
}....

Kendo Window widget exposes a lot of API. open() & close() methods are available for you to programmatically handle the window.
Here is a demo we have on Kendo Window API methods - http://demos.telerik.com/kendo-ui/window/api
Do take a look at how it has been done in the demo and you can follow the same procedure.

OK -- I was able to figure it out. This is the working code:
var viewModel = kendo.observable({
ShowNewCustomerForm: function () {
var newCustomerWindow = $('#NewCustomer').kendoWindow({
title: "Add New Customer",
modal: true,
width: 500,
height: 300
}).data("kendoWindow");
newCustomerWindow.center().open();
$('#AddNewCustomerBtn').hide();
},
SaveCustomer: function (e) {
// close #NewCustomer here
$("#NewCustomer").closest(".k-window-content").data("kendoWindow").close();
}

MVC4, Render Partial View in Dialog Box with jQuery, How to refresh

I have a partial view that is popping up in a dialog with the code below. However, after the user saves the partial view the data does not refresh in that partial view when I click the ActionLink again until I stop debugging and restart the app. However, the new record is in my databsae. The other issue is when I restart the app I cannot update the record because of the error below. What am I missing? Thanks.
An object with the same key already exists in the ObjectStateManager. The ObjectStateManager cannot track multiple objects with the same key.
The div tag in my View
<div id="assign-dialog"></div>
The ActionLink in the same view
#Html.ActionLink("Assign", "Edit", "Assignment", new { id = Model.InfoId}, new { #class = "assign-modal" })
The jQuery
$(function () {
$(function () {
$('#assign-dialog').dialog({
autoOpen: false,
width: 400,
height: 500,
resizable: true,
modal: true
});
$('.assign-modal').click(function () {
$('#assign-dialog').load(this.href, function () {
$(this).dialog('open');
});
return false;
});
});
The HTTP GET action
[HttpGet]
[Authorize(Roles="Admin")]
public ActionResult ViewAssignment(int id = 0)
{
RequestAssignment query = _assignmentRepository.GetCurrentAssignment(id);
return PartialView("_ViewAssignment", query)
}
UPDATE:
I originally followed the steps in javascript/jquery modal popup dialog MVC 4 / render partial view under the dynamic section of Jasen's answer, but did not know what to put in the "Client Partial, empty for now "
...okay so going off some other posts I have read this is what I was able to come up with, but nothing happens when I click my link.
View html
Assign
<div id="assign-modal">
</div>
jQuery
//Dialog Box for Assignments
$(".dialog-trigger").on("click", function(event) {
event.preventDefault();
var infoId= $(this).data("infoId");
$.ajax({
url: "RequestAssignment/Edit/" + infoId,
type: "GET"
})
.done(function(result) {
$("#assign-modal").html(result).dialog("open");
});
});

so after some long searching, I decided to use Ajax.ActionLink. I know there are better ways out there, but this one was working for me. I want to thank #MattBodily for all the help along the way.
#Ajax.ActionLink("Approve", "QuickAssign", "Assignment", new { id = Model.InfoId}, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, OnSuccess = "openDialog" })
then my javascript function
function openDialog() {
//set the diaglog properties
$("#result").dialog({
title: 'Assign',
width: 550,
height: 'auto',
modal: true
});
$("#result").dialog("open");
}

Kendo UI Window widget - Dynamic title using templates

Is it possible to have dynamic window titles using templates?
Something like this:
wnd = $("#details").kendoWindow({
title: #= ItemName #,
modal: true,
visible: false,
resizable: false,
width: 300}).data("kendoWindow");
I added ItemName in the title field merely to indicate the concept. Any idea?

You can do it with setOptions api method, something like:
// Setting some options
wnd.setOptions({
title: "dynamic title",
width: "60%"
});
First initialize your window with your code and on some events (button click may be), use window object to set its options.
If its not clear, lets play with example: I am setting the window title on kendo-grid custom command button click:
<div class="k-content">
<div id="noteswindow"></div>
</div>
<script>
$(document).ready(function () {
$("#noteswindow")
.kendoWindow({
actions: ["Refresh", "Maximize", "Minimize", "Close"],
visible: false
})
});
function onNotesClick(e) { // Custom button click
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
rData = dataItem;
// Using same window variable again and again for successive clicks with dynamic content
var nWin = $("#noteswindow").data("kendoWindow");
// Setting some options
nWin.setOptions({
title: "Notes on " + dataItem.AssetOrShotName,
width: "60%"
});
nWin.refresh({
url: "../Task/Notes",
data: { AssignId: rData.Id }
});
nWin.open().center();
}
</script>

This is easy way i have show event title in title header like that
API.get('/Scheduler/GetEventDetailById', detailParams).then(function (data) {
$('.k-window-title').text(data.EventTitle);
});

A working method to open a webpage in new window?

I have been trying to write a code in sencha touch, which has a button and when i click on that , it should open a webpage as a pop-up in a new window .
Window.open()-I cannot use this method because it doesn't work fine
in phones.Though I realise this is the easiest way to open a new
browser window.
document.location.href=url - This method opens the URL in the same
page , but I want it to be opened in a new window as pop-up.
Is there any other way to open a page in a new window when a user clicks a button, Below is my code
Ext.application({
name: 'Opening new page',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: false,
items: [
{
xtype: 'button',
text: 'click to open google',
ui: 'confirm',
handler: function() {
document.location.href=("http://www.google.com/");
}
}
]
});
}
});

Please try this code:
handler: function() {
var link = Ext.getDom('hidden_link');
link.href = 'http://www.google.com'/;
var clickevent = document.createEvent('Event');
clickevent.initEvent('click', true, false);
link.dispatchEvent(clickevent);
}

I don't know exactly how to do it in Ext.js, but I was basically thinking along the same lines as #bunlong-van. Create a anchor tag that targets a new window, add it to the page, and then click it.
This is how it could be done in jQuery:
$('button').bind('click',function(e){
var $me = $(this);
e.preventDefault();
e.stopPropagation();
$('<a />')
.attr('href', $me.data('href'))
.attr('target', '_blank')
.css({display:'none'})
.appendTo($('body'))
.get(0).click();
});
Full Sample: http://jsbin.com/adakur/edit

Hey #coding you can that is a Overlay is a type pop-up, try this into handler event,
var overlay = new Ext.Panel({
floating : true,
modal : true,
centered : true,
width : 500,
height : 500,
styleHtmlContent : true,
html: '<div><iframe style="width:100%;height:100%;" src="http://www.sencha.com/products/touch">Your device does not support iframes.</iframe></div>',
}).show('pop', true)
And please use your brain, I do not I can be doing your homework. I hope this helps. :) Ciao

Use window.open() in your handler as mentioned below:
handler: function() {
window.open("http://www.google.com/", "_blank");
}

Create a pop up window(a simple window) in your working page and make its visibility to false.. when you click on the button, change its visibility to true and give the focus to it..
also you can open anything in that popup window..
or you can use this jQuery code
$(document).ready(function() { tb_show(title, "testpage.aspx?id=" + url + "&TB_iframe=true&width=700&height=600", null); });
in this you can pass the parameters you want. this will open as a new popup window.