I'm trying to pass object to jQuery dialog.
code;
var arr = new Array(ResultList.length);
for(var i=0; i<ResultList.length;i++){
arr[i] = ResultList[i];
}
$.ajax({
url: 'plz.do',
type: 'POST',
data:
{
"Comment" : comment,
"Index" : index,
},
success:function(data) {
..........
}
});
ResultList
ResultList = [{"key1":"value1","key2":"value2"},{"key3":"value3","key4":"value4"}....]
This code can pass variable to jQuery dialog but I failed to pass object to jQuery dialog.
Related
After completing the registration form, I want you to be sent a message saying "Your message is being sent" and then be directed to the thank you page.
But I couldn't because I don't have much js and php knowledge.
PHP MAILER Version: Latest Version
Resigtration.html JS Code
<script type="text/javascript">
function send_special_order() {
var data1 = $('#fname').val();
var data2 = $('#lname').val();
var data3 = $('#dob').val();
var data4 = $('#gender').val();
var data5 = $('#veliad').val();
var data6 = $('#vsoyad').val();
var data7 = $('#phone').val();
var data8 = $('#email').val();
var data9 = $('#adres').val();
var data10 = $('#Location').val();
$.ajax({
type: "POST",
url: "registration.php",
dataType : "json",
data: ( {"fname" : data1, "lname" : data2, "dob" : data3,"gender" : data4,"veliad" : data5,"vsoyad" : data6,"phone" : data7,"email" : data8,"adres" : data9,"Location" : data10} ) ,
success: function() {},
complete: function() {
$('#feedback').append('<p>Bize mesaj gönderdiğiniz için teşekkür ederiz. Uzmanlarımız en kısa sürede sizinle iletişime geçecektir.</p>');
$('#contact-form').slideUp();
}
});
}
$('#contact-form').submit(function() {
send_special_order();
return false;
});
</script>
<script type="text/javascript">
function checkForm(form) // Submit button clicked
{
//
// check form input values
//
form.myButton.disabled = true;
form.myButton.value = "Gönderiliyor...";
return true;
}
function resetForm(form) // Reset button clicked
{
form.myButton.disabled = false;
form.myButton.value = "Submit";
}
</script>
Registration.php Page code
if(!$mail->Send()){
echo "Mesaj hatası: ".$mail->ErrorInfo;
} else {
echo "Mesaj Gönderildi";
}
?>
You will need to search some knowledge about it.
To explain you a bit :
in your $.ajax() you will make a POST Request POST AND GET REQUEST
in this request you have a success: function() {}
this "success" function will be called once your request is success.
So in this function you can implement what you want to do next.
A basic way of prompting a message using alert()
and to redirect your user :
you can use window.location to the desire url
For example i take only your Ajax sample :
$.ajax({
type: "POST",
url: "registration.php",
dataType : "json",
data: ( {"fname" : data1, "lname" : data2, "dob" : data3,"gender" : data4,"veliad" : data5,"vsoyad" : data6,"phone" : data7,"email" : data8,"adres" : data9,"Location" : data10} ) ,
success: function() {
alert("This is a success");
window.location.replace("http://yourwebsite/thankspage");
},
complete: function() {
$('#feedback').append('<p>Bize mesaj gönderdiğiniz için teşekkür ederiz. Uzmanlarımız en kısa sürede sizinle iletişime geçecektir.</p>');
$('#contact-form').slideUp();
}
});
I solved my problem with the following code.
$.ajax({
type: "POST",
url: "registration.php",
dataType : "json",
data: ( {"fname" : data1, "lname" : data2, "dob" : data3,"gender" : data4,"veliad" : data5,"vsoyad" : data6,"phone" : data7,"email" : data8,"adres" : data9,"Location" : data10} ) ,
success: function (form) { },
complete: function() {
$('#feedback').append('<p>Bize mesaj gönderdiğiniz için teşekkür ederiz. Uzmanlarımız en kısa sürede sizinle iletişime geçecektir.</p>');
$('#contact-form').slideUp();
window.location.replace("/tesekkurler.html");
}
});
}
$('#contact-form').submit(function() {
send_special_order();
return false;
});
</script>
I am a beginner in asp.net MVC
I have tblBlock,tblFloor,tblRoom table in my database. I want to display all these in a single page like when I click Block number it should show the list of the floor and when I click on floor number it should show the number of rooms. how to do this within a single page in asp.net MVC.
This my view code
function GetFloors() {
$("#tblFloor tbody tr").remove();
console.log("Hello Javascript");
$.ajax({
type: "GET",
//url: "/RoomBooking/GetFloors",
url: '#Url.Action("GetFloors","RoomBooking")',
dataType: "json",
//cache: false,
async: "false",
contenttype:"charset=utf-8",
success: function (data) {
$.each(data, function (i, item) {
var rows = ""
+ ""
+ ' tblFloor ' + item.Floor_No + ""
+ "";
$('#tblFloor tbody').append(rows);
});
},
});
//Prevent default behavior
return false;
}
This is my controller
[HttpGet]
public JsonResult GetFloors()
{
List<tblFloor> floors = new List<tblFloor>();
floors = BlockRepsitory.GetFloors(1).ToList();
return Json(floors, JsonRequestBehavior.AllowGet);
}
Finally, I got a solution to this problem below is code for that solution:
<script>
$(document).ready(function () {
loadData();
});
function loadData() {
$.ajax({
url: "/PeopleBooking/Blocklist",
type: "GET",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
var html = '';
$.each(result, function (key, item) {
html += '<div class="col-md-3 col-lg-3 col-xl-2 "><section class="panel panel-featured-left panel-featured-primary "><div class="panel-body zoom"><div class="widget-summary"><div class="widget-summary-col widget-summary-col-icon"><div class="summary-icon bg-white"><img src="/assets/images/RoomImg/block.png" width = "150" height = "150" class="img-circle img-responsive"/></div></div><div class="widget-summary-col"><div class="summary"><h4 class="title">' + item.Block_name + '</h4><div class="info"><strong class="amount">' + item.Block_No + '</strong></div></div></div></div></div></div></section></div>';
});
$('#yes').html(html);
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
}
</script>
i have a view with 3 combo boxes that get their options from a database. when an option in one of them is selected, the others may have to be filtered. im making the call to my controller with ajax:
$(".dropFilter").on('change', function () {
var data = {
'EventEmitter': $(this).attr("id"),
'SelectedValue': $(this).val()
}
$.ajax({
type: 'POST',
url: '../MyController/FilterCombos',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data),
success: function (msg) {
console.log(msg)
},
fail: function (msg) {
console.log(msg)
},
});
});
the controller method being called is the following:
[HttpPost]
public IActionResult FilterCombos([FromBody]FilterComboRequest fcr)
{
switch (fcr.EventEmitter)
{
case "combo1-dropdown":
return ViewComponent("MyViewComponent", new
{
firstFilter = fcr.SelectedValue,
secondFilter = 0,
thirdFilter = fcr.SelectedValue
});
case "combo2-dropdown":
return ViewComponent("MyViewComponent", new
{
firstFilter = 0,
secondFilter = fcr.SelectedValue,
thirdFilter = 0
});
}
return ViewComponent("MyViewComponent", new
{
firstFilter = 0,
secondFilter = 0,
thirdFilter = 0
});
}
my viewcomponent invokeAsync method is the following:
public async Task<IViewComponentResult> InvokeAsync(int firstFilter,int secondFilter,int thirdFilter)
{
var mOpciones = new MOpciones();
var lOpciones = new LOpciones(_config);
lOpciones.fill(mOpciones,firstFilter,secondFilter,thirdFilter);
return View(mOpciones);
}
the combos are filled like so:
#Html.DropDownList("combo1",
new SelectList(Model.First,"Id","Nombre"),
"",
new { #class = "col-6 form-control form-control-lg",
#id="combo1-dropdown" })
when debugging, i see that mOpciones is being filled correctly in InvokeAsync, and Model.First has the right options in Default.cshtml, but the view on the browser never changes. what am i doing wrong?
Feel drop-down values can be updated within Ajax call method in JS.
Example:
success: function (data) {
$.each(data, function (index, value) {
$("#Dropdown").append('<option value="'
+ value.Value + '">'
+ value.Value + '</option>');
});
In Asp.Net MVC, you can easily return a partial view by doing the following:
return PartialView("ModelName", Model);
How is this done on a RazorPage ViewModel Handler?
I figured this out. It is not nearly as straight forward as it is in MVC. You have to create an empty ViewDataDictionary() and then set its Model property to the partial's populated model.
View Model / Handler
public async Task<IActionResult> OnGetAsyncUpdateSearchResults(DateTime startDate, DateTime endDate, string selectedTypes)
{
int[] types = selectedTypes.Split(",").Select(x => int.Parse(x)).ToArray();
var inventory = await _itemService.GetFiltered(types, null, null, null, null, null, null, startDate, endDate.ToUniversalTime(), null, null, null, null, null, null, null);
if (inventory != null)
{
SearchResultsGridPartialModel = new SearchResultsGridPartialModel();
SearchResultsGridPartialModel.TotalCount = inventory.TotalCount;
SearchResultsGridPartialModel.TotalPages = inventory.TotalPages;
SearchResultsGridPartialModel.PageNumber = inventory.PageNumber;
SearchResultsGridPartialModel.Items = inventory.Items;
}
var myViewData = new ViewDataDictionary(new Microsoft.AspNetCore.Mvc.ModelBinding.EmptyModelMetadataProvider(), new Microsoft.AspNetCore.Mvc.ModelBinding.ModelStateDictionary()) { { "SearchResultsGridPartialModel", SearchResultsGridPartialModel } };
myViewData.Model = SearchResultsGridPartialModel;
PartialViewResult result = new PartialViewResult()
{
ViewName = "SearchResultsGridPartial",
ViewData = myViewData,
};
return result;
}
I can now call this handler via ajax GET and have it return the partial's HTML. I can then set the partial's div and the partial refreshes as expected.
Here is the AJAX call I'm making:
var jsonData = { "startDate": startDate, "endDate": endDate, "selectedTypes": selectedTypesAsString };
$.ajax({
type: 'GET',
url: "searchresults/?handler=AsyncUpdateSearchResults",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
},
contentType: 'application/json; charset=utf-8"',
data: jsonData,
success: function (result) {
$("#searchResultsGrid").html(result);
},
error: function (error) {
console.log(error);
}
});
Thanks alot to TechFisher for figuring it out, here is a bit cleaner example.
public IActionResult OnGetTestPartial()
{
return new PartialViewResult()
{
ViewName = "Test",
ViewData = new ViewDataDictionary(new EmptyModelMetadataProvider(), new ModelStateDictionary())
{
Model = new TestPartialData { Data = "inputhere" },
}
};
}
Partial view in a file name "Test.cshtml" in the same folder as the above class.
#using YourNamespace
#model TestPartialData
<div>Hello, model value: #Model.Data</div>
Load it async with jquery
$("#someHtmlElementId").load("Your/Path/TestPartial");
I'm new to backbone.js and express and I have been adapting Christophe Coenraets Wine Cellar REST API example application for my own project.
I am building a form that has several menus needing to be populated from multiple unrelated collections in mongodb.
I am able to populate one menu with one collection, but I have no idea how to get more than one collection to my form View.
Here are the files I am using to populate one menu. How do I expand this to populate two menus?
I suppose I could make a new View for every menu I want to populate - but that seems like overkill.
Can I combine two mongodb find() collections into one object, and list them separately on a page? If so, how?
thanks in advance!
/routes/modules.js contains:
exports.findAllModules = function(req, res) {
db.collection('modules', function(err, collection) {
collection.find().toArray(function(err, items) {
res.send(items);
});
});
};
/server.js contains:
app.get('/modules', module.findAllModules);
/public/js/main.js contains:
routes: {
"modules" : "list" }
...
list: function(page) {
var p = page ? parseInt(page, 10) : 1;
var moduleList = new ModuleCollection();
moduleList.fetch({success: function(){
console.log('in list function');
$("#content").html(new ModuleListView({model: moduleList, page: p}).el);
}});
this.headerView.selectMenuItem('home-menu');
},
...
utils.loadTemplate([
'ModuleListItemView' ], function() {
app = new AppRouter();
Backbone.history.start(); });
/public/models/models.js contains:
window.Module = Backbone.Model.extend({
urlRoot: "/modules",
idAttribute: "_id",
initialize: function () {
this.validators = {};
this.validators.name = function (value) {
return value.length > 0 ? {isValid: true} : {isValid: false, message: "You must enter a name"};
};
validateItem: function (key) {
return (this.validators[key]) ? this.validators[key](this.get(key)) : {isValid: true};
},
validateAll: function () {
var messages = {};
for (var key in this.validators) {
if(this.validators.hasOwnProperty(key)) {
var check = this.validators[key](this.get(key));
if (check.isValid === false) {
messages[key] = check.message;
}
}
}
return _.size(messages) > 0 ? {isValid: false, messages: messages} : {isValid: true};
},
defaults: {
_id: null,
name: ""
} });
window.ModuleCollection = Backbone.Collection.extend({
model: Module,
url: "/modules"
});
/public/js/views/modulelist.js contains:
window.ModuleListView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
var modules = this.model.models;
$(this.el).html('<ul class="thumbnails"></ul>');
for (var i = 0; i < modules.length; i++) {
$('.thumbnails', this.el).append(new ModuleListItemView({model: modules[i]}).render().el);
}
return this;
} });
window.ModuleListItemView = Backbone.View.extend({
tagName: "li",
initialize: function () {
this.model.bind("change", this.render, this);
this.model.bind("destroy", this.close, this);
},
render: function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
} });
/public/tpl/ModuleListView.html contains:
Not entirely sure how your code works, but here are a few backbone tips.
If you wanna build a menu from a collection don't pass the collection as a model.
Instead of:
$("#content").html(new ModuleListView({model: moduleList, page: p}).el);
Use:
$("#content").empty().append(new ModuleListView({collection: moduleList, page: p}).el);
Instead of:
render: function () {
var modules = this.model.models;
$(this.el).html('<ul class="thumbnails"></ul>');
for (var i = 0; i < modules.length; i++) {
$('.thumbnails', this.el).append(new ModuleListItemView({model: modules[i]}).render().el);
}
return this;
}
Use:
render: function () {
this.$el.html('<ul class="thumbnails">');
this.collection.each(function(model) {
this.$('.thumbnails').append(new ModuleListItemView({model: model}).render().el);
}, this);
return this;
}
If you have no need in updating or deleting your models, it's enough to add the url path /modules only to the collection, for reading the initial modules.