.html() not displaying fields - javascript

I am currently trying to use .html() to display out the resident id, name and telephone number. However, there is nothing appearing on my page. When I check my console for any errors, there were none. There is no error with the php and residentid is in the localstorage.
html
<div role="main" class="ui-content" id="main-ui">
<div id="txtresidentid"></div>
<div id="txtresident_name"></div>
<div id="txtresident_telephone_home"></div>
</div>
javascript
(function () {
var residentid;
var resident_name;
var resident_telephone_home;
$(document).ready(function () {
getProfile();
});
function getProfile() {
var url = serverURL() + "/getresidentprofile.php";
var JSONObject = {
"residentid": localStorage.getItem("residentid")
};
$.ajax({
url: url,
type: 'GET',
data: JSONObject,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (arr) {
_getProfileResult(arr);
},
error: function () {
validationMsg();
}
});
}
function _getProfileResult(arr) {
residentid = arr[0].residentid;
resident_name = arr[0].resident_name;
resident_telephone_home = arr[0].resident_telephone_home;
$("#txtresidentid").html("Residentid : " + residentid);
$("#txtresident_name").html("Name: " + resident_name);
$("#txtresident_telephone_home").html("Telephone(Home): " + resident_telephone_home);
}
})();

Try this:
$("#txtresidentid").append("Residentid : " + residentid);
$("#txtresident_name").append("Name: " + resident_name);
$("#txtresident_telephone_home").append("Telephone(Home): " + resident_telephone_home);

Related

Unable to display results using jquery ajax

I am trying to implement a comment feature on my page. I have an itemID 123. on that page, I would like to display the comments that people have posted about itemID 123. However as of now, I am unable to display these comments on my page. There are no errors in the console.
Javascript:
function mywall() {
var url = serverURL() + "/viewwall.php"; //execute viewwall.php in the server
itemID = decodeURIComponent(getUrlVars()["itemID"]);
var JSONObject = {
"itemID": decodeURIComponent(getUrlVars()["itemID"])
};
$.ajax({
url: url,
type: 'GET',
data: JSONObject,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (arr) {
_mywallresult(arr); //success. execute _mywallresult()
},
error: function () {
validationMsg();
}
});
}
function _mywallresult(arr) {
var i;
//for all the shouts returned by the server
for (i = 0; i < arr.length; i++) {
//append the following:
//<b>
//time of posting </b>
//<br/>
//the message
//<br>
//userid
$("#wallcontentset").append("<b>" + arr[i].timeofposting + "</b><br/>" + arr[i].message + "<hr>" + arr[i].userid);
}
}
HTML:
<div data-role="content" class="ui-content" id="wallcontentset"></div>
Try the following :
success: function (response) {
_mywallresult(response.arr);
},

Submit HTML form data to IFTTT webhook with Javascript

I have a HTML form. When submitting the form I would like to send the data to an IFTTT webhook.
I tried two options, but it seems like they are not working.
HTML submit button:
<li class="buttons"><input name="klantnummer" type="hidden" value="1234567890" />
<button onclick="sendToIFTTT123()">Verstuur</button></li>
The first code:
<script> function sendToIFTTT123(){
var url = "https://maker.ifttt.com/trigger/[event]/with/key/[key]";
var text = {"value 1" : document.getElementById("element_2_1").value + " - " + document.getElementById("element_2_2").value + " - " + document.getElementById("element_2_3").value};
$.ajax({
data: 'payload=' + JSON.stringify({
"text": text
}),
dataType: 'json',
processData: false,
type: 'POST',
url: url
});
}
</script>
Second code:
<script>
function sendToIFTTT() {
var content = {"value1" : document.getElementById("element_2_1").value + " - " + document.getElementById("element_2_2").value + " - " + document.getElementById("element_2_3").value};
var url = "https://maker.ifttt.com/trigger/[event]/with/key/[key]";
var options = {
"method" : "post",
"contentType" : "application/json",
"payload" : JSON.stringify(content)
};
return UrlFetchApp.fetch(url, options);
}</script>
Anyone any idea who to get this working?

Why is my form still reseting when I submit with JavaScript?

I am submitting a form with JavaScript.
Here is my form:
<form id="rolesSelectForm" class="stdform" action="" onsubmit="return submitForm()">
<p>
<label>Select User</label>
<span class="field">
<select name="selectUser" id="selectUser">
#foreach (var item in Model.Users)
{
<option value="#item.Id">#item.UserName</option>
}
</select>
</span>
</p>
<p class="stdformbutton">
<button class="submit radius2" type="submit">Save</button>
</p>
And here is my script:
<script>
function submitForm() {
var usersRoles = new Array;
jQuery("#dualSelectRoles2 option").each(function () {
usersRoles.push(jQuery(this).val());
});
var model = new Object();
model.userId = jQuery('#selectUser').val();
model.rolesList = usersRoles;
console.log('model: ' + 'user: ' + model.userId + 'roles: ' + model.rolesList);
console.log('JSON: ' + JSON.stringify(model));
jQuery.ajax({
type: "POST",
url: "#Url.Action("AddUser")",
dataType: "json",
contentType: "application/json",
data: JSON.stringify(model),
success: function (data) { showSuccessMessage(data); },
failure: function (errMsg) {
alert(errMsg);
}
});
}
//Shows the success message
function showSuccessMessage(data) {
alert(data);
}
Now when I click the button, the page does refresh and I never get my alert.
In chrome its at least makes the ajax post request but in Firefox, it just reloads the page before the post is even made.
From what I read if I made my form return the JavaScript function, it would not reload. However this is not my case.
From what I read if I made my form return the java script function it would not reload.
No. You have to return false.
This is typically done by returning the return value of the function, and then returning false from that function. A lot of the time this will be done conditionally (since often you will be testing the user input to make sure it is OK before allowing the form to submit.)
You don't have a return statement in your function.
Please add return false in function
function submitForm() {
var usersRoles = new Array;
jQuery("#dualSelectRoles2 option").each(function () {
usersRoles.push(jQuery(this).val());
});
var model = new Object();
model.userId = jQuery('#selectUser').val();
model.rolesList = usersRoles;
console.log('model: ' + 'user: ' + model.userId + 'roles: ' + model.rolesList);
console.log('JSON: ' + JSON.stringify(model));
jQuery.ajax({
type: "POST",
url: "#Url.Action("AddUser")",
dataType: "json",
contentType: "application/json",
data: JSON.stringify(model),
success: function (data) { showSuccessMessage(data); },
failure: function (errMsg) {
alert(errMsg);
}
});
return false;
}

How to correctly post data with ajax into div?

Script:
function buttonBuild(id, building, nick)
{
$("#BuildedBox").ajax({
type: "POST",
url: "BlockEditor/build.php",
data: 'block_id=' + id + '&building=' + building + '&nick=' + nick,
cache: false,
success: function(response)
{
alert("Record successfully updated");
$.load("#BuildedBox")
}
});
}
build.php:
include_once("$_SERVER[DOCUMENT_ROOT]/db.php");
$block_id = $_GET['block'];
$building = $_GET['building'];
$nick = $_GET['nick'];
echo"$block_id - $building - $nick";
index.php:
<a href=\"#\" onClick=\"buttonBuild(k152, digger, Name);\" >[BUILD]</a>
<div id="BuildedBox"></div>
seems my script wont work. what i have done wrong?
check this out
function buttonBuild(id, building, nick)
{
$.ajax({
type: "POST",
url: "BlockEditor/build.php",
data: 'block_id=' + id + '&building=' + building + '&nick=' + nick,
cache: false,
success: function(response)
{
alert("Record successfully updated");
/***************/
$("#BuildedBox").html(response);
/***************/
}
});
}
var weightd = $("#weight").val();
var user_id = 43;
$.ajax({
type: "POST",
url:"<?php bloginfo('template_directory')?>/ajax/insert.php",
data: { weight:weightd,user_ids:user_id},
success:function(result){
$("#result1").html(result);
});
<div id="result1">Result div</div>
change $.load("#BuildedBox") to $("#BulderBox").html(response).
When you ask the script for data via ajax, the data provided gets into the "response" variable. As you want to write this data into the div, you must use the ".html" method.
Easier using "load" in this way:
function buttonBuild(id, building, nick)
{
$("#BuildedBox").load("BlockEditor/build.php?block_id=" + id + "&building=" + building + "&nick=" + nick);
}
The "load" method loads data from the server and writes the result html into the element: https://api.jquery.com/load/
EDIT:
As #a-wolff says in the comment, to use POST in load, you should construct like this:
function buttonBuild(id, building, nick)
{
$("#BuildedBox").load("BlockEditor/build.php",{
block_id:id,
building:building,
nick:nick
});
}

How to pass url parameters in jQuery

I am implementing the jQuery Easy UI plugin for checkbox tree. I am having a problem while loading the node data from my action class. The url property does not seem to accept the parameters -
If i give url: '/webapp/fetchData' i'm able to get the data. But if I give
url: '/webapp/fetchData?nodeId='+nodeId
my action class is not able to get the nodeId parameter.
Any solution?
Edit Code ported from comment:
onExpand: function(node) {
alert("inside expand");
var nodeId = node.id;
url: '/webapp/fetchdata?nodeId='+nodeId ;
}
Try this:
Using POST
function DoAction( id, name )
{
$.ajax({
type: "POST",
url: "someurl.php",
data: "id=" + id + "&name=" + name,
success: function(msg){
alert( "Data Saved: " + msg );
}
});
}
Using GET
function DoAction( id, name )
{
$.ajax({
type: "GET",
url: "someurl.php",
data: "id=" + id + "&name=" + name,
success: function(msg){
alert( "Data Saved: " + msg );
}
});
}
Here is what works for me:
Solution 1: from static HTML
javascript: on the caller side:
function onBeforeLoad (node, data)
{
data.Name=name;
}
HTML on the caller side:
<ul id="ScriptTree1" class="easyui-tree" lines="true" data-options="onBeforeLoad:onBeforeLoad, lines:true, processData:false" url="someural.php"/>
Solution 2: from dynamic code:
HTML
<ul id="ScriptTree2" class="easyui-tree" animate="true"></ul>
Javascript function triggered on any specific event:
function filltree ()
{
$('#ScriptTree2').tree
({
dataType:'json',
method:'POST',
lines: true,
processData:false,
onBeforeLoad: function (node,param) { param.Name=name; return true;},
onLoadError: function (dom)
{
if (!String.prototype.trim)
{
String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};
}
var sResponse = new String (arguments[0].responseText);
alert ('Compl: ' + arguments[1] + ' ' + arguments[2].description + ' ' + arguments[2].name + '\r\nAnswer:\r\n' + sResponse.trim() + '\r\nQuery: \r\n' + decodeURIComponent(arguments.caller.caller.caller[0].data));
return true;
},
url:'someurl.php'
});
}
and callee script:
someurl.php
<?
if ($_POST['Name'] != '') {$Name=$_POST['Name'];} else {$Name='';};
if ($_POST)
{
$kv = array();
foreach ($_POST as $key => $value)
{
$kv[] = "$key=$value";
}
$query_string = join(" | ", $kv);
}
echo '[{"id":100,"text":"params","state":"open","children":[{"id":104,"text":"query_string: '.$query_string.'","state":"open"}]}]';
?>

Categories