Hi im uploading images to the server. My upload button are active always and i use simple ajax code to upload the image without page referesh.How to enable the a select button after the image has been uploaded.the java script code i have posted here...
<!--AJAX UPLOADING SCRIPT -->
<script type="text/javascript" src="lib/scripts/jquery.min.js"></script
<script type="text/javascript" src="lib/scripts/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#photoimg').live('change', function(){
$("#preview").html('');
$("#preview").html('<br /><img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({target: '#preview'}).submit();
});
});
});
});
///To enable/disable the language button depending on the image upload.
$(document).ready(function(){
$("#language").attr('disabled',true);
$("#language").change(
function(){
if ($("#PerformOcrForm").ajaxForm({target: '#previewText'}).submit()) {
$("#language").removeAttr('disabled',false);
}
else {
$('#language').attr('disabled',true);
}
});
});
</script>
Pls try firebug for the see the error of brackets.
Related
I am having a working while loading a div, $(document).ready(function() { works well before div load, but it stop working after div loaded. Why is it happening?
Here is the sample of code I am working with:
<div id="abc0">
<div id="abc">
<script>
$(document).ready(function() {
alert("test");
});
</script>
</div>
</div>
And here is the load function I am using:
$("#abc0").load('mypage #abc');
Use callback function for alert.
$("#abc0").load("mypage #abc > *", function(){
alert("test");
});
$(function() {
alert("test me");
});
Some time you have to write jQuery instead of $
jQuery(document).ready(function($) {
//do jQuery stuff when DOM is ready
});
<script src="<?php echo base_url();?>js/jquery.btechco.excelexport.js"></script>
<script src="<?php echo base_url();?>js/jquery.base64.js"></script>
<script>
$(document).ready(function () {
$("#btnExport").click(function () {
$("#tblExport").btechco_excelexport({
containerid: "tblExport"
, datatype: $datatype.Table
});
});
});
</script>
<Table id="tblExport">
<tr><td><button id="btnExport" >Export</button></tr>
<tr><Td>Name</td></tr>
</table>
The same script is working perfect for one website and is not working in another. the only difference between these is bootstrap and codeigniter. Will this plugin does not work with bootstrap css. Is there a way to resolve this conflict or anything else is the error?
I am using bootstrap for my project.
Two things I want to do.
Display the book records.
On clicking on any book show a pop-up and this pop-up will have the record list which can be edited(inline edit)
I have two set of jQuery files (one is for modal window and the other one is for inline editable).
<script src="jquery-2.0.3.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="js/bootstrap-modalmanager.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="bootstrap-editable.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="modal"]').click(function (e) {
e.preventDefault();
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function (data) {
$('<div class="modal hide fade">' + data + '</div>').modal();
}).success(function () {
$('input:text:visible:first').focus();
});
}
});
$('.bookname').editable({
type: 'text',
url: 'post.php',
title: 'Enter username',
validate: function (value) {
if ($.trim(value) == '') {
return 'This field is required';
}
}
});
});
</script>
Here is my html code:
<a data-target="#" class="bookname" id="bookname" href="pop1.php?id=<?php echo $row['book_id']; ?>" data-toggle="modal"> <?php echo $row['book_name']; ?></a>
When I run both the js files seperately I see no issues. When I try to integrate the inline edit inside a modal window there is problem with the modal window close button and also with the inline edit is not working.
Is the issue related to version(version problem)
Any one have faced such problems. Can someone help me out or guide me with an example.
Thanks
Kimz
Hello I have a php page that show 10 articles with read more button hidden all I need is when I hover on the article box the read more show everything is working fine expect when I hover on anything it show read more on first article only not every article
This is my php code
$query = mysql_query("SELECT * FROM stories ORDER BY id DESC LIMIT 0,10");
while ($row=mysql_fetch_array($query))
{
echo "<div class='content_story_block'>
<div class='content_story_block_menu'>$row[title]
<div id='Read_More' style='display:none;' class='content_story_block_menu_span'>Read More</div>
</div>
<div class='content_story_block_row'>$row[brief]</div>
</div>";
}
and this is my jquery code
<script type="text/javascript">
$('.content_story_block').hover(function() {
$('#Read_More').toggle('slow', function() {
// Animation complete.
});
});
</script>
what am I missing ?
Change Read_More from id to class:
<div style='display:none;' class='content_story_block_menu_span Read_More'>
Read More</div>
Then change your script:
<script type="text/javascript">
$('.content_story_block').hover(function() {
$(this).find('div.Read_More').toggle('slow', function() {
// Animation complete.
});
});
</script>
try this
<script type="text/javascript">
$('.content_story_block').hover(function() {
$('.content_story_block_menu_span').each(function(){
$(this).toggle('slow', function() {
// Animation complete.
});
})
});
<script type="text/javascript">
$('.content_story_block').hover(function() {
$(this).next('#Read_More').toggle('slow', function() {
// Animation complete.
});
});
</script>
I am using jQuery to load a page by AJAX using $.ajax (suppose test.html).Its a simple HTML document with a few buttons and associated animations upon clicking them (also using jQuery).The .click() properties associated are working fine when I load the page directly but the buttons fail to respond when I click them in the AJAX loaded version.Since I am too tires to actually explain all the glum that I am doing, I am simply writing all the code below, apologies for this. Here are the required codes in the files.
<!-- p11.php -->
<!DOCTYPE html">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="c/js/jquery.js"></script>
<script type="text/javascript" src="c/js/jtry11.js"></script>
<link rel='stylesheet' type='text/css' href='c/css/css11.css'>
</head>
<body>
<button id="go1">Load Something Using AJAX</button>
<div id="msg"></div>
<div id="showButton">
<button id="showLoadedPage">Show the Page</button>
</div>
<div id="results"></div>
</body>
</html>
and the next
$(document).ready(function()
{
$('#results').hide();
$('#msg').hide();
$('#showButton').hide();
$('#loading').hide();
$('#loaded').hide();
$('#load').live('click', function()
{
$('#load').hide();
$('#loading').show();
$('#msg').show('fast');
$.ajax({
url: 'test.html',
cache: false,
success: function(html) {
$('#results').append(html);
}
});
$('#msg').ajaxSuccess(function(evt, request, settings){
$(this).append('Click the Button Below to View the Page');
$('#showButton').show('slow');
$('#hideLoadedPage').hide();
$('#loading').hide();
$('#loaded').show();
});
});
$('#showLoadedPage').live('click', function() {
$('#loaded').hide('slow');
$('#msg').hide('slow');
$('#results').show('fast');
$('.shower').hide();
$(this).hide();
$('#hideLoadedPage').show();
});
$('#hideLoadedPage').live('click', function() {
$('#results').hide('fast');
$('.shower').hide();
$(this).hide();
$('#showLoadedPage').show();
});
$('.hider').live('click', function() {
$('.shower').show();
$(this).hide();
$('p.one').hide('slow');
$('p.two').hide('medium');
$('p.three').hide('fast');
});
$('.shower').live('click', function() {
$('.hider').show();
$(this).hide();
$('p.one').show('slow');
$('p.two').show('medium');
$('p.three').show('fast');
});
$('p.*').live('click', function() {
$(this).hide('slow');
if( $('p').is(':hidden') ) {
$('.shower').show();
}
if( $('p.*').is(':hidden') ) {
$('.hider').show();
}
});
});
and the last
<!-- test.html -->
Page Loaded by Ajax.
Not the original Page
<center>
<button class="hider">
<img src="c/images/zoom_out.png" alt="zoom_out" />
Hide 'em
</button>
<button class="shower">
<img src="c/images/zoom_in.png" alt="zoom_out" />
Show it
</button>
<p class="one">Hiya</p>
<p class="two">Such interesting text, eh?</p>
<p class="three">The third Paragraph</p>
</center>
I hope I am not making some big time mistake?
Sounds like you need
$('#go1').live('click', function() {});
$.fn.live, as event handlers are only registered on initial dom creation, and you're repopulating the DOM and those aren't attached.
More info # http://docs.jquery.com/Events/live
If i'm reading that right you are adding the click handlers at the beginning. These only affect current buttons. You may just need to change that to a Live event.
$("#peopleResult_list").on('click','a', function(event){
//do you code here
});
on event work for current dom in your page and any dom loaded by ajax in the future