I have a table where every other row is hidden. When I click an image, it will display the hidden row and hide all other rows. I'm able to show and hide the rows ok, but for some reason the image will not roll over.
<script type="text/javascript">
function toggleByID(id) {
$('.data-row-hidden').each(function(index) {
if ($(this).attr("id") == "row"+id) {
$(this).toggle(500);
$('#img'+id).attr("src", "images/toggle_expand.png");
}
else {
$(this).hide();
$('#img'+id).attr("src", "images/toggle_collapse.png");
}
});
}
</script>
Here is the code I'm using for the hidden row:
<tr id="<?='row'.$value['property_id']?>" class="data-row-hidden">
Here is the code I'm using to call the function:
<img id="<?='img'.$value['property_id']?>" src="images/toggle_collapse.png" border="0" height="20" width="20" onclick="javascript:toggleByID(<?=$value['property_id']?>)">
try this,
<script type="text/javascript">
function toggleByID(id) {
$('.data-row-hidden').each(function(index) {
var newImage = new Image();
if ($(this).attr("id") == "row"+id) {
$(this).toggle(500);
newImage.src = "images/toggle_expand.png";
}
else {
$(this).hide();
newImage.src = "images/toggle_collapse.png";
}
//cache busting
newImage.src = newImage.src + "&_=" + new Date().getTime();
$('#img'+id).attr("src", newImage.src);
});
}
</script>
Change your else condition to
else {
$(this).hide();
$('#img'+id).show();
$('#img'+id).attr("src", "images/toggle_collapse.png");
}
Related
<?php echo auto_link(site_url('guest/view/quote/' . $quote->quote_url_key)); ?>
This is creating for instance the following link:
http://domainname.com/guest/view/quote/d163df9c4d426b3ab5ef6247bc380745
How can I add an target="_blank" to this php code. Or is there another way to achieve the same.
EDIT 1: Added all scripts from the php page.
<script type="text/javascript">
$(function() {
$('#btn_add_item_from_lookup').click(function() {
$('#modal-placeholder').load("<?php echo site_url('item_lookups/ajax/modal_item_lookups'); ?>/" + Math.floor(Math.random()*1000));
});
$('#btn_add_item').click(function() {
$('#new_item').clone().appendTo('#item_table').removeAttr('id').addClass('item').show();
});
<?php if (!$items) { ?>
$('#new_item').clone().appendTo('#item_table').removeAttr('id').addClass('item').show();
<?php } ?>
$('#btn_save_quote').click(function() {
var items = [];
var item_order = 1;
$('table tr.item').each(function() {
var row = {};
$(this).find('input,select,textarea').each(function() {
if ($(this).is(':checkbox')) {
row[$(this).attr('name')] = $(this).is(':checked');
} else {
row[$(this).attr('name')] = $(this).val();
}
});
row['item_order'] = item_order;
item_order++;
items.push(row);
});
$.post("<?php echo site_url('quotes/ajax/save'); ?>", {
quote_id: <?php echo $quote_id; ?>,
quote_number: $('#quote_number').val(),
quote_date_created: $('#quote_date_created').val(),
quote_date_expires: $('#quote_date_expires').val(),
quote_status_id: $('#quote_status_id').val(),
items: JSON.stringify(items),
custom: $('input[name^=custom]').serializeArray()
},
function(data) {
var response = JSON.parse(data);
if (response.success == '1') {
window.location = "<?php echo site_url('quotes/view'); ?>/" + <?php echo $quote_id; ?>;
}
else {
$('.control-group').removeClass('error');
for (var key in response.validation_errors) {
$('#' + key).parent().parent().addClass('error');
}
}
});
});
$('#btn_generate_pdf').click(function() {
window.location = '<?php echo site_url('quotes/generate_pdf/' . $quote_id); ?>';
});
var fixHelper = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
return $helper;
};
$("#item_table tbody").sortable({
helper: fixHelper
});
});
</script>
I have resolved it. Not by using any code but by simple explaining to the users to use ctrl + click. It is probably not the best thing. There should be a way to achieve the same with code. But after the long discussion with Royal Bg I thought it would be wise to stop putting oil on the fire.
I hope that in the future someone else takes up the original question and posts an solution for others to benefit from. In the meantime I will accept this as an answer. I hope others do too.
I have a AJAX upload working and all ready to go, there really isnt any information the user can see except a percent and a progress bar. what i want to do is create a div for each file and show progress for each. Do i have to use flash or can i do this all from jquery because i got the ajax part done all thats left is to make the divs for each file and show a progress bar for each. if i were to upload multiple files it would show 1 progress bar that is uploading all the files together, i want to do it seperate for each. so basicly have one form to select multiple files and create a div for each file to show the percent complete of each.
JavaScript:
$('#Submit').click(function(event)
{
if ( !("FormData" in window) ) {
$('#Wrapper').append('<div class="DMsg"><label class="DText">You Are Using An Outdated Browser, Please Upgrade To Google Chrome Or Firefox, If You Dont Most Features Will Not Work. Click Anywhere To Dismiss.</label></div>');
$('#Wrapper').find('.DMsg').hide().slideDown('slow');
var Close = setTimeout(function()
{
$('.DMsg').slideUp('slow', function()
{
$('.DMsg').remove();
});
}, 10000);
}
else
{
function Upload()
{
event.preventDefault();
event.stopPropagation();
var FInput = $('#Files').val();
if(FInput != '')
{
var Data = new FormData();
var Files = document.getElementById('Files');
for(var I = 0; I < Files.files.length; ++I)
{
var FilesName = Files.files[I].name;
Data.append('File[]', Files.files[I]);
}
var Request = new XMLHttpRequest();
Request.upload.addEventListener('progress', function(event)
{
if(event.lengthComputable)
{
Percent = event.loaded / event.total;
Progress = document.getElementById('Progress');
Loaded = Math.round(Percent * 100);
$('#Progress').progressbar({
value: Loaded
});
$('#Loaded').text(Loaded + '%');
}
else
{
$('#Progress').text('There Was An Error Getting The Percent');
}
});
Request.upload.addEventListener('load', function(event)
{
});
Request.upload.addEventListener('error', function(event)
{
alert('Upload Failed.');
});
Request.addEventListener('readystatechange', function(event)
{
if(this.readyState == 4)
{
if(this.status == 200)
{
$('#Wrapper').append('<div class="DMsg"><label class="DText">Your Files Have Finished Uploading. Click Anywhere To Dismiss.</label></div>');
$('#Wrapper').find('.DMsg').hide().slideDown('slow');
$('#Loaded').text('100%');
$('#Progress').progressbar({
value: 100
});
var Close = setTimeout(function()
{
$('.DMsg').slideUp('slow', function()
{
$('.DMsg').remove();
});
}, 10000);
}
else
{
$('#Wrapper').append('<div class="DMsg"><label class="DText">There Was An Error In Uploading Your Files. Click Anywhere To Dismiss.</label></div>');
$('#Wrapper').find('.DMsg').hide().slideDown('slow');
var Close = setTimeout(function()
{
$('.DMsg').slideUp('slow', function()
{
$('.DMsg').remove();
});
}, 10000);
}
}
});
Request.open('POST', 'Upload.php');
Request.setRequestHeader('Cache-Control', 'no-cache');
Progress.style.display = 'block';
Request.send(Data);
}
else
{
$('#Wrapper').append('<div class="DMsg"><label class="DText">Please Select A File / Files. Click Anywhere To Dismiss.</label></div>');
$('#Wrapper').find('.DMsg').hide().slideDown('slow');
var Close = setTimeout(function()
{
$('.DMsg').slideUp('slow', function()
{
$('.DMsg').remove();
});
}, 10000);
}
}
var EachFile = 0
$.each($('#Files')[0].files, function()
{
++EachFile;
Upload();
});
}
});
HTML:
<div id="UForm">
<form action="" method="post" enctype="multipart/form-data">
<input type="file" class="Files" id="Files" name="File[]" />
<input type="submit" name="Submit" class="AB" id="Submit" value="Upload!" />
<div id="Progress"></div>
<div class="Caption"><label id="Loaded"></label></div>
</form>
</div>
Sorry for lots of code.
It shows a big load bar because you are searching for elements with the DMsg class and jquery searches from top-down so it will always find the first loading bar you set.
You need a way to set a different id to each new bar or when you do the
$('#Wrapper').find('.DMsg').hide().slideDown('slow');
find a way to get the last result.
I am having trouble sending data to the database. The values are being sent, but they are all going into the first drop zone field. And I need each dropzone value to go into the correct field in the database.
I've tried putting in different listeners & if statements in the javascript but it won't work for me.
the html:
<ul id="images">
<li><a id="img1" draggable="true"><img src="images/1.jpg"></a></li>
<li><a id="img2" draggable="true"><img src="images/2.jpg"></a></li>
<li><a id="img3" draggable="true"><img src="images/3.jpg"></a></li>
</ul>
//dropzones
<div class="drop_zones">
<div class="drop_zone" id="drop_zone1" droppable="true">
</div>
<div class="drop_zone" id="drop_zone2" droppable="true">
</div>
<div class="drop_zone" id="drop_zone3" droppable="true">
</div>
</div>
<button id = "post" onClick="postdb();">Post info</button>
the javascript:
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
} else {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.attachEvent('on' + type, function () {
return fn.call(el, window.event);
});
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
}
})();
var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');
function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
function updateDataTransfer() {
dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(dragItems[i], 'dragstart', function (event) {
event.dataTransfer.setData('obj_id', this.id);
return false;
});
}
}
addEvent(dropAreas, 'dragover', function (event) {
if (event.preventDefault)
event.preventDefault();
this.style.borderColor = "#000";
return false;
});
addEvent(dropAreas, 'dragleave', function (event) {
if (event.preventDefault)
event.preventDefault();
this.style.borderColor = "#ccc";
return false;
});
addEvent(dropAreas, 'dragenter', cancel);
// drop event handler
addEvent(dropAreas, 'drop', function (event) {
if (event.preventDefault)
event.preventDefault();
// get dropped object
var iObj = event.dataTransfer.getData('obj_id');
var oldObj = document.getElementById(iObj);
// get its image src
var oldSrc = oldObj.childNodes[0].src;
oldObj.className += 'hidden';
var oldThis = this;
setTimeout(function () {
oldObj.parentNode.removeChild(oldObj); // remove object from DOM
// add similar object in another place
oldThis.innerHTML += '<a id="' + iObj + '" draggable="true"><img src="' + oldSrc + '" /> </a>';
// and update event handlers
updateDataTransfer();
function postdb(){
if (document.querySelectorAll('[droppable=true]')){
var dropDetails = oldThis.id + '=' + iObj;
$.post("a-2.php", dropDetails);
}
oldThis.style.borderColor = "#ccc";
}, 500);
return false;
});
and my php:
$sql="INSERT INTO table_answers (drop_zone1, drop_zone2, drop_zone3) VALUES ('$_POST[drop_zone1]','$_POST[drop_zone2]','$_POST[drop_zone3]')";
Any idea please?
var u = $('drop_zone1');
if(u){
$.post("post.php", y);
};
(I'm assuming this is jQuery.)
Add the # to the beginning of the selector: $('#drop_zone1');.
The jQuery resultset always evaluates to a truthy value. It's not clear to me what condition you're trying to validate here...
In the PHP code, you're creating the query in $sql2 in the first if, as opposed to $sql in the other two.
Edit - now that we know what you're trying to do in setTimeout, this simplified function should work:
setTimeout(function() {
oldObj.parentNode.removeChild(oldObj); // remove object from DOM
// add similar object in another place
oldThis.innerHTML += '<a id="' + iObj + '" draggable="true"><img src="' + oldSrc + '" /> </a>';
// and update event handlers
updateDataTransfer();
/*
this part has been removed, see edit below
var dropDetails = oldThis.id + '=' + iObj;
// now dropDetails should look something like "drop_zone1=img1"
$.post("post.php", dropDetails);
*/
oldThis.style.borderColor = "#ccc";
}, 500);
One more edit, to submit all the dropped elements at once:
function postdb() {
var postDetails = {};
var dropZones = document.querySelectorAll('[droppable=true]');
var allZonesDropped = true;
for(var ix = 0; ix < dropZones.length; ++ix) {
var zone = dropZones[ix];
var dropped = zone.querySelector('[draggable=true]');
if(dropped) {
var dropTag = dropped.id;
postDetails[zone.id] = dropTag;
} else {
allZonesDropped = false;
}
}
if(allZonesDropped) {
$.post("a-2.php", dropDetails);
} else {
alert('Not all targets have elements in them');
}
return false;
});
Just be careful where you place this function - your edited question has it in the middle of the setTimeout call, where it's definitely not going to work.
Regarding your PHP code: You should really learn about PDO or MySQLi and use prepared statements instead of blindly inserting user input into the query. If you care to learn, here is a quite good PDO-related tutorial.
Is there a way to use jQuery to get an iframe to load on a click, i want this as is the iframe is hidden in a div that is not viewable until clicked, so the heavy majority of users will not be viewing the iframe, and i dont want the load time to be affected by the iframe.
This is one of the few things i've tried, the iframe does not load:
$(function() {
var emba=1;
var embget = 1;
$(".custemba").click(function(event) {
event.preventDefault(event);
if(emba == 1) {
emba = 2;
$('.custemb').slideDown();
if(embget == 2) {
$('.appendi').append('<iframe src="/player_i.php?aid=12" height="170px" width="100%" scrolling="no" frameborder="0"></iframe>');
embget = 2;
}
}
else if(emba == 2) {
emba = 1;
$('.custemb').slideUp();
}
});
});
Looks like
if(embget == 2)
should be
if(embget == 1)
And you don't need that extra event in
event.preventDefault();
Here's a simplified version:
var appendIFrame = true;
$(".custemba").click(function(event) {
event.preventDefault();
$('.custemb').slideToggle();
if(appendIFrame) {
$('.appendi').append('<iframe src="/player_i.php?aid=12" height="170px" width="100%" scrolling="no" frameborder="0"></iframe>');
appendIFrame = false;
}
});
The following works for me, a tad cleaner, creating the object before appending:
HTML:
<div>
Show iFrame
</div>
<div class="framebox"></div>
JS:
var frame_loaded = false;
$(".showframe").click(function(event) {
event.preventDefault();
if (frame_loaded === false) {
var frame_element = $('<iframe>');
frame_element.attr({
src: "http://eatabagofdicks.com",
height: "170px",
width: "100%",
scrolling: "no",
frameborder: "0"
});
$(".framebox").append(frame_element);
frame_loaded = true;
}
$(".framebox").slideToggle();
});
Following is the code:-
<script type="text/javascript">
var timer = 150;
var currentWindow;
$(document).ready(function()
{
$("#creditme").button({
icons: { primary: "ui-icon-check" }
}).hide();
$("#viewad").button({
icons: { primary: "ui-icon-play" }
}).hide();
$("#progressbar").progressbar({value: 0}).hide();
var time;
var id;
var title;
var url;
$('.googlep-advertisement').bind('click', function()
{
id = $(this).attr('id');
title = $(this).text();
url = $('#yturl-'+id).text();
timer = $('#ytime-'+id).text();
$("#dialog-message").dialog({
modal: true,
width: 700,
title: title,
resizable: false,
draggable: false,
beforeClose: function() { clearAd(); }
});
if (!$("#progressbar").is(":visible") && !$("#creditme").is(":visible"))
{
$("#viewad").show();
}
});
$("#viewad").bind('click',function() {
$.get("googlep_credit.php" + '?start=' + id);
$("#viewad").hide();
$("#progressbar").progressbar('value', 0).show();
currentWindow = window.open(url, 'videoad', 'height=480,width=640', false);
window.blur();
window.focus();
progresscount(timer);
});
$("#creditme").click(function() {
$.get("googlep_credit.php" + '?id=' + id);
$("#creditme").hide();
$("#dialog-message").dialog('close');
$("#"+id).parent().parent('tr').fadeOut('slow');
});
function progresscount(time)
{
if(time == 0)
{
if(isWindowClosed() == true)
{
alert('You closed the popup before timer reached zero or you are using popup-blocking software.');
$("#dialog-message").dialog('close');
}
else
{
$("#creditme").html('<g:plusone callback="plusone_vote" href="'+url'"></g:plusone>');
$("#creditme").show();
}
$("#progressbar").hide();
}
else
{
time--;
$("#progressbar").progressbar('value', parseInt((timer - time) * 100 / timer));
setTimeout(function() { progresscount(time) }, 100);
}
}
});
function isWindowClosed()
{
if (!currentWindow || typeof currentWindow == 'undefined' || currentWindow && currentWindow.closed)
{
return true;
}
else
{
return false;
}
}
function clearAd()
{
}
</script>
<style>
.dialog-message {
}
</style>
<div id="dialog-message" class="dialog-message" title="View Video" style="display:none">
<p>
<center>
<button id="viewad" style="ui-helper-hidden">Click here to view the video</button>
<div id="progressbar"></div>
<button id="creditme" style="ui-helper-hidden">Test</button>
</center>
</p>
</div>
Nothing wrong with the code.
The problem is:-
http://dl.dropbox.com/u/14384295/70.jpeg
When checked with google chrome inspect element,
The code appears as
http://dl.dropbox.com/u/14384295/71.jpeg
Correctly working will appear as > http://dl.dropbox.com/u/14384295/72.jpeg
It seems that the code is not being converted by the google js which is in the portion. I am sorry if i have been confusing.
I may probably be doing the addition of 'url' var incorrectly
I'm pretty sure your problem lies in this line:
$("#creditme").html('<g:plusone callback="plusone_vote"></g:plusone>');
You are dynamically adding the <g:plusone> element after the Google +1 script has been run, so nothing happens.
To solve it, simply put the +1 markup in the html from the beginning so the +1 script can find it and render it, and only call $("#creditme").show(); when you need to show it.
<button id="creditme" style="ui-helper-hidden">
<g:plusone callback="plusone_vote"></g:plusone>
</button>
If you want to dynamically change the URL after page load, check out the examples from the Google documentation. It will allow you to load the button explicitly.