In my website (net core 2. 2) I have this code so to assign tasks to clerks
<script>
$(document).on("click", ".assignToClerk", function () {
var Assignment =
{
ID: $('#UserID').val(),
TaskID: #Model.RequestID,
}
$.ajax({
type: "POST",
url: "/Request/NewTask/",
dataType: "json",
data: Assignment,
processData: true,
success: $.notify("success assign")
});
});
</script>
The problem is that my button works only if I refresh the page.
Any idea? thank you
Try this way:
<button class="assignToClerk">
Click
</button>
$(document).ready(function() {
$('.assignToClerk').on("click", function () {
alert("Testing")
//code
});
});
Put the code inside
$( document ).ready(function() {
//your code
});
Add the scripts in the body of the page instead of the head of the page.
Try after code.
function test(){
alert("Hi");
}
window.onload = function(){
document.getElementById('btn').click();
var scriptTag = document.createElement("script");
scriptTag.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js";
document.getElementsByTagName("head")[0].appendChild(scriptTag);
}
<button id="btn" onclick="test()">Click me</button>
Related
I am working on a random quote app. Quote is display when click a new quote button but I want quote already display when page loads. I invoked a function but it still does not work. Thank you!
Here is my code:
$(document).ready(function() {
function randomQuote() {
$('#get-quote').on('click', function(e){
e.preventDefault();
// Using jQuery
$.ajax( {
url: "http://quotes.stormconsultancy.co.uk/random.json",
dataType: "jsonp",
type: 'GET',
success: function(json) {
// do something with data
console.log(json);
data = json[0];
$('#quotation').html('"'+json.quote+'"');
$('#author').html('-- '+json.author+' --');
$('a.twitter-share-button').attr('data-text',json.quote);
},
});
});
$('#share-quote').on('click', function() {
var tweetQuote=$('#quotation').html();
var tweetAuthor=$('#author').html();
var url='https://twitter.com/intent/tweet?text=' + encodeURIComponent(tweetQuote+"\n"+tweetAuthor);
window.open(url)
});
}
randomQuote();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try removing click listener. inside randomeQuote() remove click listener.
keep your click listener out side of document.ready
$(document).ready(function() {
randomQuote(); // call initially and get random quote
});
function randomQuote() {
$.ajax( {
url: "https://quotes.stormconsultancy.co.uk/random.json",
dataType: "jsonp",
type: 'GET',
success: function(json) {
// do something with data
data = json[0];
$('#quotation').html('"'+json.quote+'"');
$('#author').html('-- '+json.author+' --');
$('a.twitter-share-button').attr('data-text',json.quote);
},
});
$('#share-quote').on('click', function() {
var tweetQuote=$('#quotation').html();
var tweetAuthor=$('#author').html();
var url='https://twitter.com/intent/tweet?text=' + encodeURIComponent(tweetQuote+"\n"+tweetAuthor);
window.open(url)
});
}
$('#get-quote').on('click', function(e){
e.preventDefault();
randomQuote();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="get-quote">get quote</button>
<div id="quotation"></div>
Remove the onClick listeners so that when you call the function it will update directly.
function randomQuote() {
$.ajax( {
...
success: function(json) {
... //do updates
},
});
}
In my project I have this code who takes results from mysql query and put it into comment DIV and a jquery code who takes me more results when I scroll down my page via a another page code
<body>
<div id="container">
<div class="comment">
<div id="comm">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var offset = $('.comment:last').offset();
$(window).scroll(function(){
if((offset.top-$(window).height() <= $(window).scrollTop())
&& load==false && ($('.comment').size()>=5) &&
($('.comment').size()!=$('.nb_com').text())){
var theme = $('.comment').attr('idtheme');
$.ajax({
url: 'ajax_scroll.php',
type: 'get',
data: 'theme='+theme,
success: function(data) {
$('.comment:last').after(data);
offset = $('.comment:last').offset();
}
});
}
});
});
</script>
I would like to apply this javascript below for my comment DIV but it works only for the DIVS before I scroll down the page
$('#confirmdelete a').click(function(){
var id_comm=$(this).attr('id');
if(confirm("Delete?")) {
$.ajax({
url: 'commentsdelete.php',
type: 'post',
async: false,
data:{
'id_comm': id_comm
},
success:function(){
}
});
}
else
{
}
return false;
});
How I can apply this javascrip code for all the DIVs (before scrolling and after scrolling)
Thanks.
Solution 1:
Add your click function to the global scope, if the content is changed reassign:
var onclickfunc=function(){
alert("clicked");
}
$('#confirmdelete a').click(onclickfunc);
//later in your ajax
sucess:function(data){
//add the content
//reassign:
$('#confirmdelete a').click(onclickfunc);
}
Solution 2(even better):
Detect if a parent element was clicked, and than check if it was a confirmdelete element:
$(document).on("click","#confirmdelete a",function(){
//yourcode here
});
See: http://api.jquery.com/on/
I've recently discovered a problem when submitting forms using TinyMCE Jquery-plugin. When trying to submitting normal input fields such as text fields, select boxes and so on, everything works as it should. However, using TinyMCE on a textarea doesn't work correctly; i have to submit two times to save. Is there a fix for this particular problem?
<script>
$(function () {
$('.message').removeClass('hidden');
});
$(function () {
$('form').on('submit', function (e) {
//save button so we can use later
var my_button = $(this).find("button");
//give button loading state
my_button.button('loading');
e.preventDefault();
var note = $("#content").text();
$.ajax({
type: 'POST',
dataType:'html',
url: '/m/core/_processEditEntry.php',
data: $('form').serialize(),
success: function () {
//reset state
my_button.button('reset');
$(".message").fadeIn(0);
$(".message").delay(5000).fadeOut('slow');
}
});
});
});
</script>
HTML
<textarea id="cotent" name="content" style="width:100%"><?php echo $entry->content; ?></textarea>
Answer to my question.
I needed to add tinyMCE.triggerSave();
<script>
$(function () {
$('form').on('submit', function (e) {
//save button so we can use later
var my_button = $(this).find("button");
//give button loading state
my_button.button('loading');
e.preventDefault();
tinyMCE.triggerSave();
var note = $("#content").text();
$.ajax({
type: 'POST',
dataType:'html',
url: '/m/core/_processEditEntry.php',
data: $('form').serialize(),
success: function () {
//reset state
my_button.button('reset');
$(".message").fadeIn(0);
$(".message").delay(5000).fadeOut('slow');
}
});
});
});
</script>
I'm very new to jQuery. I need to display customer testimonials from a database on a certain time interval. Something like the one shown on this site. There is a Testimonials container on this site within which testimonials are displayed one by one from the database on a certain time period. I tried for a long time on Google but to no luck. If you know any links where I can download such a script, it will be very helpful to me. Thanks.
Well, you could look at how it's done at the site you linked, right here
(function ($) {
$(document).ready(function () {
var el = $("#testimonial");
if (el) {
RotateTestimonial();
setInterval(RotateTestimonial, 20000);
}
});
function RotateTestimonial() {
var pageUrl = "RandomTestimonial.php"
$.ajax({
type: "GET",
url: pageUrl,
cache: false,
success: function (msg) {
$("#testimonial").slideUp('slow').fadeOut(3000, function () {
var el = $("#testimonial"); //Refers to some container tag like <div> or <span> where the random message is to be written.
el.html(msg);
el.slideDown('slow').fadeIn('slow');
});
}
});
}
})(jQuery)
This code sets a 20 second timer to load HTML returned from YourPageHereReturnsHTML.aspx into the testimonial div.
<div id="testimonial">
</div>
<script>
(function($){
$(document).ready(function(){
var el = $("#testimonial");
if (el){
RotateTestimonial();
setInterval(RotateTestimonial, 20000);
}
});
function RotateTestimonial(){
var pageUrl = "YourPageHereReturnsHTML.aspx"
$.ajax({
type: "GET",
url: pageUrl,
cache:false,
success: function(msg) {
$("#testimonial").slideUp('slow').fadeOut(3000, function (){
var el = $("#testimonial");
el.html(msg);
el.slideDown('slow').fadeIn('slow');
});
}
});
}
})(jQuery)
</script>
This may be something very easy but i can't seem to get this to work and im not sure why. I have jquery installed and i am trying to get an attribute of "this" element when i click on it. Right now my code looks like this:
url = $(this).attr("href")
When I call this function by clicking on a link, it tells me that the var "url" is undefined. So obviously it is not picking up the "this" when i click on the link. I am trying to pass the href of an anchor tag to use as my variable.
What am i overlooking? Again, i know this is something very simple but i can't seem to figure it out so thank you for taking the time to help me.
Thanks.
<script type="text/javascript">
url = "push1";
$("a").live("click", function(event) {
event.preventDefault();
url = $(this).attr("href");
})
$.ajax({
type: "get",
url: "/"+url+".php",
data: "",
dataType: "html",
success: function(html){
jQuery('#Right_Content').hide().html(html).fadeIn(1000);
},
})
;
</script>
html:
<body>
<a href="push1" >Image 1</a>
<a href="push2" >Image 2</a>
<div id="Right_Content"></div>
</body>
This should work for you
$(function(){
$(".link").click(function(){
var url=$(this).attr("href");
alert(url);
return false;
});
});
Assuming you are targeting all anchor tags with a css class called "link"
Here is the working example : http://jsfiddle.net/L99mM/2/
Edit: As per your code posted in the question
You should call preventDefault after your ajax call. and there is closing brackets should be after ajax call
$("a").live("click", function(event) {
var targeturl = $(this).attr("href");
$.ajax({
type: "get",
url: "/"+targeturl +".php",
data: "",
dataType: "html",
success: function(html){
jQuery('#Right_Content').hide().html(html).fadeIn(1000);
}
}); // closing for ajax
event.preventDefault();
}); // closing for click event binding
<script type="text/javascript">
var url = "push1";
function getContent(){
$.ajax({
type: "get",
url: "/"+url+".php",
data: "",
dataType: "html",
success: function(html){
jQuery('#Right_Content').hide().html(html).fadeIn(1000);
});
}
$("a").live("click", function(event) {
event.preventDefault();
url = $(this).attr("href");
getContent();
});
getContent();
</script>
you don't need "this" for this, you need the target of the event:
$("a").live("click", function(event) {
event.preventDefault();
url = event.target.href;
})
working fiddle
http://jsfiddle.net/3LvCm/