Well... I don't know what's going on. I have this code which works normally but the checkbox doesn't append anything or doesn't notify the script which really puzzles me. The php code creating the checkbox is:
echo '<div id ="school_content"><h3>School</h3>';
while($row = mysqli_fetch_array($result))
{
echo '<p><input type="checkbox" onClick="ILike()" />'.$row["School"].'</p>';
}
echo '</div>';
Here is the plain HTML File:
<div id="container" class="row">
<div id="School" class="col"></div>
<div id="Department" class="col"></div>
<div id="Level" class="col"></div>
<div id="Source" class="col"></div>
<div id="Coding" class="col"></div>
</div>
<input type='submit' value='Show Result' id='result' onClick=""/>
<div id="dump_here">The dumping area:</div>
And here is the javascript code appending. I don't know why this is not working:
$('#dump_here').append("test");
function ILike(){
$('#dump_here').append("test");
}
It feels really weird. The first line is working fine. By the way... The function is enclosed inside a document ready but putting it outside document ready doesn't work.
jQuery imports properly as I am using AJAX there too.
onClick("ILike()") isn't the right syntax. It should be:
onClick="ILike()"
change it like this
echo '<div id ="school_content"><h3>School</h3>';
while($row = mysqli_fetch_array($result))
{
echo '<p><input type="checkbox" onclick="ILike()" />'.$row["School"].'</p>';
}
echo '</div>';
this is incorrect onClick("ILike()")
The right way is onClick onClick="ILike();"
your syntax in the input element is incorrect. The correct is:
<input type="checkbox" onclick="ILike()" />
You can use your browser console to find issues like that one, which can greatly help you :D
Also, I recommend you to put javascript code in the head of your HTML document:
<head>
<script type="text/javascript">
$().ready(function(){
$(".checkboxILike").click(function(){
ILike();
});
});
</script>
</head>
Of course, you will need put a class named checkboxILike in every checkbox that will call the function
Related
I know there are already a few questions like mine but I wasn't able to fix my problem with their solutions.
I got this code in an external html file to include it in others files:
<div class="header">
<h1 class="replace-me">I'am a placeholder</h1>
</div>
The "file" above gets included into this "file":
<h2 style="display: none" class="variable">Hey, I'm a variable</h2>
The Variable from the second code should replace the content of the h1 tag in the first code. I know this isn't a forum to get free codes, I just want some inspirations or suggestions. Thanks Guys!
You can replace the html of one element with the html of another element, like so:
$(".replace-me").html($(".variable").html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<h1 class="replace-me">I'am a placeholder</h1>
</div>
<h2 style="display: none" class="variable">Hey, I'm a variable</h2>
However, as Rama Schneider pointed out, you might want to get your content in a different way than html.
Also note that this jQuery-solution is done client-side. If you already know the content when serving the initial HTML, you want to do this server-side.
If you have control over the external file, I'd suggest rewriting things so the external file serves a json object of some sort and work with your data from there.
Otherwise it's a simple matter of using JQuery to get the html contents from the variable and use that value to replace the html contents of the 'replace-me'.
You should solve this on server-side if you can. Make the common template a function, like this:
function getHeader($content) { ?>
<div class="header">
<h1 class="replace-me"><?php echo $content; ?></h1>
</div> <?php
}
calculate $content before you call the function and pass it to the function. If you cannot make this a function and you get this as it is from a third-party source, then you can do it via Javascript, like this:
<script type="text/javascript">
document.getElementsByClassName("header")[0].getElementsByClassName("replace-me")[0].innerHTML = "<?php echo $content; ?>";
</script>
Make sure you add this script after the header tag was loaded.
I have a simple problem with no way to manage a simple check online to our customers code presence on their website page. For instance they have to embbed a html code like this one :
<div class="Aclass">
<div data-tag="123456" class="Mandatory Mandatory-test></div>
<div class="Mandatory Mandatory-dialog">
<div class="Mandatory Mandatory-test2"></div>
</div>
<script type="text/mustache" name="landing/Execute">
<a data-tag="Execute-test">Manage</a>
</script>
</div>
I want to be able to know if the code is properly instlled in the website with a timed check like a cron for instance.
Thank you for your help
You could use stripos(), it will return false if it doesn't find this string in the user's HTML page. Looks like:
$code = "<div class=\"Aclass\">
<div data-tag=\"123456\" class=\"Mandatory Mandatory-test\"></div>
<div class=\"Mandatory Mandatory-dialog\">
<div class=\"Mandatory Mandatory-test2\"></div>\n </div>\n <script type=\"text/mustache\" name=\"landing/Execute\">\n <a data-tag=\"Execute-test\">Manage</a>\n </script>\n</div>";
if(!stripos($codeOfPage,$code)){
// Your code isn't present in the page
}
I've been trying to get this code to work for the past day whilst searching through these forums but without any success.
I'm looking to hide a container div if one of the div's inside has no content.
The script I've got is below:
$('.video-centre').each(function(){
if ($(this).find('.video-thumb p').text().length == "")
$(this).find('.video-centre').css("display", "none");
});
The HTML that I'm trying to apply this to is below:
<div class="video-centre">
<div class="video-point">
<img src="<?php echo get_bloginfo('template_url') ?>/images/video-point.jpg" alt="video pointer" />
</div>
<div class="video-thumb">
<?php the_field('testimonials'); ?>
</div>
<p class="video-more">
View More
</p>
<div id="expandable-1">
<div class="video-thumb">
<?php the_field('testimonials_hidden'); ?>
</div>
<p class="video-close">
Close
</p>
</div>
</div>
Basically, within wordpress, the client will have the opportunity to add videos, it's a bit long winded but they get wrapped in p tags. However if they don't upload anything to a specific area, I would like the container div to have display:none, resulting in only containers being shown if videos have been uploaded.
If there's an easier way to look at the div and say if it's empty then get container div to display none I'd be happy to try that.
Use :empty pseudoclass
if ($(this).find('.video-thumb p').is(':empty'))
this checks if you have an empty paragraph (<p></p>), while
if ($(this).find('.video-thumb').is(':empty'))
checks an empty .video-thumb element
After your edit: if you have spaces inside div the condition return false so it's better to simple check
if ($(this).find('.video-thumb p').length === 0)
Example Fiddle : http://jsfiddle.net/6nyF8/6/
You could do it in several ways.
$('.video-centre').each(function(){
if($(this).find('div.video-thumb').html('') == '')
$(this).hide();
});
OR
$('.video-centre').each(function(){
if($(this).find('div.video-thumb').children().length == 0)
$(this).hide();
});
if ($(this).find('.video-thumb p').text() == "")
or
if ($(this).find('.video-thumb p').is(':empty'))
Hope I understand the Q, here's the fiddle I came up with. Nice and simple.
if ($('.video-centre').find('div:hidden').size() > 0) {
$('.video-centre').children().hide();
}
i would try remowing line feeds between html tags and
<div class="video-thumb">
<?php the_field('testimonials'); ?>
</div>
should be
<div class="video-thumb"><?php the_field('testimonials'); ?></div>
but you could also do the trick in PHP:
<?php if (the_field('testimonials')=="") $style=" style='display:none'";?>
<div class="video-thumb" <?php print $style;?>>
<?php the_field('testimonials'); ?>
</div>
You can also check string with striptags function so from your "testimonials" value remove tags using php in built function "striptags" so now only text will remain which can be compare easily.
i am using jquery version 1.3.2. i face a strange issue. in IE9 my application works fine , but in IE8 this functon not working
jQuery('.mutulafriends').live('click',function(){});
i just put an alert inside this function but not working , seems it is not identifying the click. in the console i can see a error
SCRIPT87: Invalid argument.
jquery-1.3.2.min.js, line 12 character 12949
when i use this function with the alert
jQuery('.mutulafriends').click(function(){
alert("");
});
works perfectly. but the error is also shown:
SCRIPT87: Invalid argument.
jquery-1.3.2.min.js, line 12 character 12949
seems that error is not affecting the click. i know that for jquery version 1.3.2 live('change' is not working but why live('clck' is not working? any ideas , please help. thanks in advance. this is my HTML. it may be too long , but i think it may help.
<div class="component-list-wrapper">
<?php if(is_array($result) && count(array_filter($result)) > 0) {
foreach($result as $record) {
?>
<div class="eliment-component-list eliment-divider">
<div class="user-profile-img-holder">
<img alt="Profile image"
src=<?php if(isset($record['ProfileImg'])){echo $img_url.md5($record['ProfileID'])."/default/".$record['ProfileImg'];}else{echo $this->config->item('ivory_img_path')."/thumb-img.png";} ?> />
</div>
<div class="user-des-container">
<div class="user-des-left">
<div class="namecontainer">
<label class="darkcolour-large"><?php echo $record['FirstName']; if($record['PrivacySettingFriend']){echo " ".$record['LastName'];} ?></label> <label
class="lblsub"><?php echo $record['StateName'].', '.$record['CityName']; ?></label>
</div>
<div class="friendcontainer">
<label img_url="<?php echo $img_url; ?>" req_type="recieved" friend_id="<?php echo $record['ProfileID']; ?>" class="darkcolour margine-top20 mutulafriends btndialogMutualFriends"><?php if(!isset($record['CommonFriendCount'])){echo "0 Friends in Common";}else if($record['CommonFriendCount']!=1){echo $record['CommonFriendCount']." Friends in Common";}else{echo $record['CommonFriendCount']." Friend in Common";} ?></label>
</div>
</div>
<div class="user-des-right">
<div class="user-des-right-inner">
<img width="13" height="13" class="btnDialogDelete request_del_dialog_open_but" req_type="recieved" prof_friend_id="<?php echo $record['ProfileFriendID']; ?>"
src="<?php echo $this->config->item('ivory_img_path'); ?>close_button.png"
alt="Profile image">
<div class="button-wrapper">
<input type="button" class="btnRequest btn-white-small request_accept_dialog_open_but" name="" prof_friend_id="<?php echo $record['ProfileFriendID']; ?>"
tabindex="123456" value="Accept">
</div>
<div class="button-wrapper">
<input type="button" class="btnDialogAssign btn-grey-small request_decline_dialog_open_but" prof_friend_id="<?php echo $record['ProfileFriendID']; ?>"
name="" tabindex="123456" value="Decline">
</div>
</div>
</div>
</div>
</div>
<?php }
} else {?>
<div class="no-records-found">No records found</div>
<?php } ?>
</div>
try using a the latest jQuery. It might solve your problems. There might be some bugs/deficiencies in that version that could have been addressed in the later versions of jQuery.
the current version as of this answer is 1.7.2 and .live() has been deprecated, and it's replacement is .on().
Also, I pretty much assume you are relying solely on the end error alert, which ends up in the jQuery library. It's not very informative. check your stack traces to check where your errors might possibly originate. try adding break points to know what the values are at a certain part of execution. I have confidence in jQuery and it might just be that you have provided some wrong values to it. check for typos also.
Your class 'mutulafriends' doesnt required dynamic binding,so 'click' is enough i think
Wrap it in
$(document).ready(function(){
jQuery('.mutulafriends').click(function(){
alert('And update your JQuery to the latest one :=)');
});
});
//Delegate method
$(document).ready(function(){
jQuery('div.component-list-wrapper').delegate('.mutulafriends','click',function(){
alert('And update your JQuery to the latest one :=)');
});
});
Live or delegate methods are used only for latebindings which means elements that are generated after page load,Eg generated via an ajax call
This is a newbie question: Can the following HTML/JavaScript code be further simplified by just keeping the DIV to be updated + the INPUT button?
<div id="main_section" name="main_section">
<div id="update_div">Old stuff</div>
<input type="button" value="Update" id="update_button"/>
</div>
<script type="text/javascript" src="/jquery.js"></script>
<script type='text/javascript'>
$("#update_button").click(function() {
$("#update_div").html("New stuff");
})
</script>
Thank you.
You can even inline JavaScript code in your HTML but that is a horrible practice unless you know exactly what you're doing. Reads as:
<div id="update_div">Old stuff</div>
<input type="button" value="Update" onclick="$('#update_div').html('...')" />
If you want to encode the knowledge of what gets updated with that on click, then you can encode that knowledge in the HTML elements itself.
<div id='target'>Old</div>
<input type='button' value='Update' data-target='#target' date-value='New' />
In jQuery's onload, define this for all such buttons:
Since the data seems to be static here, a better global approach might be to define the data on the elements itself, and setup all handlers in one global sweep of the DOM.
$(function() {
$(':button').click(function() {
var dest = $(this).attr('data-target');
var value = $(this).attr('data-value');
$(dest).html(value);
});
});
The above code still requires external JavaScript but only need it once for all such button and div elements on the page.