I have the following code.
$.ajax({
url: "insert_sp.php",
method: "POST",
data: {submit: 'true'},
success: function(response) {
var data = JSON && JSON.parse(response) || $.parseJSON(response);
alert(data);
}
});
They displayed $ReturnMessage, the result displayed retrieved from PHP using ajax after a new user is being added. Now, I want them to be displayed in a popup.
I've tried some examples on the internet and I figured I need help.
Here's the code :
PHP
<?php
if(isset($_POST['submit']))
{
$UserId=$_POST["UserId"];
$UserPwd=$_POST["UserPwd"];
$stmt = odbc_exec($conn, "CALL UserInsert('$UserId','$UserPwd',)");
if ($stmt) {
if (odbc_fetch_row($stmt)) {
$ReturnStatus=odbc_result($stmt,'ReturnStatus');
$ReturnMessage=odbc_result($stmt,'ReturnMessage');
}
if(isset($ReturnStatus) && $ReturnStatus==1) {
$ReturnMessage=odbc_result($stmt,'ReturnMessage');
}
}
$ReturnMessage = utf8_encode ($ReturnMessage);
echo json_encode($ReturnMessage);
}
?>
Here the script I tried to implement the popup. There is no error but the popup didn't come out.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
Script
function showPopup() {
$("#popup").dialog({
autoOpen: true,
resizable: false,
height: 'auto',
width: 'auto',
modal: true,
draggable: true
});
}
function closePopup() {
$("#popup").dialog('close');
}
function submit(data) {
$.ajax({
url: "insert_sp.php",
method: "POST",
data: {submit: 'true'},
success: function(response) {
{
showPopup();
$('#popup').html(response);
$("#popup").dialog('open');
var data = JSON && JSON.parse(response) || $.parseJSON(response);
alert(data);
}
});
}
Related
we are using javascript code to load more event on photo gallery, and on each thumb click we are opening the gallery in fancybox. initial load thumbs is working with fancybox. but after load more button click we are returning partial view from controller and AJAX and when we are click on new thumb to open the gallery its open in blank new tab like href. kindly let us know the issue, we are giving the code here. Any help appreciated.
<link href="/css/jquery.fancybox.css" rel="stylesheet" />
<link href="/css/photo-gallery.css" rel="stylesheet" type="text/css">
<section id="p-tab-item-1">
#Html.Partial("PhotoGalleryList", new ViewDataDictionary { {"CatParameter", "Gujarati" }})
</section>
See More....
#* Load more coding*#
<script type="text/javascript" src="/scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.fancybox.js"></script>
<script type="text/javascript">
$("input[id=p-tab-1]").click(function () {
pageIndx = 1;
if (Gtabflg == false) {
$("#loadMoreBtnG").show();
loadImage('#CurrentPage.Id', 'Gujarati', pageIndx)
}
$("#loadMoreBtnE").hide();
Gtabflg = true;
Etabflg = false;
});
});
//Initial Image load
function loadImage(pageNo, thumbType, pageIndx) {
$.ajax({
type: "POST",
url: "/umbraco/surface/Controller/GalleryImages/",
dataType: "html",
data: { pgParam: pageNo, catparam: thumbType, index: pageIndx },
success: function (data) {
if (thumbType == "Gujarati") {
$('#p-tab-item-1').html(data);
}
},
error: function (result) {
console.log(result);
alert(result);
}
});
}
function LoadMore(){
$.ajax({
type: "POST",
url: "/umbraco/surface/Controller/GalleryImages/",
dataType: "html",
data: { pgParam: pageNo, catparam: thumbType, index: pageIndx },
success: function (data) {
if (thumbType == "Gujarati") {
$('#p-tab-item-1').append(data);
if (pageIndx == gujmax) {
$("#loadMoreBtnG").hide();
}
}
}
},
error: function (result) {
console.log(result);
alert(result);
}
});
}
$('#imgGallery').click(function(){
$(".fancybox-thumb").fancybox({
prevEffect: 'none',
nextEffect: 'none',
helpers: {
title: {
type: 'over'
}
}
});
});
// thumb click load lightbox image
function GetImages(nodeid){
$.ajax({
type: "POST",
url: "/umbraco/surface/Controller/GetImages/",
dataType: "html",
data: { imgParam: nodeid },
success: function (result) {
$('#imgGallery').html('');
$('#imgGallery').html(result);
$( "#imgGallery" ).click();
$( "#imgGallery a:first" ).click();
},
error: function (result) {
console.log(result);
alert(result);
}
});
}
</script>
}
partial view code:
#item.GetPropertyValue("title")
GalleryImage view code:
I'm hoping I can get some help on working with jquery easy autocomplete. I am trying to create a url function that calls an html page that has a javascript xmlrpc function, and returns a list of name in json format. All I get in the web console is:WARNING: Fail to load response data.
Query Page:
<html>
<script src="./js/jquery-3.1.1.min.js" type="text/javascript" ></script>
<script src="./js/jquery.xmlrpc.js" type="text/javascript" ></script>
<body>
<p id="display"></p>
</body>
<script>
$(document).ready(function() {
var url = "https://url.to.my.api/nameapi";
$.xmlrpc({
url: url,
methodName: 'API.FullNameQuery',
success: function(response, status, jqXHR) {
var resp = response + '';
document.getElementById('display').innerHTML = resp;
},
error: function(jqXHR, status, error) { console.log("Error getting information:" + error) }
});
});
</script>
</html>
Easy Autocomplete page:
<html>
<script src="./js/jquery-3.1.1.min.js" type="text/javascript" ></script>
<script src="./js/jquery.easy-autocomplete.min.js"></script>
<link rel="stylesheet" href="css/easy-autocomplete.min.css">
<link rel="stylesheet" href="css/easy-autocomplete.themes.min.css">
<body>
<input id="inputOne" placeholder="Full Name" />
<input id="inputTwo" placeholder="netID" />
</body>
<script>
$(document).ready(function() {
var resp;
var options = {
url: function(phrase) {
return phrase !== "" ?
"https://url.to.my.api/get-people.html" :
"https://url.to.my.api/get-people.html";
},
getValue: "fullName",
ajaxSettings: {
dataType: "json"
},
requestDelay: 300,
theme: "blue-light",
list: {
maxNumberOfElements: 200,
match: {
enabled: true
}
}
};
$("#inputOne").easyAutocomplete(options);
});
</script>
</html>
This is hosted on an IIS server, and I can't use php like the examples show for easy autocomplete. The page returns proper json as I have validated it, so I'm a little confused what it doesn't like it.
I had kind of the same problem if I understand correctly.
I wanted to load an array of data only once, which is not how easy autocomplete works. If you use the URL it will do requests once you type letters.
1) : Create an Easy AutoComplete function that load the settings (re-usable is dope) :
function autoComplete(data_src) {
return {
data: loadManufacturer(data_src),
getValue: "name",
theme: "bootstrap",
list: {
match: {
enabled: true
},
showAnimation: {
type: "fade", //normal|slide|fade
time: 200,
callback: function () {}
},
hideAnimation: {
type: "slide", //normal|slide|fade
time: 200,
callback: function () {}
}
}
};
}
2) : Store the datas in a var
function loadManufacturer(url) {
var tmp = null;
$.ajax({
'async': false,
'type': "GET",
'global': false,
'dataType': 'json',
'url': url,
'success': function (data) {
tmp = data;
}
});
return tmp;
}
3) Call your function in an input :
$("#search_product_manufacturer").easyAutocomplete(
autoComplete(
$("#search_product_manufacturer").attr('data-src')
)
);
You are using Duckduckgo search of easyAutocomplete.
Change your code as follows:
var options = {
.....
ajaxSettings: {
data: {
dataType: "jsonp"
}
},
.....
}
for other Ajax setting, read Ajax settings guide
I have some problem, 'query in views undefined'. How can I solve it ?
Javascript
function search() {
var query_value = $('input#name').val();
if (query_value !== '') {
$.ajax({
type: "POST",
url: <?php echo base_url()?>
"index",
data: {
query: query_value
},
cache: false,
success: function(html) {
$("table#resultTable tbody").html(html);
}
});
}
return false;
}
javascript in views
$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
link in html
<script type="text/javascript" src="<?php echo base_url()?>assets/scripts/triggers.js"></script>
This is my Json function. Using doAjax function i access the value from controller and i gives me the value.
function doAjax(type, url, data, callback) {
$.ajax({
type: type,
url: url,
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
callback(data);
},
failure: function (errMsg) {
alert(errMsg);
}
});
}
here is my jquery code on button click. when i use debugger it have the values.
$('.btn-setting').click(function () {
var data = "";
doAjax("GET", "/Dashboard/OrderDetails/", data, function (result) {
data = result;
for (var i = 0; i < 1; i++) {
var Html = "<ul><li><span>Name</span></li><li>??Name??</li></ul><ul><li><span>AirCraft Type</span></li><li>??AirCraftType??</li></ul>;
Html = Html.replace("??Name??", data.Title + " " + data.FirstName + " " + data.LastName);
Html = Html.replace("??AirCraftType??", data.AirCraftType);
}
});
});
and here is my div and i want to show my json value in div popup.
<div class="modal hide fade" id="myModal">
<div class="modal-body">
</div>
</div>
So please help me to get the values on popup.
Thanks in advance
assuming you want to put the content inside modal-body,
using jquery:
$('.modal-body').html('html string')
using javascript:
document.getElementsByClassName('modal-body')[0].innerHTML='html string'
Try like this
success: function (data) {
$('.modal-body').dialog();
}
or you can append data
var data = [
{title:'tt', FirstName:'name first', LastName:'last name', AirCraftType:'Air Craft'},
{title:'tt1',FirstName:'name first1',LastName:'last name1',AirCraftType:'Air Craft 1'}
];
var Html = "";
$(data).each(function(i, value){
Html = Html+ here your code ;
//here you get value.title ,value.FirstName ...
});
$('div.modal-body', $('#myModal')).html(Html);
Use the open function to load your AJAX result in your dialog.
$('.btn-setting').click(function ()
$("#myModal").dialog({
title: 'Dialog Title',
autoOpen: false,
resizable: true,
height: 350,
width: '550px',
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$.ajax({
url: url //Your AJAX call URL,
cache: false,
context: this,
success: function (result) {
$(this).html(result);
}
});
},
close: function (event, ui) {
}
}
});
});
I am attempting to load dynamic data based on the specific URI segment thats on the page.
Heres my Javascript:
$(document).ready(function() {
$(function() {
load_custom_topics();
});
$('#topics_form').submit(function() {
var topic = document.getElementById('topics_filter').value
$.ajax({
type: "POST",
url: 'ajax/update_session_topic',
dataType: 'json',
data: { topic: topic },
success: function(){
load_custom_topics()
}
});
return false;
});
function load_custom_topics(){
$.ajax({
type: "POST",
url: 'ajax/load_custom_topics',
dataType: 'json',
data: {},
success: function (html) {
$('div.topics_filter').html(html['content']);
get_threads();
}
});
}
function get_threads(){
var page = document.getElementById('page').value
$.ajax({
type: "POST",
url: 'ajax/get_threads',
dataType: 'json',
data: {page: page},
success: function (html) {
$('div#thread_list').html(html['content']);
}
});
}
});
So, as you can see, on page load, it kicks off load_custom_topics which runs just fine. Its then supposed to call get_threads(). This is where the thing stops, and I get no data.
Get_threads()
public function get_threads()
{
$session = $this->session->userdata('active_topic');
if ($this->input->post('page') == '1')
{
$data['list'] = $this->right_model->thread_list_all();
$data['test'] = "all";
} else {
$data['list'] = $this->right_model->thread_list_other($session);
$data['test'] = "not all";
}
if ($data['list'] == FALSE)
{
$content = "no hits";
} else {
$content = $this->load->view('right/thread_list', $data, TRUE);
}
$data['content'] = $content;
$this->output->set_content_type('application/json')->set_output(json_encode($data));
}
While I create the 'page' dynamically, the HTML outputs to this:
<div name="page" value="1"></div>
Any reason why get_threads() is not running?
This does not have an ID. It has a name.
<div name="page" value="1"></div>
This means that your request for getElementById is failing. So this line of code should be showing a TypeError in your console.
var page = document.getElementById('page').value