Open Javascript Id on a new window - javascript

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');
},
});
});
});

Related

Multiple instance jquery function with bootstrap modal

I am trying to run jquery function once modal is shown, but I close modal by clicking on the side or one close button and then open I find multiple instances of the inner function running.
<script type="text/javascript">
$(document).ready(function () {
$(".test").click(function () {
var cid = $(this).attr('cid');
$("#post-form").one('submit',function (event){
event.preventDefault();
$.ajax({
url: '{% url 'create_request' %}',
type: 'POST',
data: {
'cid': cid,
'req_num' : $('#request_number').val(),
},
success: function (data) {
console.log("success")
if (data['request']=='0')
{
alert("Request is already there");
}
else if(data['request']=='1')
{
alert("Not enough components:(");
}
$("#exampleModal").modal('hide');
}
})
})
})
})
</script>
test is the class given to button which opens bootstrap modal
post-form is the id given to my form
Attach the submit event listener outside the click function, otherwise you will create one listener per click.
$(document).ready(function () {
$("#post-form").one('submit',function (event){
event.preventDefault();
$.ajax({
url: '{% url 'create_request' %}',
type: 'POST',
data: {
'cid': cid,
'req_num' : $('#request_number').val(),
},
success: function (data) {
if (data['request']=='0')
{
alert("Request is already there");
}
else if(data['request']=='1')
{
alert("Not enough components:(");
}
$("#exampleModal").modal('hide');
}
})
})
})
This will of course break the context for this in $(this).attr('cid');, so you will have to update that to reflect the changes. I'd suggest placing it inside a hidden field in your form, or as an attribute to your modal, whatever is more convenient.

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);
}

My draggable function has broken

I had a draggable function and it was working nicely. But when I add NO-2 function, my draggabe function and my close button(button which included the div) broke down. Need help.
NO-1: Draggable function:
$(function () {
$('#draggable').draggable({
containment: 'window'
});
$('#draggable').draggable({
handle: '.yeniyorum_baslik'
});
});
NO-2: This function for post data without refresh the available page.
function kayitol() {
$('.yeniyorum_div, .arka_fon').hide() $('#urunsayfaid').removeClass('noscroll');
$('.yorum_basarili').fadeIn() $('.yorum_basarili').fadeOut(4000) var veriler = $('.yorumform').serialize();
$.ajax({
type: "POST",
url: "yorum_ekle.php",
data: veriler,
})
};
try
function kayitol() {
$('.yeniyorum_div, .arka_fon').hide() $('#urunsayfaid').removeClass('noscroll');
$('.yorum_basarili').fadeIn();
$('.yorum_basarili').fadeOut(4000);
var veriler = $('.yorumform').serialize();
$.ajax({
type: "POST",
url: "yorum_ekle.php",
data: veriler,
})
};

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();
}
})

Replacing view data with edit form

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>

Categories