I have a jquery function to toggle "ReplyComment" div.
function addcommentdiv() {
$('.in').click(function () {
var $this = $(this),
$reply = $this.next('.ReplyComment');
var cevapladisplay = $reply.css('display');
$reply.toggle();
});
}
addcommentdiv();
$(document).ready(function () {
addcommentdiv();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
addcommentdiv();
});
...
<ul class="chats">
<li class="in" >
blablabla
</li>
<div class="ReplyComment" id="ReplyComment">
blablabla
</div>
</ul>
This function sometimes work sometimes doesn't.Shortly not working smoothly.
I can't understand.(inside updatepanel and datalist)
It's possible that you are adding the click handlers multiple times. To avoid the issue completely, I would recommend using event delegation:
$(document).ready(function() {
$(document).on('click', '.in', function () {
var $this = $(this),
$reply = $this.next('.ReplyComment');
var cevapladisplay = $reply.css('display');
$reply.toggle();
});
});
This will prevent you from needing to rebind the events after every UpdatePanel refresh.
Related
I used ajax to load content from external file (called menu.html). Now I have my menu and when I click on a tag with href to another page which I load with AJAX call where I had my previous content (menu page loaded with ajax).
Here is git repository to this project is: https://github.com/szymonhernik/ArtHer_ajax
//----------- AJAX calls on menu clicks --------------//
(function($) {
"use strict";
var $content,
$section;
function loadMenuLink(url) {
$.ajax(url,{ dataType: "text" })
.then(function(contents){
$content.html(contents);
});
}
function stopScroll() {
$section.on('mousewheel', function() {
//do nothing-> dont load menu.html
});
}
function pageClicked(evt) {
evt.stopImmediatePropagation();
evt.stopPropagation();
evt.preventDefault();
var url = $(this).attr("href");
loadMenuLink(url);
stopScroll();
}
function bindings () {
$(document).on("click", "#menu a", pageClicked);
}
$(document).ready(function () {
$content = $('.content');
$section = $('section');
bindings();
});
})(jQuery);
I have got this small module- firstly to take the url from a tag's href using pageClicked function and then function loadMenuLink when I pass this url.
This is my html code for this page (menu page):
<div id="menu" class="menu animated fadeIn" rel="js-menu">
<div class="menu-bar animated fadeInUp">
<p>O nas</p><span>/</span>
<p>Projekty</p><span>/</span>
<p>Nasi klienci</p><span>/</span>
<p>Kontakt</p>
</div>
</div>
The problem is that after I load menu.html I can't prevent default 'mousewheel' event when I scroll-> I want to do nothing on scroll after I load menu.html.
I will upload my first ajax function, maybe you can find a problem there.
(function($) {
"use strict";
var $section,
$elements,
$content,
$arrow,
$label;
function goToMenu (e) {
e.stopPropagation();
e.stopImmediatePropagation();
e.preventDefault();
if(e.deltaY /120 > 0) {
$('.menu').fadeOut(500, function () { $(this).remove();});
$elements.removeClass("animated fadeOut not-active");
$elements.addClass("animated fadeIn");
}
else if (e.deltaY /120 < 0) {
$.ajax('menu.html',{ dataType: "text" })
.then(function(contents){
$content.html(contents);
$elements.addClass("animated fadeOut not-active");
});
}
}
function arrowToMenu (e) {
e.stopPropagation();
e.stopImmediatePropagation();
e.preventDefault();
$.ajax('menu.html',{ dataType: "text" })
.then(function(contents){
$content.html(contents);
$elements.addClass("animated fadeOut not-active");
});
}
function bindings () {
$section.on('mousewheel', goToMenu);
$arrow.on('click', arrowToMenu);
}
$(document).ready(function () {
$elements = $('.elements');
$section = $('section');
$content = $('.content');
$label = $('.label');
$arrow = $('.arrow');
bindings();
});
})(jQuery);
Here is git repository to this project is: https://github.com/szymonhernik/ArtHer_ajax
Hope that anyone can help me.
Have been trying to perform a DIV hide show on a page of my website.
It was working fine with plain javascript but noticed it was not working when simulated on mobile devices..after bit of research I changed my code to the following, is there anything wrong in it ?
<script>
$(document).ready(function() {
var portfolioDiv = document.getElementById('portfolio');
var resultsDiv = document.getElementById('results');
var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
var resultsBtn = document.getElementById('RenderResults_Btn');
//portfolioBtn.onclick = function () resultsBtn.onclick = function ()
$('#portfolioBtn').on('click touchstart', function() {
resultsDiv.setAttribute('class', 'col-md-9 hidden');
portfolioDiv.setAttribute('class', 'col-md-9 visible');
});
$('#resultsBtn').on('click touchstart', function() {
portfolioDiv.setAttribute('class', 'col-md-9 hidden');
resultsDiv.setAttribute('class', 'col-md-9 visible');
});
});
</script>
Here is my navbar stack, where the two options act as buttons
<div class="col-md-3 col-sm-12 col-xs-12">
<br />
<ul class="nav nav-stacked">
<li style="background-color: lightgreen ; color:black;font-weight:bold">Introduction
</li>
<li style="background-color: lightgreen; color:black;font-weight:bold">Key Achievements
</li>
</ul>
</div>
You are confusing variables that reference elements with jQuery selectors that select by ID. Essentially you can remove the following lines:
var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
var resultsBtn = document.getElementById('RenderResults_Btn');
and then change your jQuery selectors to:
$('#RenderPortfolio_Btn').on('click touchstart', function() {
and
$('#RenderResults_Btn').on('click touchstart', function() {
Your code is missing a comma between click and touchstart
also you id selector is incorrect
$('#RenderPortfolio_Btn').on('click, touchstart', function() {
resultsDiv.setAttribute('class', 'col-md-9 hidden');
portfolioDiv.setAttribute('class', 'col-md-9 visible');
});
Here is my HTML code:
<div class="editable-select-holder">
<input type="text" name="position" id="position" value="${userInfoForm.position}">
<button type="button" class="editable-select-expander"></button>
<ul class="editable-select-options">
<c:forEach var="position" items="${positions}">
<li>${position.description}</li>
</c:forEach>
</ul>
</div>
and this is Jquery:
$(document).on('click', '.editable-select-expander', function () {
var $holder = $(this).parent();
$holder.toggleClass('editable-select-expanded');
$holder.on('click', 'li', function () {
var $t = $(this);
$holder.removeClass('editable-select-expanded');
$holder.find('input').val($t.text());
});
});
I want to exand list when I click on button or focus on input. The code I have provided above only works on button click. I need the same logic also on focus event. Any suggestions?
changed like this but still not working properly.
$(document).on("click",'.editable-select-holder', function() {
var $holder = $(this);
$holder.on('click','.editable-select-expander', function() {
$holder.toggleClass('editable-select-expanded');
});
$holder.on('click', 'li', function() {
var $t = $(this);
$holder.removeClass('editable-select-expanded');
$holder.find('input').val($t.text());
});
$holder.on('focus', 'input', function() {
$holder.addClass('editable-select-expanded');
});
});
I hope you can use this code
$( your input box id or class ).focusin(function() {
//your logic here
});
I want to pass blank value on single click function and want to redirect on double click.
Here my code for HTML
Code for j-query
$(function () {
var clicker = $('#Nav a');
$(this).click(function () {
$(this).attr('href', '');
});
clicker.dblclick(function () {
window.location = $(this).attr("href");
});
}
kindly suggest how i can pass same attribute value for two different function or any other way to do that.
You can use e.preventDefault() to prevent redirection on single click:
$(function () {
var clicker = $('#Nav a');
clicker.click(function (e) {
e.preventDefault();
});
clicker.dblclick(function () {
window.location = $(this).attr("href");
});
})
Also, note that $(this) of your click function is not map to any element at this moment. Since you've assigned var clicker = $('#Nav a') then you can use clicker.click instead.
Fiddle Demo
I want to bind a jquery function on a click of a anchor link tag, but do not know how it can be bind, i am using ASP.net MVC with Ajax and want to show data with the help of Ajax. Please give some suggestions to bind the below function on a link click.. Thanks..
$(document).ready(function(){
$("a.ShowTable").click(function(e){
var url=this.href;
$get(url,{},function(data){
$('#dtable').html(data)
)};
e.preventDefault();
});
<ul>
#foreach(var item in Model)
{
<li>#item.Id<li>
}
</ul>
This is your fixed code: {be aware, i'm not your browser's console...}
$(document).ready(function () {
$("a.ShowTable").click(function (e) {
var url = this.href;
$.get(url, {}, function (data) {
$('#dtable').html(data);
});
e.preventDefault();
});
});
first add jQuery file on your script
then write below code
$(document).ready(function(){
$(document).on("click","a.ShowTable,"function(e){
e.preventDefault();
var url=this.href;
$get(url,{},function(data){
$('#dtable').html(data)
});
});
});
you can use bind
$(document).ready(function(){
$( "a.ShowTable" ).bind( "click", function() {
var url=this.href;
$get(url,{},function(data){
$('#dtable').html(data)
});
e.preventDefault();
});
});
$(document).ready(function(){
$("a.ShowTable").click(function(e){
var url=$(this).attr(href);
$.get(url,{},function(data){
$('#dtable').html(data)
)};
e.preventDefault();
});
<ul>
#foreach(var item in Model)
{
<li><a href='#Url.Action("Index","Home",new {id=item.Id})' class='ShowTable'>#item.Id</a><li>
}
</ul>