Develop Reference

Do a reload of mvc/razor partial view with javascript

In my project I have rows of modules loaded from Partial views.
So imagine a grid of small squares with information.
There is a popup dialog for all of them, that displays the data of the clicked module.
Currently when I submit a change in the dialog, the javascript reloads the entire page. BUT, this takes a long time, and I need to be able to refresh only the one dialog.
I can imagine to make a separate js function for each type of module, and then pass some data in, so jquery can find the specific module, and then make an ajax get, for the data. But this requires me to do all the data insertion from js always. instead of using razor and MVC's built in awesomeness.
Does anyone know of a way, to call a partial view inside a div?
Also in the future I will need to reload "some" but not all the modules in an interval refresh. So for future proofing purposes:
What im looking for is something like:
function reloadElement(row, column, id){
var target = $("#div1");
// todo find row and column
target.html.partial("url", model); //<----- looking for something like this. cross fingers.
}

Thanks to GregH for a few key words, that lead to some ideas.
I solved it myself, so if you land on this problem also, here is how i solved it:
Controller:
You want to make your controller return PartialView("somePartialViewUrl", new SomeModel()), apparently saving the model and relying on the data collection isn't good enough, i hadto make a new instance of the model.
Javascript
in the "click" that handles the event, put:
$.ajax({
url: "controllerName/actionName",
data: JSON.stringify({ row:1,column:2 .... }),
contentType: "application/json",
dataType: "html",
type: "POST",
success: function (partial) {
$("#div2").html(partial);
}
});
this will override the html in your "#div2".
im sure you can also use $("#div2").innerHTML = partial; or $("#div2").load("url",parameters); and probably many other ways.
done.

How to refactor this repetitive jquery ajax pattern?

I received this complicated jquery based ajax structure.
$.ajax({
url: ("example/example.php"),
type: "post",
data: {
data1 = datafromphp_1;
data2 = datafromphp_2;
}
dataType: "json",
},
success: function (datafromphp_2){
return function(datafromphp_2){
$.ajax({
// Same structure as outer structure
success: function (){
$.ajax({
// same structure as outer structure. The structure is recursively repeating.
success: function(){
// The structure is recursively repeating..
// Some complicated embedded html strings with jquery.
// Each ajax makes cells dynamically. Further inner ajax codes make smaller cells in each cells made by outer ajax codes.
}
});
}
});
};
}(datafromphp_2)
});
What customers should see on browsers like this.
And each cells have to be generated by dynamically. If there is no data on server, browser have to show nothing. To generate cells dynamically, jquery codes are implemented like this.
$("<label>").text("this is label example),$(input type = 'text' name='cell0' style = blablabla...), ("other html codes to decorate cell"), ... , ...
So even CSS, php, html and javascript(.js) files are divided, javascript files are too big and It seems like other html codes! Extremely, one js file for implementing this view has 20 times of tabs and nested block structure.
Is there any way to simplify these structure? I can't find the proper solutions to refactor this.

avoid reloading JavaScripts files in Partial Views

In my project I have a large JavaScript file (bigger than 1 MB) that I use in all pages, I put it in _Layout and every thing work correctly but when I want to update partial view that show a table I loose link between that partial view and JavaScript file and if I want to reload it in partial view users need to waste their time to changes. I use ajax to update partial views.
What can I do to solve that problem?
Java script that I use is:<script src="~/Content/js/vendor.min.js"></script>
Ajax that I use to update opartial view is:
<script>
function EditClick(id, pg) {
var model = {
CurrentPage: pg,
SortColumn: '#Model.SortColumn',
SortStatus: '#Model.SortStatus',
id: id,
};
var formDiv = $("#rplaceInsert");
$.ajax({
cache: false,
type: "Post",
url: "#Url.Action("EditSurgeryType", "SurgeryType")",
contentType: 'application/json',
data: JSON.stringify(model)
,
success: function (data) {
formDiv.html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
}

This has nothing to do with reload. Once a file is loaded once in the browser, it will remain cached so telling it to load in multiple places will simply load it from the cache as long as it's all on the same domain.
That said, your issue is because JQuery doesn't automatically apply it's selectors to new elements added to the DOM. It isn't actively watching, so new elements won't get events or be processed unless you do so explicitly.
You can refactor your script so that the parts which apply to your partial view are in their own function. This way, when the partial view is changed, you can call that function to apply your jQuery selectors to them.
If all you're concerned with is hooking up events for in a table or list, you can "defer" those events by putting them on an element higher up in the DOM that doesn't change. Events in Javascript bubble so rather than listening for individual events on items in your table/list, you listen for them once on the list itself. That way, when the table changes, the new elements will still bubble up their events.

Add HTML5 DATA attributes to Element stored in Javascript variable

I am looping through an AJAX request and adding a list of <li> to a <ul> from the results.
What I am having trouble with is storing DATA being returned from the AJAX request on these items as HTML5 DATA attributes. Here is some example code:
function load_items(json_url, callback) {
// Set a variable to contain all the items
var all_the_items = $('<ul class="all_items_cont"></ul>');
$.ajax({
type: 'GET',
cache:false,
url: json_url,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function(data) {
$.each([].concat(data.item), function(i, post){
// Create An Item
var current_item = $('<li><a>'+ post.title + '</a></li>');
// This is how I tried to add the data... not working
current_item.find('a').data('description',post.description)
// Append Item to <ul>
$(all_the_items).append(current_item);
});
if (typeof callback === 'function') {
callback(all_the_items.html());
}
}
});
}
Ten I call the function and append the HTML to a target <div>:
load_items('http://jsonurl.com',function(html){
$('div#container').append(html)
})
I've found that if I write the DATA into the HTML explicitly than it works just fine, but if I use jQuery to store the data attributes than I cannot retrieve them later.
I can't write the Data Attributes out explicitly in the HTML because sometimes they are an entire JSON feed or really complicated description.
Any ideas?
------ EDIT 5/21/15 3:38pm -------
I am accessing the data using the jQuery data function as such:
$('div#container ul li:first a').data('description')
This is just an example as the code I am actually utilizing is jQuery Droppable and retrieving the content on DROP. This is a lot of unnecessary code for the questions sake.

If I gather your question correctly, what you're trying to do (set arbitrary data on a DOM element, then pull it out as a data-foo="" attribute) isn't something that JQuery was meant to do.
data-foo attributes are not the same as what the .data method sets. Data can flow in one direction, from the attribute to the element's data store (done automagically by JQuery), but not the other way around
If you really want to pull it out as part of the HTML, you'll have to set the data-foo attribute manually.
// attach the data to the DOM element
$(myElement).data('description', post.description);
// set the data-description attribute so we can pull it out as HTML
$(myElement).attr('data-description', post.description);
Another problem I see with your code is that if post.title contains malformed HTML it could break the <a> element when you call $('<a>'+post.title+'</a>').

When setting callback(all_the_items.html()); it will remove the DATA associated with the DOM element and variable and turn it into straight HTML. By changing it to this: callback(all_the_items); it will work.

jQuery alters page - but how/where do I "acquire" the changes?

This post by #BenjaminRH (How to change/edit the text of a paragraph/div using jQuery?) provides exactly the sort of functionality I'm trying to build on.
By clicking on a button, a new paragraph is created on the page, which can be edited and saved to the page.
I want to save it to a database. When I look at the page source after editing, I don't see the changes there, which doesn't surprise me... but I don't know where to "capture" the changed text so that I can validate and post to mySQL.

JQuery is a javascript library - which runs client side. If you wanted to save that data into the database - you would have to send it to the server (php/asp/mvc etc) using ajax and then insert the data into the database.
See the jquery Ajax function for details on how to accomplish sending data asynchronously.
Create the data in javascript that you want to show and save in database.
Wrap the data in JSON and use ajax to POST the data to the server side code
Server-side retrieve the posted data and parse it into something usable
Server-side write a script to insert the data into the database.
Handle any errors that may occur.
Pseudo-code:
// step 1
var someData = 'this is my data';
$("#myDiv").html(someData);
// step 2
$.ajax({
type: "POST",
dataType: 'json', // <-- if the data is complex and needs to be object-oriented
url: "some.php", // <-- that is the file that will handle the post server-side.
data: JSON.stringify({ someData }) // <-- just pass someData if your data is not complex
})
.always(function(jqXHR, textStatus) {
if (textStatus != "success") {
// step 5: handle error.
alert("Error: " + jqXHR.statusText); //error is always called .statusText
} else {
alert("Success: " + jqXHR.response); //might not always be named .response
}});

OK, I've managed to solve it for myself, without using ajax. I took the example from (How to change/edit the text of a paragraph/div using jQuery?) and modified it by placing the elements in an (html) form.
The second modification was to use <textarea> elements, not <p> elements, as <p> elements cannot be posted.
As #caspian pointed out (in the comments) those two steps do populate the $_POST array and away we go.