I am using JavaScript with ZK framework. In some scenario, I want to post URL from JavaScript in ZK. How to call ZUL file from JavaScript?
Is there any way to post URL using JavaScript in ZK?
Assume you have a content.zul and you want to get it via ajax in javascript, this can be done by using zk built in jquery in zul page or using jquery in pure html.
zul sample:
<zk>
<script><![CDATA[
function loadContent () {
jq.ajax({
url: "content.zul",
type: "post",
// callback handler that will be called on success
success: function(response, textStatus, jqXHR){
jq('$content').html(response);
}
});
}
]]></script>
<div id="content"
onCreate='Clients.evalJavaScript("loadContent();");' />
</zk>
html sample:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
$.ajax({
url: "content.zul",
type: "post",
// callback handler that will be called on success
success: function(response, textStatus, jqXHR){
$('#content').html(response);
}
});
}
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
Related
I've made game in phaser (JS library for games) and i now want to make the scoretable with JS/PHP. What interest me is to pass a variable from js to php to update the database. I've read many topics and all the answers lead to AJAX and this example:
function score_submitting() {
var var_data = "Hello World";
$.ajax({
url: "submit.php",
type: "GET",
data: { var_PHP_data: var_data },
});
}
But it's not working. Im sure that the function can be called, cause when I put alert there, it works. But with AJAX happens nothing. The file is in the middle, cause it comes from game:
(HTML)
(...)
<body>
<center>
<div id="gra">
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript" src="create.js"></script>
<script type="text/javascript" src="update.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</div>
</center>
</body>
(...)
Thanks for answers!
If you are using GET request you should make your request like that :
function score_submitting() {
var var_data = "Hello World";
$.ajax({
url: "submit.php?mydata="+var_data,
type: "GET"
});
}
Or you can use POST request if you don't want to pass your parameters in URL.
You can put success and error function for testing your code like following
you can also fetched data that is returned from ajax call as returnedData
function score_submitting() {
var var_data = "Hello World";
$.ajax({
url: "submit.php",
type: "GET",
data: { var_PHP_data: var_data },
success:function(returnedData)
{
alert('success');
},
error:function()
{
alert('Error');
},
});
}
I am using an AJAX request to get some data fetched from the database. There are four .js files that I have included in the HTML page. They are
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jqueryui.js"></script>
<script type="text/javascript" src="scripts/framework.plugins.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".buttonid").click(
function(){
$.ajax({ //create an ajax request to load_page.php
type: "POST",
url: "php/fetch_candidates.php",
async: true,
dataType: "html", //expect html to be returned
error: function(){
return true;
},
success: function(response){
$("#responsecontainer").html(response);
//alert(response);
}
});
});
});
</script>
This doesn't work. But if I remove
<script type="text/javascript" src="scripts/framework.plugins.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
then the AJAX starts working. How can I solve this as I need to keep all the .js files in the html page.
There is a responsecontainer div which handles the html afte rthe ajax request. The problem is only with including those two js scripts. TIA
When the other frameworks also use $ function, it might override jQuery's $ functional behaviour. But this leaves the jQuery variable untouched. So try using a closure and execute it inside an IIFE:
(function ($) {
$(document).ready(function() {
$(".buttonid").click(function () {
$.ajax({ //create an ajax request to load_page.php
type: "POST",
url: "php/fetch_candidates.php",
async: true,
dataType: "html", //expect html to be returned
error: function(){
return true;
},
success: function(response){
$("#responsecontainer").html(response);
//alert(response);
}
});
});
});
})(jQuery);
This will translate all the $ into jQuery's original function and make sure you use $ with only jQuery and not any other framework like PrototypeJS or Scriptaculous.
Try using var jq = $.noConflict(); , just before the $(".buttonid").click(
and use jq instead of $, it looks like a conflict issue, can you please share what is inside the framework.plugins.js and custom.js
Hello there I am totally new to ASP.NET and learning it to my own. I am good at Java J2EE (Struts2 Framework)! I know how can i update or change any control/text inside any div element using struts2 and ajax code.
My Problem
Actaully, I'm trying to do the same thing in ASP.NET just for the learning! Suppose that I have a Default.aspx page with the javascript and ajax methods as:
<head runat="server">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript">
function Change() {
$.ajax({
type: "GET",
url: "temp.aspx",
dataType: "text/html;charset=utf-8",
success: function(msg) {
$("#changer").html(msg);
}
});
}
</script>
<title>Untitled Page</title>
</head>
<body>
<div id="changer">//this is the div i want to update it using ajax
Hello Old Text
</div>
<input type="button"id="but" value="Hello Changer" onclick="Change()"/>
</body>
and suppose that I have my temp.aspx as:
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<div id="changer">
Hello New Text
</div>
</body>
I just want to know if this is possible in ASP.NET because with Java I am familiar with such an operation but I don't know why this is not working in case of ASP.NET!
Any hints or clues are favorable for me, Please don't mind for my question because I am totally new to ASP.NET but I am good at Java
Thanks in Advance!
dataType must define as html like this;
function Change() {
$.ajax({
type: "GET",
url: "temp.aspx",
dataType: "html",
success: function(msg) {
$("#changer").html(msg);
}
});
}
From jQuery Docs;
dataType (default: Intelligent Guess (xml, json, script, or html))
Type: String
Additionally, you can inspect errors using error.
function Change() {
$.ajax({
type: "GET",
url: "temp.aspx",
dataType: "html",
success: function(msg) {
$("#changer").html(msg);
},
error: function(xhr, status, err) {
console.error(status, err.toString());
}
});
}
This is not related to ASP.NET or other web frameworks. It is just related to jQuery and Javascript. jQuery didn't recognise this "text/html;charset=utf-8". If you didn't use dataType, the ajax request worked successfully. It is just verification and result is interpreted according to dataType. For example, you are returning a JSON and the mime type of the your endpoint is not json (considering its mime type is html) just changing of the dataType as "JSON" you can parse the result as object.
I wrote a little script, in first example, I set dataType as HTML and in other example, I set dataType as JSON.
You could add a generec handler called Temp.ashx wich return the new text.
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("Hello New Text");
}
In your ajax call you need to specify you are expecting a text.
<script type="text/javascript">
function Change() {
$.ajax({
type: "GET",
url: "temp.ashx",
dataType: "text/plain",
success: function(msg) {
$("#changer").html(msg);
}
});
}
</script>
I have an ajax call which grabs data from a php file that connects to an api. I have a success handler that receives the data from the ajax call and then loads a function from the API library. The issue is, I want the user to click a button and then run the function inside of the success call (using the same data from the ajax call earlier).
I believe my ajax call needs to stay inside the window.onload = function(), it doesn't work if I try to run the ajax call when the user clicks the button.
<html>
<head>
<title>hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.screenleap.com/js/screenleap.js"></script>
<script>
function hello(){
alert("hi");
}
function successHandler(data){
screenleap.startSharing('DEFAULT', data, {
nativeDownloadStarting: hello
});
}
window.onload = function() {
$.ajax({
type: "POST",
url: "key.php",
data: '',
success: successHandler,
dataType: "json"
});
};
</script>
</head>
<body>
<input type="submit" value="submit" id="submit">
</body>
</html>
Please let me know how I can do this, any help would be greatly appreciated.
Update:
so I have tried adjusting my code, but for some reason nothing happens anymore when I click the button. It doesn't even shoot out my console.log confirming I had even clicked the button.
<html>
<head>
<title>hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.screenleap.com/js/screenleap.js"></script>
<script>
var dataFromServer;
function hello(){
alert("hi");
}
function successHandler(data){
dataFromServer = data;
console.log("data from server: ")
console.log(dataFromServer);
}
window.onload = function() {
$.ajax({
type: "POST",
url: "key.php",
data: '',
success: successHandler,
dataType: "json"
});
};
$("#submit").click(function(){
console.log('clicked submit');
if(dataFromServer)
{
console.log(datafromserver);
screenleap.startSharing('DEFAULT', dataFromServer, {
nativeDownloadStarting: hello
});
}
});
</script>
</head>
<body>
<input type="submit" value="submit" id="submit">
</body>
</html>
all the best,
-- 24x7
You can store data to some global variable and on button click use same variable.
var dataFromServer;
function successHandler(data){
dataFromServer = data;
}
jQuery("#submit").click(function(){
if(dataFromServer)
{
screenleap.startSharing('DEFAULT', dataFromServer, {
nativeDownloadStarting: hello
});
}
});
Update:
Instead of window.onload use jquery onload function to populate data.
http://jsfiddle.net/ZGggK/
$(function() {
$.ajax({
type: "GET",
url: "https://api.github.com/users/mralexgray",
data: '',
success: successHandler,
dataType: "json"
});
});
I am using jQuery and Ajax.
My MainFile has the following code:
<html>
<head>
<script src="Myscript.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: 'POST',
url: 'ajax.php',
success: function(data){
$("#response").html(data);
}
});
});
</script>
<body>
<div id="response">
</div>
</body>
</html>
My ajax.php get the sample data
...
MyScript.js has the following
function display (text,corner)
{
}
..
I have Myscript.js. In this, I have a function called display(text,corner). I have to call this function after executing ajax.php.
How do I do it in jQuery for the above code?
Is it possible to decide the order of execution after ajax.php and make call for display(text,corner)?
You should invoke the display function in the callback function of the Ajax Request, like such:
$.ajax({
type:'POST',
url: 'ajax.php',
success: function(data){
display(data, /* your other parameter, corner */); //Invoking your data function
}
});
In the above case, data is the response that is received from ajax.php