Replacing view data with edit form - javascript

Basic profile view comes from index.cs.asp?Process=ViewB_Profile.
When users click on edit profile, dialog box opens to edit the basic profile.
But I want the edit form to replace basic profile view data.
How can I do it, is there a plugin for it?
Thank you very much!
edited!
<script type="text/javascript">
$(document).ready(function() {
$(function V_Basic_Profile() {
$.ajax({
type: "GET",
url: "content/profile/index.cs.asp?Process=ViewB_Profile",
success: function(data) {
$("#B_Profile").append(data);
},
error: function (data) {
$("#B_Profile").append('.');
}
});
});
$(function E_Basic_Profile() {
$.ajax({
type: "GET",
url: "content/profile/index.cs.asp?Process=ViewB_Profile",
success: function(data) {
$("#B_Profile").append(data);
},
error: function (data) {
$("#B_Profile").append('.');
}
});
});
});

It would be fairly trivial to toggle two different divs in jQuery:
<div id="profile">
...
</div>
<form id="profileForm">
...
</form>
<script>
// ...
success: {
$('#profileForm').html(data).show();
$('#profile').hide();
}
// ...
</script>
Edit: Try this
<div id="profile_view">Loading...</div>
<div id="profile_form" style="display:none; ">Loading...</div>
Edit Profile
<script>
function loadProfileView()
{
$.get("content/profile/index.cs.asp?Process=ViewB_Profile", function(html) {
$('#profile_view').html(html).show();
$('#profile_form').hide();
});
}
function loadProfileForm()
{
$.get("content/profile/index.cs.asp?Process=EditB_Profile", function(html) {
$('#profile_form').html(html).show();
$('#profile_view').hide();
});
}
$(loadProfileView);
</script>

Related

How to show/hide div using ajax?

At the moment I can click on button to get data and show div with comment replies, something like on Youtube, but I want to make it disappear by clicking again. Is this possible this way?
$(document).ready(function () {
$(".showReplies").click(function () {
let id = $(this).attr('id');
$.ajax({
url: $(this).attr("data-href"),
type: 'get',
success: function (data) {
console.log(data);
console.log(id)
$(`#${id}.replies`).html(data);
}
})
});
});
I tried to add display: none and then change it to block, or setting value='show/hide' and then use toggle('show') but it doesn't work. Thanks for any help in advance.
$(document).ready(function () {
$(".showReplies").click(function () {
let id = $(this).attr('data-id');
$(`#${id} .replies`).html("Loading..");
setTimeout(() => {
$.ajax({
url: `https://jsonplaceholder.typicode.com/todos/${id}`,
type: 'get',
success: function (data) {
$(`#${id} .replies`).text(JSON.stringify(data));
}
})
}, 1000);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1">
<div class="replies"></div>
<button class="showReplies" data-id="1">Load Replies</button>
</div>
<div id="2">
<div class="replies"></div>
<button class="showReplies" data-id="2">Load Replies</button>
</div>
Here is a example, but your code looks wrong. it does not make sense to me.
beforeSend: function(data) {
$("#hideID").hide();
},
success: function (data) {
console.log(data);
console.log(id)
$(`#${id}.replies`).html(data);
}

fancybox not working after ajax partial view load

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:

How to get total length of JSON object using ajax

I have JSON in URL and I am showing the total length of JSON array, but not showing the length of an object. Please view the code and correct the code.
$(document).ready(function () {
$.ajax({
url: "/hehe/GetAllBus",
data: "",
type: "GET",
dataType: "json",
success: function (dataBus1) {
loaddataBus(dataBus1);
},
error: function () {
alert("Failed! Please try again.");
}
});
});
function myFunction() {
var fruits = dataBus1;
document.getElementById("demo12").innerHTML = fruits.length;
}
Print the length of array
<code>
<body onload="myFunction()">
<p id="demo12"</p>
</body>
</code>
change:
success: function (dataBus1) {
loaddataBus(dataBus1);
},
...
function myFunction() {
var fruits = dataBus1;
document.getElementById("demo12").innerHTML = fruits.length;
}
to:
success: function (dataBus1) {
myFunction(dataBus1);
},
...
function myFunction(dataBus1) {
var fruits = dataBus1;
document.getElementById("demo12").innerHTML = fruits.length;
}
You forget to close the p tag (missing symbol '>' after "demo12")
<code>
<body onload="myFunction()">
<p id="demo12"></p>
</body>
</code>
$(document).ready(function () {
$.ajax({
url: "/hehe/GetAllBus",
data: "",
type: "GET",
dataType: "json",
success: function (dataBus1) {
loaddataBus(dataBus1);
},
error: function () {
alert("Failed! Please try again.");
}
});
});
function loaddataBus(fruits) {
document.getElementById("demo12").innerHTML = fruits.length;
}
You don't even need the onload on body:
<body>
<p id="demo12"></p>
</body>
Try this. In your code you have written ajax inside ready event which will fire after onload so data is not available.
function myFunction() {
$.ajax({
url: "http://mysafeinfo.com/api/data?list=englishmonarchs&format=json",
data: "",
type: "GET",
dataType: "json",
success: function(dataBus1) {
var fruits = dataBus1;
document.getElementById("demo12").innerHTML = dataBus1.length;
},
error: function() {
alert("Failed! Please try again.");
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code>
<body onload="myFunction()">
<p id="demo12"</p>
</body>
</code>
If your using jQuery, which it looks like, there is a easier and faster way:
Using $.getJSON.
JS (can be in <head> or in <body> :
<script>
$(document).ready(function(){
$.getJSON("/hehe/GetAllBus", function(data){
$('#demo12').html(data.length);
});
});
</script>
HTML:
<body>
<p id="demo12"></p>
</body>
For more feedback:
$(document).ready(function(){
$.getJSON("/hehe/GetAllBus", function(){
console.log("fetched json");
})
.done(function(data){
$('#demo12').html(data.length);
});
.fail(function(){
console.log("error");
});
});

Open Javascript Id on a new window

Am trying to open an id on a new window, this is my code:
<script type="text/javascript">
$(document).ready(function () {
$('.myButton').click(function () {
$.ajax({
type: "GET",
url: $(this).parent().data("url"),
data: { callNumber: $(this).parent().data("callno") },
success: function (data) {
$("#CallDetail").html(data);
},
});
});
});
</script>
When i click .myButton class it opens the id:
<div id="CallDetail"></div>
thats located on the home page.
What i need is to open on a new window, i have tried doing this via the link :
<div data-callno='#parts.Call_Num' data-url="#Url.Action("GetCallInfo", "CallHandling" , new {target = "_blank"})">
<div class="myButton toolbarIcon">
<div class="toolbarIconText">View</div>
</div>
But no luck, at the moment it just opens in the same page i am doing this, the problem is am getting data called in the JavaScript so its trickier then i imagined. any ideas?
You can use jQuery's .find to search the returned HTML for a selector:
$(document).ready(function () {
$('.myButton').click(function () {
$.ajax({
type: "GET",
url: $(this).parent().data("url"),
data: { callNumber: $(this).parent().data("callno") },
success: function (data) {
$(data).find('#CallDetail');
},
});
});
});

how to call a function after appending it in jquery

i am appending a div using ajax and alnog with that div a function (it's a time ago function) the function needs to be called as soon as the div is appended I've tried all possible solutions but none works
my function (located in processor.php page)
<script>
$(document).ready(function () {
$('.post_the_stat').click(function(event) {event.preventDefault();
$.ajax({
type: "POST",
url: "addition_life_text.php",
data: 'final_text='+ fin_text +'&priv='+ priv + '&post_time='+post_time ,
success: function(data) {
$(".main_container").prepend(data);
}
})
})
})
</script>
the function
<script>
function ago()
{
//codeblock
}
</script>
my question:how do i call the function ago as soon as the ajax was success is appended.ive tried window.onLoad etc...
<script>
$(document).ready(function () {
$('.post_the_stat').click(function(event) {event.preventDefault();
$.ajax({
type: "POST",
url: "addition_life_text.php",
data: 'final_text='+ fin_text +'&priv='+ priv + '&post_time='+post_time ,
success: function(data) {
$(".main_container").prepend(data);
ago();
}
})
})
})
</script>
Please try above. Hopefully this will work
Try this
success: function(data) {
$(".main_container").prepend(data).go();
}
})

Categories