I have modified original modal.js script to support ajax content as well, and added a new Behavior called "ajax" here is my piece of code:
ajax: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
var $content = $(this).find('.content');
$.get("contentData.php", function(data) {
$content.html(data);
});
And I call it like:
$('body').on('click', '.domOdal', function() {
$('.ui.modal')
.modal({
observeChanges: true
}).modal('ajax')
});
The above code works perfect and loads content correclty, but I would like to extended a bit more, so I can include additional info such as custom url, dataType, etc pretty much all the ajax options, and I would like to do that from initialization part like:
$('body').on('click', '.domOdal', function() {
$('.ui.modal')
.modal({
observeChanges: true
}).modal('ajax', {"id":5}, dataType:"json", "url": http://myurl.php" etc...)
});
A bit late but this it what's working for me:
$('body').on('click', '.domOdal', function (e) {
e.preventDefault();
$('.ui.modal')
.modal({
blurring: true,
observeChanges: true,
transition: 'scale',
onVisible: function (callback) {
callback = $.isFunction(callback) ? callback : function () { };
var $content = $(this).find('.content');
$.get("contentData.php", function (data) {
$content.html(data);
});
}
}).modal('show')
});
And in your html where the modl is called:
<div class="ui modal">
<i class="close icon"></i>
<div class="content">
</div>
</div>
How about doing it like this:
$('body').on('click', '.domOdal', function() {
$.ajax({
url: "specs.html",
type: 'POST',
dataType: 'xml',
dataType: 'html'
}).done(function(response) {
console.log(response)
$(response).modal();
});
});
Related
I am trying to migrate a portlet from Liferay 6.1 to 6.2 and forced to adapt the Alloy code to 2.5 version and the aui-pagination part:
pagination = new A.Pagination({
circular: false,
containers: '.pagination',
on: {
changeRequest: function(event) {
var newState = event.state;
this.setState(newState);
}
},
total: 10,
});
But whenever I call the changeRequest() of the pagination instance from other functions I get errors:
this._pagination.changeRequest();
Is there any solution for this?
Your question is a little strange. How would you call changeRequest() without passing an event in your example? And why set the state from the event when that's already happening automatically?
To answer the more generic question that you are asking, there are several potential solutions to calling the changeRequest() function programmatically:
Define a named function and set it to be the changeRequest() function:
function changeRequest() {
console.log('changeRequest function called!');
}
var pagination = new Y.Pagination({ /* ...your code here... */ });
pagination.on('changeRequest', changeRequest);
// OR if you don't need to access the pagination component
// in your changeRequest() method
new Y.Pagination({
/* ...your code here... */
on: {
changeRequest: changeRequest
}
});
This method will only work if you do not need to use the event parameter, or if you only use the event parameter when the actual event occurs, or if you construct the event parameter yourself.
Runnable example using your code:
YUI().use('aui-pagination', function(Y) {
var pagination = new Y.Pagination({
circular: false,
containers: '.pagination',
total: 10,
});
function changeRequest(event) {
if (event) {
alert('changeRequest called with event');
var newState = event.state;
pagination.setState(newState);
} else {
alert('changeRequest called without event');
}
}
pagination.after('changeRequest', changeRequest);
pagination.render();
Y.one('#button').on('click', function() {
changeRequest();
});
});
<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<br />
<button id="button">call <code>changeRequest()</code></button>
Call pagination.next() or pagination.prev():
YUI().use('aui-pagination', function(Y) {
// ...your code here...
pagination.next();
});
Runnable example using your code:
YUI().use('aui-pagination', function(Y) {
var pagination = new Y.Pagination({
circular: false,
containers: '.pagination',
total: 10,
on: {
changeRequest: function(event) {
alert('changeRequest called with event');
var newState = event.state;
pagination.setState(newState);
}
}
}).render();
Y.one('#button').on('click', function() {
pagination.next();
});
});
<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<br />
<button id="button">call <code>changeRequest()</code></button>
Simulate a click event on one of the pagination items:
YUI().use('aui-pagination', 'node-event-simulate', function(Y) {
// ...your code here...
pagination.getItem(1).simulate('click');
});
Runnable example using your code:
YUI().use('aui-pagination', 'node-event-simulate', function(Y) {
var pagination = new Y.Pagination({
circular: false,
containers: '.pagination',
total: 10,
on: {
changeRequest: function(event) {
alert('changeRequest called with event');
var newState = event.state;
pagination.setState(newState);
}
}
}).render();
Y.one('#button').on('click', function() {
pagination.getItem(1).simulate('click');
});
});
<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<br />
<button id="button">call <code>changeRequest()</code></button>
I'm having an issue with the jquery function submit for a form :
$(document).ready(function () {
$('#message').keydown(function(e) {
if(e.which == 13 && !e.shiftKey) {
$('#edit_message_11').submit(function() {
alert("HELLO2");
});
return false;
}
});
});
<form id="edit_message_11" class="edit_message" method="post" action="/message/11" accept-charset="UTF-8">
<textarea id="message" class="form-control edit_message_form" name="message">
Hello
</textarea>
http://jsfiddle.net/978QC/
When I do the following for my form : $('#edit_message_11').submit(function() { ... }); it doesn't trigger the submit.
However, If I do $('#edit_message_11').submit(); it does trigger the submit.
The reason why I need to do $('#edit_message_11').submit(function() { ... }); is because I want to do an ajax submit.
Anyone has a clue?
Thanks!
I don't believe it will work the way you are trying to do it. When it's inside the submit function, the alert will never fire until it gets a response back from POST. Which means you need a response from your form processing script.
Your AJAX call doesn't need to be inside the submit function, it just needs to be inside the event.
$(document).ready(function () {
$('#selfie_message').keydown(function(e) {
if(e.which == 13 && !e.shiftKey) {
$('#edit_selfie_11').submit();
$.ajax({
type: "POST",
url: "/selfies/11",
data: $("#edit_selfie_11").serialize()
});
}
});
});
If you need something to happen on success, you would do it like this.
$(document).ready(function () {
$('#selfie_message').keydown(function(e) {
if(e.which == 13 && !e.shiftKey) {
$('#edit_selfie_11').submit();
$.ajax({
type: "POST",
url: "/selfies/11",
data: $("#edit_selfie_11").serialize(),
success: function(response){
//your response code here//
}
});
}
});
});
I've worked on this but couldn't fully figure out.
Basically, what I need is to upload 2 or more files separately (only on demand one by one, not all files at once) using Ajax upload. Currently, I have 2 file inputs but somehow, the JavaScript code always uploads the first file input (the one inside "formContentProperty").
Here is my HTML code:
<div>
<form enctype="multipart/form-data" id="formContentProperty">
<input id="fileContentProperty" type="file" name="fileContentProperty" />
<a id="uploadbuttonContentProperty" href="javascript:void(0)">
<span>Upload 1</span>
</a>
</form>
<progress></progress>
</div>
<div>
<form enctype="multipart/form-data" id="formContentPreviewImage">
<input id="fileContentPreviewImage" type="file" name="fileContentPreviewImage"/>
<a id="uploadbuttonContentPreviewImage" href="javascript:void(0)">
<span>Upload 2</span>
</a>
</form>
<progress></progress>
</div>
Here is my JavaScript code:
$('#uploadbuttonContentProperty').click(function () {
return UpdoadFile('formContentProperty', 'divUploadContentPropertyResultMessage');
});
$('#uploadbuttonContentPreviewImage').click(function () {
return UpdoadFile('formContentPreviewImage', 'divUploadContentPreviewImageResultMessage');
});
function UpdoadFile(formElementId, divMessageElementId) {
var formData = new FormData($('form')[0]);
$.ajax({
url : '<%= base.AjaxUploadHandlerPath %>', //Server script to process data
type : 'POST',
xhr : function() { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // Check if upload property exists
myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
}
return myXhr;
},
//beforeSend: beforeSendHandler,
success : function(response) {
var obj = $.parseJSON(response);
$('#' + divMessageElementId).html(obj.ResultMessage);
},
//error : errorHandler,
data : formData,
//Options to tell jQuery not to process data or worry about content-type.
cache : false,
contentType : false,
processData : false
});
};
function progressHandlingFunction(e){
if(e.lengthComputable)
$('progressContentProperty').attr({ value: e.loaded, max: e.total });
}
I'd really appreciate any help.
To upload files using ajax file upload
<script>
function uploadFiles()
{
var files = $('#previewFile')[0].files;
var totalFiles = files.length
for(var i=0; i < totalFiles; i++)
{
var formData = new FormData();
formData.append("previewFile",files[i]);
doAjaxFileUpload("/storeTempFile.do", formData,function(data)
{
data = eval(data);
if (data.result=="success")
{
alert("File uploaded successfully");
}
else
{
alert("Error occured : "+data);
}
},
function(data)
{
alert("Error occured : "+data);
});
}
}
function doAjaxFileUpload(actionURL,params,callbackSuccessFunction,callbackFailureFunction)
{
$.ajax(
{
url: actionURL,
type: "POST",
data: params,
processData: false,
contentType: false,
error: callbackFailureFunction,
success : callbackSuccessFunction
});
}
</script>
I am trying to pass the object myclass to the view page, the issue I am facing is null object is being returned back to the controller. Any pointers ?
Below is the code in my ascx page
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<myclass>" %>
<div class="upModel" style="display:none">
<%= Model%>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#load").click(function () {
try {
$.ajax({
type: "POST",
url: "Loadmyaction",
data: $("#upModel").serialize(),
contentType: "application/json; charset=utf-8",
success: function(data) {
alert(data);
},
error: function(result) { alert("Error" + result); }
});
}
catch (err) {
alert(err.description);
}
});
</script>
**On controller, this is my method**
public string Loadmyaction(string obj)
{
string str = "";
return str;
}
Here obj is getting null from the view. Why is that no data is being passed back to the controller ?
Are you sure it's actually hitting your method?
Your jquery should look like this:
$.ajax({
type: "POST",
url: "<%=Url.Action("Loadmyaction") %>",
data: $("#upModel").serialize(),
dataType: "json",
success: function(data) {
alert(data);
},
error: function(result) {
alert("Error" + result);
}
});
Try changing your parameter type to myClass, whatever it might be.
[HttpPost]
public JsonResult LoadMyAction(MyClass model)
{
return Json("someString");
}
I am currently having problem in using the jQuery API for
TextboxList
what i want is that to access the selected value in the Json array form, now the documentation suggest to use:
$('#form_tags_input').textboxlist();
but when i use it in the jQuery function on button click to get values using [getValues]
method it said undefined.
here is the javascript:
<script type="text/javascript">
$(function () {
// Standard initialization
var t = new $.TextboxList('#SentTo', { unique: true, plugins: { autocomplete: { minlength: 2, onlyFromValues: true}} });
//t.addEvent('bitBoxAdd', ContactAdded);
//t.addEvent('bitBoxRemove', ContactRemoved);
t.getContainer().addClass('textboxlist-loading');
$.ajax({
url: '/Home/GetContacts',
dataType: 'json',
success: function (r) {
t.plugins['autocomplete'].setValues(r);
t.getContainer().removeClass('textboxlist-loading');
}
});
});
function GetValues() {
var tblist = $('#SentTo').textboxlist();
alert(tblist.getValues());
return false;
}
function ContactAdded(e) {
//alert(e);
//GetValues();
return false;
}
function ContactRemoved(e) {
//alert(e);
}
i am using GetValues() function on button click to getvalues.
A help would be much appreciated.
Thanks.
Try to made TextboxLists "t" variable global
The changed code is:
$(function () {
// Standard initialization
t = new $.TextboxList('#SentTo', { unique: true, plugins: { autocomplete: { minlength: 2, onlyFromValues: true}} });
//t.addEvent('bitBoxAdd', ContactAdded);
//t.addEvent('bitBoxRemove', ContactRemoved);
t.getContainer().addClass('textboxlist-loading');
$.ajax({
url: '/Home/GetContacts',
dataType: 'json',
success: function (r) {
t.plugins['autocomplete'].setValues(r);
t.getContainer().removeClass('textboxlist-loading');
}
});
});
function GetValues() {
alert(t.getValues());
return false;
}