Please Help me to do this
first i have this div
<div class="loader" alt="stat.php">
Here i want to load static
</div>
<div class="loader" alt="notify.php">
Here i want to load notification
</div>
<div class="loader" alt="alert.php">
Here i want to load new messages
</div>
and i want to do this
i want to make this divs with this class = loader
load every 1 min and get from its alt
mean
after 1 minute i want to make foreach div
class="loader"
ajax request to its alt page
and inside it
mean every 1 minute i want every div to be like this
<div class="loader" alt="stat.php">
Static loaded from stat.php
</div>
<div class="loader" alt="notify.php">
notification loaded from notify.php
</div>
<div class="loader" alt="alert.php">
messages loaded from alert.php
</div>
and every 1 minute do this request ???
How can i do this
Something like this
function refreshDivs() {
$('.loader').each(function() {
$this = $(this);
$this.load($this.prop('alt')); // load in the URL using the alt attribute
}
}
setInterval(refreshDivs, 60000); // run every minute
Using the each method to process each DOM element with the class loader it then uses the load() method to replace the contents of the element with the HTML loaded from the URL.
Docs on load() here and docs on each() here
$('.loader').each(function () {
var url = $(this).attr('alt');
var thisDiv = $(this);
window.setInterval(function () {
thisDiv.load(url);
}, 60000);
});
Related
So if I hard code the object into my cshtml document it works -
<div class="col-md-6 imagePreviewer" style="height:200px;">
<object data="~/Content/Images/casedocs/2335421_passport.JPG"></object>
</div>
but I need to load the image dynamically (on click) -
$('.linkDoc').on('click', function () {
var div = $('.imagePreviewer');
if (div.length > 0) {
$(div).children("object").remove();
var obj = document.createElement("object");
$(obj).attr("data", "~/Content/Images/casedocs/2335421_passport.JPG")
.css("height", "200px")
.css("width", "200px");
$(div).append(obj);
}
});
why is it not working when I try to load the object dynamically?
Just leave an object element with empty data attribute and load that attribute dynamically.
I'm learning AngularJS framework and my background is BackboneJS and it seems I can not figure
out conventional way to do next thing:
I have a readonly list of elements each of which has 'edit' button that switches this
particular element to an edit mode. In edit mode I need to render input elements instead
of spans, p's etc.
The way to do this in Backbone.js is simply create EditView and pass model to it, but I don't have any idea how this works in Angular.
I pass data to the scope and render the readonly list and when user clicks on 'edit' button
in the element how should I change view for the element?
Thanks!
Angular makes this task simpler than Backbone by using a model for editing, then you update the original list and clear the edit model.
The view:
<div ng-app='App'>
<div ng-controller='mainCtrl'>
<div ng-controller='childCtrl'>
<strong>Controller</strong>
<ul>
<li ng-repeat='item in list'>{{item.name}} <button ng-click='edit($index)'>+</button></li>
</ul>
<div ng-show='editModel.name'>
Name: <input type="text" ng-model='editModel.name'/> <button ng-click='save()'>Save</button><button ng-click='cancelEdit()'>Cancel</button>
</div>
</div>
</div>
The angular app:
angular.module('App', [])
.controller('mainCtrl', ['$scope', function($scope){
$scope.list = [ {name:'item 1'}, {name:'item 2'}, {name:'item 3'} ];
}])
.controller('childCtrl', ['$scope', function($scope){
$scope.editModel = {};
$scope.edit = function(index){
$scope.editModel.index = index;
$scope.editModel.name = $scope.list[index].name;
};
$scope.cancelEdit = function(){
$scope.editModel = {};
};
$scope.save = function(){
if($scope.editModel.hasOwnProperty('index')){
$scope.list[$scope.editModel.index] = $scope.editModel;
}
else if($scope.editModel.name && $scope.editModel.name.length){
$scope.list.push($scope.editModel);
}
$scope.cancelEdit();
};
}]);
JsFiddle: http://jsfiddle.net/guilhermenagatomo/Bp6bY/
I'm using the controller nesting so the list can be used by other controllers you have in the app, or maybe you can create a controller just to take care of the editing.
Im trying to create a from using asp.net mvc3.
I have a dropdownlist with some options.
What i want is different partial views to be injected into the page, depending on the selection in the dropdown list.
But. i dont want this to rely on a submit action. It should function so that, the partial view is loaded as soon as you select from the select list.
I have this code:
#using (Ajax.BeginForm("Create_AddEntity", new AjaxOptions {
UpdateTargetId = "entity_attributes",
InsertionMode = InsertionMode.Replace
}
))
{
<div class="editor-label">
#Html.Label("Type")
</div>
<div class="editor-field">
#Html.DropDownList("EntityTypeList", (SelectList)ViewData["Types"])
</div>
<div id="entity_attributes"></div>
<p>
<input type="submit" value="Create" />
</p>
}
But I can't figure out how to trigger this partial view load when the dropdown list selection changes.
This point is that the form is different for the different "entity types". so there will be loaded a different partial view, depending on the dropdown selection.
Anyone got any pointers?
Let's say following is your view that you want to insert your partial.
<html>
<head><head>
<body>
<!-- Some stuff here. Dropdown and so on-->
....
<!-- Place where you will insert your partial -->
<div id="partialPlaceHolder" style="display:none;"> </div>
</body>
</html>
On the change event of your dropdownlist, get partial via jquery ajax call and load it to place holder.
/* This is change event for your dropdownlist */
$('#myDropDown').change( function() {
/* Get the selected value of dropdownlist */
var selectedID = $(this).val();
/* Request the partial view with .get request. */
$.get('/Controller/MyAction/' + selectedID , function(data) {
/* data is the pure html returned from action method, load it to your page */
$('#partialPlaceHolder').html(data);
/* little fade in effect */
$('#partialPlaceHolder').fadeIn('fast');
});
});
And in your controller action which is /Controller/MyActionin above jquery, return your partial view.
//
// GET: /Controller/MyAction/{id}
public ActionResult MyAction(int id)
{
var partialViewModel = new PartialViewModel();
// TODO: Populate the model (viewmodel) here using the id
return PartialView("_MyPartial", partialViewModel );
}
add the following code to the header of the project (layout).
Add "combobox" to any combo box (select box) which you want to trigger the form that is surrounding it.
$(document).ready(function () {
$('.formcombo').change(function () {
/* submit the parent form */
$(this).parents("form").submit();
});
});
I want to create a mechanism in my page such that it refreshes the table data everysecond using Ajax. How can I do that?
Assuming that you have a controller action that will return the table as a partial view you can use:
<script type="text/javascript">
$(function() {
setInterval(loadTable,1000); // invoke load every second
loadTable(); // load on initial page loaded
});
function loadTable() {
$('#tablecontainer').load( '/controller/tabledata' );
}
</script>
<div id="tablecontainer">
</div>
You'd have your tabledata action return a partial view containing the table.
<table>
<thead>...</thead>
<tbody>...</tbody>
</table>
EDIT to establish via a click handler (script tags omitted)
$(function() {
var timer;
$('#enableCheckbox').change( function() {
if ($(this).find(':checked').length) {
timer = setInterval(loadTable,1000); // set up timer
loadTable();
}
else if (timer) { // stop the interval timer
clearInterval(timer);
timer = null;
}
});
});
function loadTable() {
$('#tablecontainer').load( '/controller/tabledata #innercontainer' );
}
Full View (contains at least the following )
<div id="tablecontainer">
<div id="innercontainer">
<table>
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
</div>
I am trying to create a situation where if a user clicks on an "edit" button in a list of text items, she can edit that item. I am trying to make the "edit" button post back using ajax.
Here's my ajax code:
$(function () {
// post back edit request
$('input[name^="editItem"]').live("click", (function () {
var id = $(this).attr('id');
var sections = id.split('_');
if (sections.length == 2) {
var itemID = sections[1];
var divID = "message_" + itemID;
var form = $("#newsForm");
$.post(
form.attr("action"),
form.serialize(),
function (data) {
$("#" + divID).html(data);
}
);
}
return false;
}));
});
But the form.serialize() command is not picking up all the form controls in the form. It's ONLY picking up a hidden form field that appears for each item in the list.
Here's the code in the view, inside a loop that displays all the items:
**** this is the only control being picked up: ******
#Html.Hidden(indexItemID, j.ToString())
****
<div class="datetext" style="float: right; margin-bottom: 5px;">
#Model.newsItems[j].datePosted.Value.ToLongDateString()
</div>
#if (Model.newsItems[j].showEdit)
{
// *********** show the editor ************
<div id="#divID">
#Html.EditorFor(model => model.newsItems[j])
</div>
}
else
{
// *********** show the normal display, plus the following edit/delete buttons ***********
if (Model.newsItems[j].canEdit)
{
string editID = "editItem_" + Model.newsItems[j].itemID.ToString();
string deleteID = "deleteItem_" + Model.newsItems[j].itemID.ToString();
<div class="buttonblock">
<div style="float: right">
<input id="#editID" name="#editID" type="submit" class="smallsubmittext cancel" title="edit this item" value="Edit" />
</div>
<div style="float: right">
<input id="#deleteID" name="#deleteID" type="submit" class="smallsubmittext cancel" title="delete this item" value="Delete" />
</div>
</div>
<div class="clear"></div>
}
It's not picking up anything but the series of hidden form fields (indexItemID). Why would it not be picking up the button controls?
(The ID's of the edit button controls, by the way, are in the form "editItem_x" where x is the ID of the item. Thus the button controls are central to the whole process -- that's how I figure out which item the user wants to edit.)
UPDATE
The answer seems to be in the jquery API itself, http://api.jquery.com/serialize/:
"No submit button value is serialized since the form was not submitted using a button."
I don't know how my action is supposed to know which button was clicked, so I am manually adding the button to the serialized string, and it does seem to work, as inelegant as it seems.
UPDATE 2
I spoke too soon -- the ajax is not working to update my partial view. It's giving me an exception because one of the sections in my layout page is undefined. I give up -- I can't waste any more time on this. No Ajax for this project.
You could try:
var form = $('#newsForm *'); // note the '*'
Update
Did you change the argument to $.post() as well? I think I may have been a little too simple in my answer. Just change the second argument within $.post() while continuing to use form.attr('action')
New post should look like this:
$.post(
form.attr("action"),
$('#newsForm *').serialize(), // this line changed
function (data) {
$("#" + divID).html(data);
}
);