Timepicker is not working in response coming from ajax request.
Same Timepicker is working fine when i run Remark.aspx page individually.
It's not working only after binding ajax response in a div in popup.
Below is the jquery reequest:-
$.ajax({
type: "POST",
url: "LMS/**Remark.aspx**",
data: {id:id, n:n},
cache:false,
success: function(response) {
$('#<%=content.ClientID %>').html(response);
},
error: function() {
alert('Some problem has been occured.');
}
});
Below is the div(this div is opening in popup) in which i am binding response:-
<div id="content" runat="server">
</div>
And if i m not opening popup it is working fine.Problem is with popup only.
Below is the timepicker which i m using:-
http://www.codeproject.com/Articles/213311/Time-Picker-Ajax-Extender-Control
Any Help would be appreciated.
Thanks.
This timepicker will auto add a js block to initialize the timePicker. You can view page source to see that.
<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
$create(Ajaxified.TimePicker, {"CloseOnSelection":true,"CssClass":"timepicker","HeaderCssClass":"header","ItemCssClass":"item","MinuteStep":15,"SelectedItemCssClass":"selecteditem","SelectedTabCssClass":"selectedtab","TabCssClass":"tab","TitleCssClass":"title"}, null, null, $get("TextBox2"));
});
//]]>
</script>
</form>
When get page content via ajax, below code is not triggered so the timepicker is not init correctly. Here you need to manually invoke your code "$(create(....." in your ajax success call back.
Related
I have a classic asp page that fetches data from a table. I have a button to update some values in the database. This is the code I have used.
Code in SelectData.asp
<p>
<input type="button" value="Reset" onclick="location.href='RecordsUpdate.asp'"></p>
When I click the button it redirects to RecordsUpdate.asp page and updates the database (RecordsUpdate.asp has the code to update the database and it's working fine). I need to update the database but I don't want to navigate to RecordsUpdate.asp page. I need to stay on SelectData.asp page itself, but when I click the button the data should be updated in the database. How can I do that?
Please help me out.
Thanks In Advance,
Abhilash D K
You'd be best off using jQuery for this so you can capture the button 'onclick' and use Ajax to "get" the RecordsUpdate.asp page:
<input id="mybutton" type="button" value="Reset">
<script>
$("#mybutton").on("click", function(e) {
e.preventDefault();
$.get( "RecordsUpdate.asp", function( data ) {
//data will be the output from `RecordsUpdate.asp`
alert( "Load was performed." );
});
});
</script>
I am able to call an .asp page without navigating to it. This the code that I used.
$(document).ready(function () {
$("#updatebutton").on("click", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "RecordsUpdate.asp"
})
.done(function (msg) {
alert("Data Saved");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Thank You all for helping me out.
Abhilash D K
You need to do this with javascript. Look here for more info: http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp
If you are using jQuery, use this http://api.jquery.com/jquery.ajax/
With the success callback you can retrieve some responsedata so you can notify the user if you want. This ain't rocket science.
In my layout page I've got this html:
<div id="ajax-loading" class="global-loading-image" runat="server">
<img src="/content/travelbill/img/small-loading-image.gif"/>
</div>
Which is a loading-symbol. I want it to show when my code is doing its business.
I've read on other threads here on Stackoverflow that if you use runat="server", you are supposed to be able to access the div in the controller. Like so:
ajax-loading.Visible = true;
EditTravelBillViewModel model = this.travelBillService.GetTravelBill(travelBillId);
model.StageOfProcess = (int)TravelBillStageOfProcessEnum.APPROVED;
this.travelBillService.Update(model, true);
ajax-loading.Visible = false;
return RedirectToAction("GetTravelBillsPerCompany");
But I get the error that the loading and the ajax do not exist in the current context. What am I doing wrong?
That was in the old ASP.NET pages. In ASP MVC you don't have a ViewState, isPostBack or runat="server" you can pass variables from the controller to the view using ViewBag and ViewData like:
Controller:
ViewBag.Name = "My Name";
ViewData["Name"] = "My Name";
View:
#ViewBag.Name
#ViewData["Name"]
I don't think you need to do that. You can have a action that do the task that you need to get done and with JavaScript request that action via AJAX. You can then with JavaScript show and hide the loading as you wish:
function LoadAjax(containerId, url, params){
//Set loading in container
$(containerId).html('<img src="loading.gif" alt="loading"/>');
//Do the request
$.ajax({
type: 'POST',
dataType: "html",
url: url,
data: params,
success: function(data){
// show response inside container (removes loading)
$(containerId).html(data);
},
error: function( jqXHR, textStatus, errorThrown){
// show error inside container (removes loading)
$(containerId).html(textStatus);
}
});
}
While the page is loading it will display the loading image. You will need Jquery to use my code. Hope it helps.
I have embed a controller in a template:
{% render "AcmeUserBundle:User:showUsersList"} %}
<a onClick="changeStatus({{user.getUserId()}})"
The aim is simple:
The user clicks on the link which updates the status via ajax (this works fine)
Reload the embedded controller only, not the entire page!
At the moment, I managed to do this, by reloading the entire page using document.location.reload(true); This has no point so far...
Here is the ajax part:
//...
function changeStatus(userId){
$.ajax({
type: "POST",
url: ajaxControllerPath,
data: "userId="+userId,
success: function(){
document.location.reload(true);
}
});
}
How would you reload the embedded controller only?
This is working so far:
Embed the controller within a div:
<div id="block1">
<a onClick="changeStatus({{user.getUserId()}})"
</div>
And reload the controller using javascript at the end of the ajax call
$('#block1').load("{{ path('show_users_list') }}");
Does anyone have a better suggestion?
When you call the ajax controller, this controller could render the showUsersList template and return the generated html as a json object:
$answer['html'] = $this->forward('AcmeUserBundle:User:showUsersList')->getContent();
$response = new Response();
$response->headers->set('Content-type', 'application/json; charset=utf-8');
$response->setContent(json_encode($answer));
return $response
Then in your javascript use this generated html to replace the content of the controller part of the page (use a div or similar to identify it)
<div id="changethis">{% render "AcmeUserBundle:User:showUsersList"} %}</div>
function changeStatus(userId){
$.ajax({
type: "POST",
url: ajaxControllerPath,
data: "userId="+userId,
success: function(returnData){
$('#changethis').html(returnData['html']);
}
});
}
I am having no luck in getting a jqueryui dialog to ajax load a form, which inturn submits via ajax.
Everything works upto the point of catching the form that is being submited and instead sending it through an ajax call. Thus the form action is triggered and the browser redirected. The ajax call is never made.
My code is as follows
$(document).ready(function() {
$('.viewOrder').click(function() {
$('#displayOrder').load(this.href, [], function() {
console.log("landed here");
$('#blah').click(function() {
console.log("submiting the form via ajax");
$.ajax({
url: "/ajax/orderupdate",
type: "GET",
data: data,
cache: false,
//success
success: function (data) {
console.log("worked:");
}
});
return false;
});
});
return false;
});
});
.viewOrder is the a href that is ajax loaded. This works fine.
I have read many similar questions on here and it seems load() does not execute scripts that are embeded in the return html, but my return code is pure html no scripts. Any ideas?
IMHO you should try and capture the submit instead of the click, that way you prevent submits done by keyboard aswell, and it might even fix your problem.
The events are bound on page load. At page load the form you are binding the click event does not exist. I use the livequery plugin but they added Live to jquery 4 which you can also use(i had some issues with IE so i went back to livequery)
So load livequery with your scripts http://docs.jquery.com/Plugins/livequery
and change
$('#orderUpdate').submit(function() {
to
$("#orderUpdate").livequery("submit", function() {
right now I have a huge Solution in which we use javascript alerts via RegisterStartupScript for all messages and errors.. We were willing to modify all this to making something similar to the modalPopupExtender, or the extender itself in a way that doesn't require too much effort... I mean, to show a modalpopup on a single page I need to create it on the aspx file, setting the attributes etc... So i'm just asking for Ideas, want to know how you guys deal with this..
I'd probably use jQuery dialog and put the markup and initialization code in a MasterPage, set with autoOpen false and hidden by default. I'd inject code that interacts with the dialog into each page as needed.
<div id="modalDialog" title="Error">
<p id='modalDialogMsg'>An error has occurred.</p>
</div>
<script type="text/javascript">
$(function() {
$('#modalDialog').dialog({
autoOpen: false;
modal: true,
buttons: {
"OK" : function() {
$(this).dialog('close');
}
}
});
});
// You could "objectify" this, but I'll show as a global function
function showError( title, msg )
{
if (!title) {
title = 'Error';
}
if (!msg) {
msg = 'An error occurred.';
}
$('#modalDialogMessage').html(msg);
$('#modalDialog').attr('title',title)
.dialog('open');
}
</script>
Then, in your page you'd inject code that calls showError. Note this would need to be after the script above in order to make sure that the function has been defined. What would spit out would render like:
<script type="text/javascript">
$(function() {
showError('Database connection error', 'There was an error connecting to the database.' )'
});
</script>
Could you not place the modal popup/ modal popup extender into a user a control and embed the user control into each page?