livequery not working in ie - php

hello friends i am working on a like module .and having some difficulties running it on ie . in all other browsers its running fine . the prob is when i click on like button nothing happens in ie . can anyone see my piece of code and help me out . IE is Such a pain .
$('.LikeThis').livequery("click",function(e){
var getID = $(this).attr('id').replace('post_id','');
var uid = $('.like_uid').val();
var type_id = $('.like_type_id').val();
$("#shlike-loader-"+getID).html('<img src="images/icons/like.gif" alt="" />');
$.post("eg?postId="+getID+ '&uid=' + uid + '&type_id=' + type_id, {
}, function(response){
$('#hiddenlikesval'+getID).remove();
$('#likepanel'+getID).show();
$('#likecontainer'+getID).append($(response).fadeIn('slow'));
var bing=$('#hiddenlikesval'+getID).val();
$('#lplbl'+getID).html(bing);
$('#likePanel'+getID).css({'display':'block','width':'404px','padding':'5px 3px 5px 3px','background':'#ECEFF5'});
$('#like-panel-'+getID).html('<input type="hidden" class="like_uid" id="like_uid'+getID+'" name="like_uid" value="'+uid+'"/><input type="hidden" class="like_type_id" id="like_type_id'+getID+'" name="like_type_id" value="'+type_id+'"/><div class="comtcontbtm unlwid"><span class="shareiconsbottom unlikeiconbtm"></span><span class="replyshare">unlike</span></div>');
$("#shlike-loader-"+getID).html('');
});
});

Are you using jQuery 1.7? If so, you should use on, livequery is deprecated. If you're using pre-1.7 you should use .delegate.
For 1.7 change your function declaration to:
$(document).on("click", ".LikeThis", function (e) {
//your stuff here
});
For pre-1.7 change it to:
$(document).delegate("click", ".LikeThis", function (e) {
//your stuff here
});
On: http://api.jquery.com/on/
Delegate: http://api.jquery.com/delegate/

$('.LikeThis').live('click', function (e) {
var getID = $(this).attr('id').replace('post_id', '');
var uid = $('.like_uid').val();
var type_id = $('.like_type_id').val();
$("#shlike-loader-" + getID).html('<img src="images/icons/like.gif" alt="" />');
$.post("modules/like/likeit.php?postId=" + getID + '&uid=' + uid + '&type_id=' + type_id, {
}, function (response) {
$('#hiddenlikesval' + getID).remove();
$('#likepanel' + getID).show();
$('#likecontainer' + getID).append($(response).fadeIn('slow'));
var bing = $('#hiddenlikesval' + getID).val();
$('#lplbl' + getID).html(bing);
$('#likePanel' + getID).css({ 'display': 'block', 'width': '404px', 'padding': '5px 3px 5px 3px', 'background': '#ECEFF5' });
$('#like-panel-' + getID).html('<input type="hidden" class="like_uid" id="like_uid' + getID + '" name="like_uid" value="' + uid + '"/><input type="hidden" class="like_type_id" id="like_type_id' + getID + '" name="like_type_id" value="' + type_id + '"/><div class="comtcontbtm unlwid"><span class="shareiconsbottom unlikeiconbtm"></span><span class="replyshare">unlike</span></div>');
$("#shlike-loader-" + getID).html('');
});
});

Related

how to add onclick event handler inside highcharts tooltip

I am using highcharts ( Line ) in my php application. I want to use onclick event handler inside the tooltip to open the modal dialog. But i don't find any solution for that, even in highcharts there is no click event available for tooltip item. I also used formatter option inside tooltip but it doesn't worked. Please help me in this issue
I am trying this
tooltip: {
useHtml: true,
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function (i, point) {
s += '<br/><span style="color:' + point.series.color + '">\u25CF</span>\n\ <span onclick="my_function();">Click Me</span> ' + point.series.name + ': ' + point.y;
});
return s;
},
shared: true
}
but my_function is not calling when i click on "Click Me"
I got the answer on my query from highcharts
tooltip: {
useHTML: true,
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function (i, point) {
s += '<br/><span style="color:' + point.series.color + '">\u25CF</span>\n\ <span onclick="my_function();">Click Me</span> ' + point.series.name + ': ' + point.y;
});
return s;
},
shared: true
}
I am doing a spelling mistake by using useHtml but it is actually useHTML. So now my problem is solved.
Try this,
I added tooltipClick class to the span
{
useHtml: true,
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function (i, point) {
s += '<br/><span style="color:' + point.series.color + '">\u25CF</span>\n\ <span class="tooltipClick">Click Me</span> ' + point.series.name + ': ' + point.y;
});
return s;
},
shared: true
}
And delegated an event handler
$(document).on('click','.tooltipClick',function(){
console.log($(this).parent()); //get the tooltip
alert('a toolip was clicked')
});

jquery ui datepicker not working with tabs

When a user switches tabs in the jquery ui code they can click on a button to add data to a jqgrid. The only thing that is not working is datepicker; it will launch one time and after that when switching to a new tab it will not launch again.
source document code;
<link href="/Includes/Site.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="/Includes/jqgrid/css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/Includes/jqgrid/src/css/ui.jqgrid.css">
<script src="/Includes/jqgrid/js/jquery-2.1.4.min.js"></script>
<script src="/Includes/jqgrid/css/jquery-ui-1.11.4.min.js"></script>
<script src="/Includes/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="/Includes/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/Includes/validation/dist/jquery.validate.min.js"></script>
<script src="/Includes/validation/dist/additional-methods.min.js"></script>
$("#tabs").tabs(
{
//each tab activation
activate:function(event, ui)
{ loadGrid(); },
beforeActivate:function(event, ui)
{
var curTab = $('#tabs .ui-tabs-active');
var curTabName = curTab.text();
var pos = curTabName.search('-');
var curID = curTabName.slice(0,pos);
var passFrmDiv = "div[id^=adddaydata" + curID + "]";
$(passFrmDiv).html("");
}
});
function loadGrid()
{
var curTab = $('#tabs .ui-tabs-active');
var curTabName = curTab.text();
var pos = curTabName.search('-');
var newID = curTabName.slice(0,pos);
//reset adddaydata
$("div[id^=adddaydata" + newID + "]").text('');
//load form
var getFrmURL = '90daywellform.php?id=' + newID + '&d=' + $.now();
var passFrmDiv = "div[id=wellform" + newID +"]";
$.get(getFrmURL, function(data)
{ $(passFrmDiv).html(data); });
//$(passFrmDiv).load('90daywellform.php?id=' + newID + ' #loadform');
//load grid
var getGrdURL = '90daygrid.php?id=' + newID + '&d=' + $.now();
var passGrdDiv = "div[id=jqgrid" + newID +"]";
$.get(getGrdURL, function(data)
{ $(passGrdDiv).html(data); });
//$(passGrdDiv).load('90daygrid.php?id=' + newID);
};
//date picker function for adding wells info
$("button[id^=addday]").click(function()
{
var curTab = $('#tabs .ui-tabs-active');
var curTabName = curTab.text();
var pos = curTabName.search('-');
var newID = curTabName.slice(0,pos); //id of the current well
//var dtTag = '#datepicker' + newID;
$.get('get90maxday.php?id=' + newID,
function(data)
{
var passMax = data;
var getFrmURL = '90dayadddayform.php?id=' + newID + '&maxday=' + passMax + '&d=' + $.now();
var passFrmDiv = "div[id^=adddaydata" + newID + "]";
$.get(getFrmURL, function(data)
{ $(passFrmDiv).html(data); });
//$().text(newID + " " + passAPI);
//$("#gridarea").load('scadagrid.php?api=' + passAPI + '&start=' + passStart + '&end=' + passEnd);
}
);
});
And here is the code from the dynamic document that is being loaded;
<?php
$id = $_GET['id'];
?>
<link href="/Includes/Site.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="/Includes/jqgrid/css/jquery-ui.css">
<script src="/Includes/jqgrid/js/jquery-2.1.4.min.js"></script>
<script src="/Includes/jqgrid/css/jquery-ui-1.11.4.min.js"></script>
<script src="/Includes/validation/dist/jquery.validate.min.js"></script>
<script src="/Includes/validation/dist/additional-methods.min.js"></script>
<tr>
<td><label for="dt<?php echo $id; ?>">Date</label></td>
<td><input id="dt<?php echo $id; ?>" name="dt<?php echo $id;?>" type="text"></td>
</tr>
var passID = $("input[id^=id]").val();
var dtPkr = "input[id=dt" + passID +"]";
$(dtPkr).datepicker();
Any assistance is greatly appreciated
You're going to want to tap into the activate event if you've got this hosted in a tab (don't see it in the code, but it's in the question?). See jQuery UI Tabs Widget documentation.
You're going to want to add, in activate or in your loadGrid() function, something to initialize the datepickers:
$(".datepicker").datepicker();
You would, of course, have to have the datepickers be of class datepicker for that to work. See jQuery UI Datepicker documentation.

TypeError: $ is undefined : $.widget("ui.combobox", {

I use jquery in comboboxes, and I'm not abele to get the comboboxes in the interface to be displayed. The error in firebug is the following :
TypeError: $ is undefined : $.widget("ui.combobox", {
I'm using the following file jquery.ui.combobox.js:
Code :
$.widget("ui.combobox", {
options: {
openDialogButtonText: "+",
dialogHeaderText: "Add option",
saveButtonImgUrl: null,
closeButtontext: "Ok"
},
_create: function() {
var selectBox = $(this.element),
id = selectBox.attr("id"),
self = this;
selectBox.addClass("ui-combobox");
// create HTML to inject in the DOM
this.addHtml(id, selectBox);
// turn dialog html into a JQuery UI dialog component
this.addDialog(id);
// #todo set proper button height (roughly equal to select height)
$("#" + id + "-button-opendialog").bind("click", function() {
$("#" + id + "-editor-dialog").dialog("open");
}).button();
$("#" + id + "-button-save").bind("click", function() {
self.addOption(id, selectBox);
}).button();
this._init();
return this;
},
addHtml: function(id, selectBox) {
var imgHtml = "";
if (this.options.saveButtonImgUrl != null) {
imgHtml = '<img src="' + this.options.saveButtonImgUrl + '" alt="opslaan" />';
}
$(' <button id="' + id + '-button-opendialog">' +
this.options.openDialogButtonText +
'</button>' +
'<div id="' + id + '-editor-dialog" class="ui-combobox-editor">' +
'<input id="' + id + '-newitem" type="text" /> ' +
' <button id="' + id + '-button-save">' +
imgHtml + ' Opslaan' +
' </button>' +
'</div>').insertAfter(selectBox);
},
addDialog: function(id) {
var options = this.options;
$("#" + id + "-editor-dialog").dialog( {
autoOpen: false,
modal: true,
overlay: {
opacity:0.5,
background:"black"
},
buttons: {
// #todo make button text configurable
"Ok": function() {
$("#" + id + "-editor-dialog").dialog("close");
return;
}
},
title: options.dialogHeaderText,
hide: 'fold'
});
},
addOption: function(id, selectBox) {
var newItem = $("#" + id + "-newitem");
// #todo do not allow duplicates
if (newItem !== null && $(newItem).val().length > 0) {
// #todo iterate over options and get the highest int value
//var newValue = selectBox.children("option").length + 1;
var highestInt = 0;
selectBox.children("option").each(function(i, n) {
var cInt = parseInt($(n).val());
if (cInt > highestInt) {
highestInt = cInt;
}
});
var newValue = highestInt + 1;
var newLabel = $(newItem).val();
selectBox.prepend("<option value='" + newValue + "' selected='selected'>" + newLabel + "</option>");
this._trigger("addoption", {}, newValue);
// cleanup and close dialog
$(newItem).val("");
$("#" + id + "-editor-dialog").dialog("close");
} else {
this._trigger("addoptionerror", {}, "You are required to supply a text");
}
},
_init: function() {
// called each time .statusbar(etc.) is called
},
destroy: function() {
$.Widget.prototype.destroy.apply(this, arguments); // default destroy
// $(".ui-combobox-button").remove();
// $(".ui-combobox-editor").remove();
}
});
Can you please help me?
The message "$ is undefined" means that the function called "$" is not defined anywhere on your page. Thus, when this code is executed, it does not know what to do when this line is encountered.
The $ function is defined by jQuery. Therefore, the message is indicating that it hasn't loaded the jQuery library by the time your code is executed. This could be for a number of things
You haven't included the full jQuery library on your page. This may be because you have forgotten to include it or you have only included some extension to jQuery such as jQuery.UI.
If you are unsure, try adding the following line to the top of your head element in your HTML. Make sure you haven't put any JS before this line:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
You have included jQuery but it is failing to load. This may be because the link you are using is incorrect. Double check by using the Net Panel in Firebug.
jQuery is included on your page, but you have included your own JS first. This won't work because the $ function won't get defined until jQuery is loaded, but your code will try and execute first. Check the order in which you are including your JS and make sure that jQuery is first.

Display Drop Down Selection Name in IMG URL

How would I dynamically update the end part of an img URL based on a drop down selection?
for example when blue is selected the filename before .jog would get filled in with the word blue. It's using a css and I can't add any ids to the :
<img src="www.mysite.com/blue.jpg">
<select>
<option>green</option>
<option>blue</option>
</select>
$(document).ready(function() {
$('select').change(function(){
var src = $(':selected', this).text()
$('img').attr('src', location.hostname + "/" + src + '.jpg');
});
});
$(function () {
$('select').change(function () {
$(this).parent().attr('src', location.hostname + "/" + this.val() + '.jpg');
});
});
Try this:
$(function() {
var $img = $('img'), $select = $('select').on('change keyup', function() {
$img.attr('src','http://www.mysite.com/' + $select.find(':selected').html() + '.jpg')'
});
});

No results obtained with JQuery $.getJSON in the PhoneGap environment

Here is my funciton:
function getEmployeeList() {
alert("hello world3!");
$.getJSON(serviceURL + 'getemployees.php', function(data) {
alert("hello world4!");
$('#employeeList li').remove();
employees = data.items;
$.each(employees, function(index, employee) {
$('#employeeList').append('<li><a href="employeedetails.html?id=' + employee.id + '">' +
'<img src="pics/' + employee.picture + '"/>' +
'<h4>' + employee.firstName + ' ' + employee.lastName + '</h4>' +
'<p>' + employee.title + '</p>' +
'<span class="ui-li-count">' + employee.reportCount + '</span></a></li>');
});
$('#employeeList').listview('refresh');
});
}
When the page is ready, it will run this function, however, nothing is appended.
I have tested, all php can return correct format. What wrongs?? Please please help me...
You need to add the external host (in my case was mysite.localhost) in PhoneGap.plist under the "ExternalHosts" key.
I presume serviceURL is not on the same domain.
In that case you add callback=? in the end, and jQuery does some magic:
$.getJSON(serviceURL + 'getemployees.php?callback=?', function(data) {
...
If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.
jQuery API

Categories