I have this java script function
function showHideSearchPanel(dv) {
var Header = dv == 'Charts' ? 'ChartSearch' : 'ReportSearch';
var div = "ctl00_ContentPlaceHolder1_dv" + Header;
var panel = "ctl00_ContentPlaceHolder1_pnl" + Header;
var hiddenField = "ctl00_ContentPlaceHolder1_hdn" + Header + "Mode";
// I try to add this code in js but it not work
**var serchtextbox = document.getElementById("ctl00_ContentPlaceHolder1_txtSearchName");
if (serchtextbox != null) {
serchtextbox.focus();
}**
// I try to add this code in js but it not work
if ($("#" + div).attr('display') != 'block') {
window.status = 'Expanding contents....';
$("#" + div).slideToggle("slow");
$("#" + div).attr('visibility', 'visible');
$("#" + div).attr('display', 'block');
window.status = 'Done';
}
else {
window.status = 'Collapsing contents....';
$("#" + div).hide("slow");
$("#" + div).attr('visibility', 'hidden');
$("#" + div).attr('display', 'none');
window.status = 'Done';
}
$("#" + hiddenField).attr('value', ($("#" + hiddenField).attr('value') == 'On' ? 'Off' : 'On'));
}
This is my simple menu
When click on search button i want set focu on search textbox which is in below image
Related
I have a table where the user can select row and they can edit in the header of the table. The problem is that, when they select row and changed the value; for example the Category. When first time edit the row and click the update, it will change accordingly. But when they select another value for Category or any other dropdown. They cannot changed it back from the previous value.
This is my code snippet, don't mind the background-color
var opt = $("#Category_h option:selected").val();
$('#' + dataTR).find('td[data-attr=Category]').find("#Category option[value='" + opt + "']").attr("selected", true);
if ($("#" + dataTR).find('td[data-attr=Category]').css('background-color') == 'rgb(255, 0, 0)') {
if (opt != '') {
$("#" + dataTR).find('td[data-attr=Category]').css('background-color', '');
}
}
Here's my whole code: Sample Code
Thanks
The problem with the code is you are using attr method which selects the options but you have not unselected it hence it stops working. You can use below modified code snippet to make things work.
$("input[name='Update']").click(function () {
if ($(this).attr("data-tr") == "-1") { return; };
var dataTR = $(this).attr("data-tr");
dataTR = dataTR.trim();
var customer_model;
var opt = $("#Category_h option:selected").val();
console.log(opt);
$('#' + dataTR).find('td[data-attr=Category]').find("#Category").val(opt);
if ($("#" + dataTR).find('td[data-attr=Category]').css('background-color') == 'rgb(255, 0, 0)') {
if (opt != '') {
$("#" + dataTR).find('td[data-attr=Category]').css('background-color', '');
}
}
var tax = $("#Tax_rule_h option:selected").val();
$('#' + dataTR).find('td[data-attr=Tax_rule]').find("#Tax_rule").val(tax);
if ($("#" + dataTR).find('td[data-attr=Tax_rule]').css('background-color') == 'rgb(255, 0, 0)') {
if (tax != '') {
$("#" + dataTR).find('td[data-attr=Tax_rule]').css('background-color', '');
}
}
var term = $("#Payment_term_h option:selected").val();
$('#' + dataTR).find('td[data-attr=Payment_term]').find("#Payment_term").val(term);
if ($("#" + dataTR).find('td[data-attr=Payment_term]').css('background-color') == 'rgb(255, 0, 0)') {
if (term != '') {
$("#" + dataTR).find('td[data-attr=Payment_term]').css('background-color', '');
}
}
//BTG v.1.0.0.3
var curr = $("#Currency_h option:selected").val();
$('#' + dataTR).find('td[data-attr=Currency]').find("#Currency").val(curr);
console.log(curr);
if ($("#" + dataTR).find('td[data-attr=Currency]').css('background-color') == 'rgb(255, 0, 0)') {
if (curr != '') {
$("#" + dataTR).find('td[data-attr=Currency]').css('background-color', '');
}
}
});
hope this will help you
I am trying to do gallery portfolio with help of masonry and custom click event. I can hide show images with the click event, but when hide show event complete masonry not reset to again.
link
Here is jQuery code:
var pmo = "#p-masonry_outer";
var ppt = "#p-portfolio_typs";
$('' + ppt + ' li span').on('click', function() {
$('' + ppt + ' li span').removeClass('p-active_work');
$(this).addClass('p-active_work');
var WorkRel = $(this).data("cat");
if (WorkRel != "0") {
$("" + pmo + " > div").hide();
$(".p-masonry a").attr('data-lightbox', '');
$("" + pmo + " > div").each(function() {
var WorkAttrStrip = $(this).data('cat');
var WorkAttr = WorkAttrStrip.split(",");
if ($.inArray(WorkRel + "", WorkAttr) !== -1) {
$(this).show;
}
});
var $container = $('.js-masonry');
$container.imagesLoaded(function() {
$container.masonry();
});
} else {
$("" + pmo + " > div").fadeIn("slow");
}
return false;
}
Im working in a chat system very simple. But i have a problem. I can only get the other user messages if i close and re open the chat conversation div, then the message appears.
How can I solve this? The problem should be in this piece of code. As I am not very comfortable with ajax I ask for your help.
JS:
$(document).ready(function(){
var snd = new Audio("images/new_msg.wav");
var open=Array();
$("#jd-chat .jd-online_user").click(function(){
var user_name = $.trim($(this).text());
var id = $.trim($(this).attr("id"));
if($.inArray(id,open) !== -1 )
return
open.push(id);
$("#jd-chat").prepend('<div class="jd-user">\
<div class="jd-header" id="' + id + '">' + user_name + '<span class="close-this"> X </span></div>\
<div class="jd-body"></div>\
<div class="jd-footer"><input id="textareabox" placeholder="escrever..."></div>\
</div>');
$.ajax({
url:'chat.class.php',
type:'POST',
data:'get_all_msg=true&user=' + id ,
success:function(data){
$("#jd-chat").find(".jd-user:first .jd-body").append("<span style='display:block' class='me'> " + data + "</span>");
}
});
});
$("#jd-chat").delegate(".close-this","click",function(){
removeItem = $(this).parents(".jd-header").attr("id");
$(this).parents(".jd-user").remove();
open = $.grep(open, function(value) {
return value != removeItem;
});
});
$("#jd-chat").delegate(".jd-header","click",function(){
var box=$(this).parents(".jd-user,.jd-online");
$(box).find(".jd-body,.jd-footer").slideToggle();
});
$("#search_chat").keyup(function(){
var val = $.trim($(this).val());
$(".jd-online .jd-body").find("span").each(function(){
if ($(this).text().search(new RegExp(val, "i")) < 0 )
{
$(this).fadeOut();
}
else
{
$(this).show();
}
});
});
$("#jd-chat").delegate(".jd-user input","keyup",function(e){
if(e.keyCode == 13 )
{
var $cont = $('.jd-body');
var box=$(this).parents(".jd-user");
var msg=$(box).find("input").val();
var to = $.trim($(box).find(".jd-header").attr("id"));
$.ajax({
url:'chat.class.php',
type:'POST',
data:'send=true&to=' + to + '&msg=' + msg,
success:function(data){
$('#textareabox').val('');
$(box).find(".jd-body").append("<span style='display:block' class='me'> " + msg + "</span>");
$cont[0].scrollTop = $cont[0].scrollHeight;
$cont.append('<span>' + $(this).val() + '</span>');
$cont[0].scrollTop = $cont[0].scrollHeight;
$(this).val('');
}
});
}
});
function message_cycle()
{
$.ajax({
url:'chat.class.php',
type:'POST',
data:'unread=true',
dataType:'JSON',
success:function(data){
$.each(data , function( index, obj ) {
var user = index;
var box = $("#jd-chat").find("div#2").parents(".jd-user");
$(".jd-online").find(".light").hide();
$.each(obj, function( key, value ) {
if($.inArray(user,open) !== -1 )
$(box).find(".jd-body").append("<span style='display:block' class='other'> " + value + "</span>");
else
snd.play();
$(".jd-online").find("span#" + user + " .light").show();
});
});
}
});
}
setInterval(message_cycle,1000);
});
How messages are displayed when you first open the chat conv div ?
I'm assuming message_cycle() is supposed to display new messages in your div every second, i suppose your problem is here...
I'm not really confortable with this :
var box = $("#jd-chat").find("div#2").parents(".jd-user");
A div can't have an id starting with a number, you need <div id="chat2"> instead of <div id="2">.
After your line add a console.log('Box found : '+box.length) ; just to make sure your box is correctly found in message_cycle.
I'm trying to make a website using jquery-1.11.1 where I want a <textarea> to be spawned whenever I click on the link which only shows on mouseenter on a div. But I'm getting an error in my console,
Uncaught ReferenceError: inputdivEditor is not defined (Please ignore JSFiddle errors)
I've absolutely no idea why I'm getting this. Here are my codes,
$(document).ready(function () {
$("[id^=divEditor-]").each(function () {
var content = $(this).html();
var targetID = $(this).attr('id');
var txtID = 'input' + targetID;
$('<textarea id="input' + targetID + '" name="' + txtID + '" >' + content + '</textarea>').insertBefore(this).css('display', 'none');
var button = "<a onclick='activateDivEditor(this, " + txtID + ")' class='custom-edit-button editDiv' id='active" + targetID + "'>Embed Code</a>";
$(this).on('mouseenter', function () {
$(this).prepend($(button));
$(this).css('position', 'relative');
});
$(this).on('mouseleave', function () {
$('.editDiv').remove();
});
});
});
function activateDivEditor(btn, txtId) {
var targetID = $(btn).parent().get(0).id;
var update = "<a onclick='deactivateDivEditor(this, " + txtId + ")' class='custom-edit-button updatediv' id='deactive" + targetID + "'>Update</a>";
var cancel = "<a onclick='cancelactivateDivEditor(this)' class='custom-edit-button cancel' id='cancelactive" + targetID + "'>Cancel</a>";
var targetClass = $('#' + targetID).attr('class');
var targetWidth = $('#' + targetID).width();
$('#' + targetID).css('display', 'none');
$('#input' + targetID).css('display', 'block').css('width', targetWidth - 2).css('height', '125px');
$('#input' + targetID).parent().css('position', 'relative');
$(update).prependTo($('#input' + targetID).parent());
$(cancel).prependTo($('#input' + targetID).parent());
}
JSFiddle Demo
How can I generate a textarea whenever I click on the button link? Need this help badly. Thanks.
This is my jQuery part that makes my menu for my pages.
function fetchmenus() {
$.getJSON('sys/classes/fetch.php?proccess=1', function(status) {
// get line status
$.each(status, function(i, item) {
if (item.id == "1") {
active = "class='active'";
lastpageid = item.href;
}
else {
active = "class='nonactive'";
}
$('<li id="' + item.href + '" ' + active + '>' + item.menuTitle + '<span class="menuspan" id="' + item.href + '"></span></li>').appendTo('#menuarea ul#mainmenu');
});
});
}
What I want to do is get the item.menuTitle in the <a but before the <span>.
Currently I do it on this way:
$('ul#mainmenu li').live('click', function(event) {
//alert(this.id);
$("li#" + lastpageid).removeClass();
fetchpage(this.id);
$("#largemenutop").html($(this).text());
$("li#" + this.id).addClass("active");
lastpageid = this.id;
});;
Is there a better way to do this?
Nice solution Herman, though it can be reduced to something like this:
JS
$('li a').contents().filter(function() {
return this.nodeType == 3;
}).text();
HTML
<li>Apple<span>hi</span> Juice</li>
Will return Apple Juice
Fiddle: http://jsfiddle.net/49sHa/1/
Yes, you can select only the text contents of the element, like this:
var text = '';
$('a').contents().each(function(){
if(this.nodeType === 3){
text += this.wholeText;
}
});
$("#largemenutop").html(text);