Framework7 onPageInit Not Working - javascript

I have a Framework7 template.
I want to call a webservice when the page load.
My code inside the js file is:
myApp.onPageInit('cards', function (page){
myApp.alert('Alert 1');
$.ajax({
type: "POST",
url: "http://localhost:6032/Api.svc/GetTicket/",
data: JSON.stringify({UnitType:1,UnitNr:1,PrinterTextNr:1,PrinterNr:0,Copies:1,Logo:0,Delay:0,Host:'pc-pc',Port:8899}),
processData: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//Get The Ticket
var ticket = data.data.TicketNumber;
document.getElementById('myticket').innerHTML = ticket;
//End Get The Ticket
document.getElementById('ticketBody').style.display = "block";
alert(1);
},
error: function (xhr) {
alert(xhr.responseText);
}
});
}).trigger();
But when the page load doesn't do nothing.
When I try my script on another html files, it works fine.
Can you help me?
Thank you.

<!-- Views -->
<div class="views">
<!-- Your main view -->
<div class="view view-main">
<!-- Pages -->
<div class="pages">
<div class="page" data-page="cards">
<div class="page-content">
page content goes here
</div>
</div>
</div>
</div>
make sure your external page contains this <div class="page" data-page="cards">

Make sure you initialized myApp and check if your page contains this line
<div data-page="cards" class="page">
also, try something like
mainView.router.loadContent(ticket);

try this format
function Get_MySQL_Category() {
$.ajax({
type: "POST",
url: "http://localhost:6032/Api.svc/GetTicket/",
data: JSON.stringify({UnitType:1,UnitNr:1,PrinterTextNr:1,PrinterNr:0,Copies:1,Logo:0,Delay:0,Host:'pc-pc',Port:8899}),
processData: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//Get The Ticket
var ticket = data.data.TicketNumber;
document.getElementById('myticket').innerHTML = ticket;
//End Get The Ticket
document.getElementById('ticketBody').style.display = "block";
alert(1);
},
error: function (xhr) {
alert(xhr.responseText);
}
});
};
myApp.onPageInit('cards', function (page) {
Get_MySQL_Category()
});

Related

Call JS Function from asp.net page

so i have a js function that calls a web method on my server,my question is:
can this function be called from an as.net button with a parameter from the server?
because that snippet of code that i got from here basically calls my web method as i want,but i dont know how to call this function from my asp.net code and asp.net button
<div>
<div id="messages">
</div>
<input type="text" id="echo" /><input id="echoSubmit" value="Echo!" type="button" />
</div>
<%-- JAVASCRIPT --%>
<script type="text/javascript">
$(function () {
$('#echoSubmit').click(function () {
var mes = $('#echo').val();
var jsonText = JSON.stringify({ message: mes });
$.ajax({
type: "POST",
url: "ARCAProductsCheat.aspx/SendMessage",
data: jsonText,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#messages").append(msg.d);
}
});
});
});
</script>

I want to use the data in the Controller in the View side javascript

this is my controller:
public ActionResult AjaxSmsSend(Sms smsInfo)
{
var sms = smsInfo.smsCode;
var telephone = smsInfo.telephone;
ViewBag.Code = sms;
return Json(sms);
}
In the View :
<button id="getDataBtn">Click me</button>
When I press this button :
<script type="text/javascript">
$(function () {
$("#getDataBtn").click(function () {
$.ajax({
type: "GET",
url: "/Home/AjaxSmsSend",
data: sms,
contentType: "application/json; charset=utf-8",
dataType: "json",
});
});
</script>
I will use it to compare the sms data I received from the controller.
<p style="text-align: center;margin-top: 10%;">Enter your sms code</p>
<input type="text" id="pincode" maxlength="4">
This input is entered by the user. I have generated sms data in the controller itself.
I'm sure it's actually a very simple process. But since I've just started, I can't find what I'm looking for. I'd appreciate it if you could help me with that.
I don't think it's a good practice, normaly the comparison should in server side but you can Add this :
success: function (response) {
if (response.smsCode)
{
}
}
it will be like this :
<script type="text/javascript">
$(function () {
$("#getDataBtn").click(function () {
$.ajax({
type: "GET",
url: "/Home/AjaxSmsSend",
data: sms,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response.smsCode)
{
}
}
});
});
</script>
Then put your code inside this if :
if (response.smsCode)
{
}
That's all, I hope you find this helpful

How to send the <input type="file"> data from AJAX by putting it in object?

I have a simple upload file in my html like so:
<div class="col-md-12">
<span id="fileUploadErr">Please Upload A File!</span>
<div style="margin-bottom: 10px;"></div>
<input id="pickUpFileAttachment" type="file" name="attachFileObj" size="60" />
</div>
When I click on the "Submit" button the following action occurs:
$("form").submit(function() {
event.preventDefault();
var assignmentObj1 = {
selectionId: trDataSecondTable.selectionId,
inout: "in",
letterReceivedBy: $("#letterReceivedBy").val(),
letterIssuedSubBy: $("#letterIssuedSubBy").val(),
representativeNameEng: $("#representativeNameEng").val(),
letterId: 2,
assessmentNo: 0
imageFile: $("#representativeNameEng").val()
imageTitle:
}
console.log(jsonData);
$.ajax({
url: A_PAGE_CONTEXT_PATH + "/form/api/saveProcessAnexTwo",
method: "post",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(assignmentObj1),
success: function(response) {
},
error: function(response) {
switch (response.status) {
case 409:
alert("error");
}
}
});
});
I need to assign the fileName and the uploaded file while sending from AJAX and need to put it inside the assignmentObj1 variable so I tried: imageFile: $("#representativeNameEng").val() to get the file information but it is not coming. How can I get the file information and send from AJAX by putting it in a local variable? And also how can I get the name of the file which can be placed in the imageTitle: property?
This is how to deal with the file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery Ajax File Upload</title>
</head>
<body>
<div class="col-md-12">
<span id="fileUploadErr">Please Upload A File!</span>
<div style="margin-bottom: 10px;"></div>
<input id="pickUpFileAttachment" type="file" name="pickUpFileAttachment" size="60" />
</div>
<div class="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// $("form").submit(function(){
$('#pickUpFileAttachment').change(function(e){
var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]);
$.ajax({
url : window.location.pathname + "/form/api/saveProcessAnexTwo",
data: formData,
type: 'POST',
contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
processData: false,
success: function(response){
alert("suc");
$('.result').html(response.html)
} , error: function(response){
switch(response.status){
case 409:
alert("error");
}}
});
});
//});
});
</script>
</body>
</html>
Easiest method is to use formData to send data:
var data = new FormData();
$.each($('#filecontainer')[0].files, function(i, file) {
data.append('file-'+i, file);
});
So now you have formData object
$.ajax({
url: 'php/upload.php',
data: data,
cache: false,
contentType: false,
processData: false,
method: 'POST',
type: 'POST', // For jQuery < 1.9
success: function(data){
alert(data);
}
});
Hope this helps.

Error passing parsing JSON values using Ajax

This is my Ajax call
<script>
$.ajax({
url:"http://localhost:3000/house/get-all",
type: "GET",
dataType: 'json',
data,
crossDomain: "true",
}
});
</script>
This is my html code:
<div id="houses">
This is place to put content. You can put slider, short description about your website and place some links for navigation.
</p>
</div>
ERROR:
Uncaught ReferenceError: data is not defined
You don't need the data, if you are not passing any data in your ajax options:
$.ajax({
url:"http://localhost:3000/house/get-all",
type: "GET",
dataType: 'json',
// data, -- remove this or pass something here
// ...
});

animation not work in IE when jQuery ajax calling inside js function

I'm trying to show a div with gif animation inside when a button click via javascript call. But the problem is, it's working fine in firefox only. In IE and Chrome, the animation won't show up. I've tried debugging with alert("stop"); before and after the animation and it's indeed working, but after I removed the alert, it won't work anymore. Any suggestion please?
Here's the snippet for the TestPage.aspx:
<div id="animationDiv" style="display: none;">
<img src="loading.gif" />
</div>
...
<div>
<asp:Button ID="testButton" runat="server" Text="Test AJAX" OnClientClick="return testButtonClick();" />
</div>
...
<script type="text/javascript">
<!--
var docWidth, docHeight;
function testButtonClick() {
var o_animationDiv = $("#animationDiv");
o_animationDiv.width(docWidth);
o_animationDiv.height(docHeight);
o_animationDiv.show();
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: testAjaxSuccess,
error: testAjaxError
});
function testAjaxSuccess(data, status, xhr) {
// do something here
};
function testAjaxError(xhr, status, error) {
// do something here
};
o_animationDiv.hide();
return false;
};
$(document).ready(function () {
docWidth = $(document).width();
docHeight = $(document).height();
});
//-->
</script>
Here's the snippet for TestPage.aspx.cs:
// using PageMethod for ajax
[System.Web.Services.WebMethod(EnableSession = true)]
public static string TestAjax()
{
System.Threading.Thread.Sleep(5000); // 5 seconds
// or do something else here
// ie. if validation error, throw an exception
return string.Empty;
}
UPDATE 1: added some javascript function
Why don't you call the .hide() on the post success:
$.ajax({
type : "Post",
url : "TestPage.aspx/TestAjax",
cache : false,
data : "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
// hide element when POST return as arrived,
// meaning the "5 seconds" period has ended!
o_animationDiv.hide();
}
});
You can read about callback function at the jQuery documentation!
jQuery ajax is asynchronous, so that won't wait for ajax result to hide again.
o_animationDiv.hide();
o_animationDiv.show();
This lines work in serial and you can't see if it's working properly. So you should wait for ajax result to hide it.Try this,
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json"
}).done(function() {
o_animationDiv.hide();
});
UPDATE:
Sorry I missed the point that you create a synchronous ajax request.
But there is a problem already. Most browsers lock itself when running a synchronous XHR. This also effects previous proccess sometimes.
Here is a similar question
Maybe if you use beforeSend, you can avoid this problem.
beforeSend
A pre-request callback function that can be used to modify the jqXHR
(in jQuery 1.4.x, XMLHTTPRequest) object before it is sent
Try this one,
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend : function() {
o_animationDiv.show();
}
}).done(function() {
o_animationDiv.hide();
});
UPDATE-2:
If that doesn't work, try this one,
...
o_animationDiv.width(docWidth);
o_animationDiv.height(docHeight);
o_animationDiv.show();
setTimeout(function() {
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: testAjaxSuccess,
error: testAjaxError
}).done(function() {
o_animationDiv.hide();
});
}, 600);

Categories