Hi all,
When I was doing some JQuery and PHP,
I noticed the If-else patterns were treated differently and varied from one language to another.
Say I got a simple input text field in a HTML
and I was using some Ifs and Elses to check the value input into the text field.
Text: <input type="text" name="testing"/>
In JQuery, I got some codes as follows:
if($("#testing").val()==1){
//do something
}
if($("#testing").val()=="add"){
//do something
}
else{
//do something
}
if($("#testing").val()=="hello"){
//do something
}
How come JQuery and PHP treated the Else statement differently?
I mean in JQuery, the third If statement was still proceeded even if it had gone to the Else statement,
but it stopped after the Else statement when I repeated the code in PHP script.
I'm working on an AJAX login system. Right now, when the user clicks on a link, the login form is dynamically loaded when the person clicks on a "log in" link. Since I'm using AJAX for this, I want to prevent the form from actually submitting when the submit button is clicked. I tried the following code as part of my load function, and the form loads correctely, but the form still submits normally.
$('#loginBox').load('loginform.php');
$('#loginBox form').submit(function(event) {
event.preventDefault();
});
How can I fix this?
Hi
Case is I want to prompt a message (Do you want to save changes?) if text box default value is updated on .aspx page before submitting the page. I am using .text() to compare with .val().
It works fine in firefox but failing in IE7 and IE8
if ($("#<%=txt1.ClientID%>").attr("value") === $("#<%=txt1.ClientID%>").text())
return(true);
return confirm('Do you wish to save these changes?');
I have worked out how to fade an element in:
Click here to view the page
If you click on the heading Posture 1 : Standing Deep Breathing : you will notice the element fades in as it should. If you now click on posture 2 you will see the element fades in below posture 1. I need to be able to swap posture 1 with posture 2.
I have a total of 26 postures that all have images that need to fade in and then be swapped with another image when another heading is clicked.
$(document).ready(function(){
$('#section_Q_01,#section_Q_02').hide();
$('h5.trigger#Q_01').click(function(){
$('#section_Q_01').fadeIn(2000) ;
});
$('h5.trigger#Q_02').click(function(){
$('#section_Q_02').fadeIn(5000) ;
});
});
and the html
<div id="section_Q_01" class="01">
<div class="pics">
<img src="../images/multi/poses/pose1/Pranayama._01.jpg"/>
<img src="../images/multi/poses/pose1/Pranayama._02.jpg"/>
<img src="../images/multi/poses/pose1/Pranayama._03.jpg"/>
</div>
</div>
<div id="section_Q_02" class="02">
<div class="pics">
<img src="../images/multi/poses/pose2/Half_Moon_Pose_04.jpg" />
<img src="../images/multi/poses/pose2/Backward_Bending_05.jpg" />
<img src="../images/multi/poses/pose2/Hands_to_Feet_Pose_06.jpg" />
</div>
</div>
I need to be able to swap a total of 26 elements #section_Q_01 - #section_Q_26
Any help appreciated
info = {'phone_number': '123456', 'personal_detail': {'foo':foo, 'bar':bar}, 'is_active': 1, 'document_detail': {'baz':baz, 'saz':saz}, 'is_admin': 1, 'email': '[email protected]'}
return HttpResponse(simplejson.dumps({'success':'True', 'result':info}), mimetype='application/javascript')
if(data["success"] === "True") {
alert(data[**here I want to display personal_detail and document_details**]);
}
How can I do this?
I want to change hidden input value on div click, so i do following:
$('#gallery').click(function(){
if ($('input[name=isgallery]').attr('value') == '0') {
$('input[name=isgallery]').attr('value', '1')
}
else {
$('input[name=isgallery]').attr('value', '0')
}
$('#filterform').attr('action',$('#filterform').attr('act'));
alert('ok');
$('#filterform').submit();
}
);
when it equals 0 i change it to 1 and otherwise
but it did not work
and following code works:
$('#gallery').click(function(){
if ($('input[name=isgallery]').attr('value') == '0') {
$('input[name=isgallery]').attr('value', '0')
}
else {
$('input[name=isgallery]').attr('value', '1')
}
$('#filterform').attr('action',$('#filterform').attr('act'));
alert('ok');
$('#filterform').submit();
}
);
and also, when i delete the function at all it still works
and form submits
maybe i have one more handler for this div, but i can't find one
you can check it on
http://www.4block.org/en/museum/posters
and click "gallery view" on top-right
Hi,
I want to pass the result of a query trough a $.post.
function GetAllTasks()
{
$sql = "select t.id as task_id,
description,
createdat,
createdby,
max_requests,
max_duration,
j.name as job_name
from darkfuture.tasks t, darkfuture.jobs j
where t.job_id = j.id";
$sqlresult = mysql_query($sql)
or die("The list of works failed: ".mysql_error($this->con));
$result = array();
while($row = mysql_fetch_assoc($sqlresult))
{
$task = new TasksResult();
$task->id = $row["task_id"];
$task->description = $row["description"];
$task->createdat = $row["createdat"];
$task->createdby = $row["createdby"];
$task->max_requests = $row["max_requests"];
$task->max_duration = $row["max_duration"];
$task->job_id = $row["job_name"];
array_push($result, $task);
}
mysql_free_result($sqlresult);
return $result;
}
Here is how i call it:
$tasksDB = new TasksDB();
$tasks = $tasksDB->GetAllTasks();
Now i want to pass $tasks through here:
$.post("views/insert_tasks.php",{'tasks[]': $tasks}, function(data)
{
});
I know this {'tasks[]': $tasks} it's wrong but i don't know how to do it right.
Some help will be appreciated.
Thanks in advance!
I want to do something like this:
$('.dynamicHtmlForm').validate = function() {
return true;
}
$('.dynamicHtmlForm .saveButton').click(function() {
if (!$(this).closest('.dynamicHtmlForm').validate()) {
return false;
}
return true;
});
And then when I have a form of class dynamicHtmlForm, I want to be able to provide a custom validate() function:
$('#myDynamicHtmlForm').validate = function() {
// do some validation
if (there are errors) {
return false;
}
return true;
}
But I get this when I do this:
$(this).closest(".dynamicHtmlForm").validate is not a function
Is what I've described even possible? If so, what am I doing wrong?
I am using this:
var title = $('#input').val();
$('#titleset').click(function (){
$('#title').html('<h1>' + title + '</h1>');
alert(title);
});
to try to get the value of an input box and then when the user clicks the button #titleset, overwrite the value from the input box to the <h1> element that is already there.
i have been able to get the click to overwrite the <h1> element, but there is nothing in the title variable to write into the element. so how could i return a string from the #input id and write it to the #title id which is an <h1> element
here is my html
<h1 id="title">This Title Changes To What You Want It To Be</h1>
<ul class="menu1">
<li>menu one
<ul>
<li id='inputbox'><input type ="text" id="input"/></li>
<li id="titleset1"><input type="button" value="set title" id="titleset"/></li>
</ul>
</li>
</ul>
E.g
<div class="container">
<div class="inside">I am not fire when click me</div>
</div>
$('.container').click(function(){
// container do something here
});
but,when I click the div inside it also trigger the container's click event because the div is inside the container, so , I need a way to prevent the container event trigger when I click on the inside div!
Thank you very much!!
I have three divs, 1 floated left and the other two floated right (they're stacked).
I'm trying to combine the height of the two on the right and apply that height to the one on the left.
This is what I have, with no luck
$(window).bind("load", function() {
var slw = $('div.2').height();
var lw = $('div.3').height();
var result = slw += lw;
$('div.1').css({
'height': result + 'px'
});
});
TIA
I thought it would be simple but I still can't get it to work. By clicking one button, I want several animations to happen - one after the other - but now all the animations are happening at once. Here's my code - can someone please tell me where I'm going wrong?:
$(".button").click(function(){
$("#header").animate({top: "-50"}, "slow")
$("#something").animate({height: "hide"}, "slow")
$("ul#menu").animate({top: "20", left: "0"}, "slow")
$(".trigger").animate({height: "show", top: "110", left: "0"}, "slow");
});
I need to trigger a click function assigned to a checkbox, but without actually changing it's checked state (which click() does).
Scenario: I have a form with several checkboxes that when selected reveal a textarea. This works fine, but I also need to call the click() function on $(document).ready()
My code is below, please note I have very limited access to changing the generated html. I have an object (admin_panels) which will store each checkbox and the texarea it should bring up.
var admin_panels = {"checkbox-id" : "textarea-id"};
$(document).ready(function(){
for (var elem in admin_panels) {
$("#" + elem).click(admin_slide);
// $("#" + elem).click();
}
})
function admin_slide() {
if ($(this).is(":checked")) {
$("#" + admin_panels[this.id] + "-wrapper").slideDown();
}else{
$("#" + admin_panels[this.id] + "-wrapper").slideUp();
}
}
Thanks
Wordpress wraps images with captions in a div with a class of .wp-caption.
I'm looking for a way to select images that don't have this div so I can wrap them in different div. (to keep a consistent border around all the images)
<div class="blog-post-content">
<div id="attachment_220" class="wp-caption alignleft" style="width: 310px">
<a href="/somewhere/"><img class="size-medium wp-image-220" src="/path/to/image" alt="" width="300" height="280" /></a>
<p class="wp-caption-text">Caption Text</p>
</div>
<p>This is the body of the post</p>
</div>
To test my selector, I'm just trying to add a green border. I can handle the .wrap() once the selector is working.
The most promising of my attempts is:
$('.blog-post-content img').parent('div:not(".wp-caption")').css('border', '2px solid green');
... but no luck.
I 'm writing a code with JS and I don't know how to populate array when clicking on button. We have this code, which uses a list (ul), where the items (li) can be moved with mouse. How can do onclick to populate an array with 2 data, its first position and the last position?
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<script>
$(function() {
$( ".documents" ).sortable();
$( ".documents" ).disableSelection();
});
</script>
<meta charset="utf-8">
<title>toArray demo</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
Reversed - <span></span>
<ul id="opciones" class="documents">
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
<script>
function disp( li ) {
var a = [];
for ( var i = 0; i < li.length; i++ ) {
a.push( li[ i ].innerHTML );
}
$( "span" ).text( a.join( " " ) );
}
disp( $( "li" ).toArray() );
</script>
<input type="button" value="actualizar_array" onclick="disp('#opciones')" />
</body>
</html>
I got something that I want to do and want to see what you guys think and how can it be implemented.
I got a form in a page and the form will submit to itself to perform some process (run functions) in a class.
Upon clicking the submit button, I want to animate the button text to
“SUBMIT .” -> “SUBMIT ..” -> “SUBMIT …” -> “SUBMIT ….” -> “SUBMIT ….” and then back again.
Sort of “animate” the button text.
Once the whole process is done, the button text will goes back to be “SUBMIT” text again.
Please note that I am not looking for image button solution, meaning that I do not want to implement gif animated button image.
Anyone done this before or know how this can be done? I have google but seems nothing of this kind to be found.
Thanks!
AL
I've got an html table:
<table><tr>
<td>M1</td>
<td>M2</td>
<td>M3</td>
<td>M4</td>
</tr></table>
and a simple jQ script:
$('td').click(function(){ alert( $(this).html() ); });
That works just fine.... but in the real world, I've got several hundred table cells and the code is formatted improperly in places because of several people editing the page.
So if the html is:
<td>
M1
</td>
then the alert() is giving me all the tabs and returns and spaces:
What can I do to get ONLY the text without the tabs and spaces? I've tried .html(), .val(), .text() to no avail. Thanks!
I have a table body that grabs it's rows (and form fields) via AJAX on various events. Everything is working fine, except one part: I can't obtain form data from any of the table's rows after it gets manipulated.
I've played around with the live() function, but I can't seem to get the right setup to pull in the form data.
Any ideas?
Hi,
I need a little help to figure out why the following code does not work on google chrome 5/windows xp. It works well on all other browsers (IE, FF, Safri, Opera etc). Can someone shed some light around this?
/* AJAX Request */
jq("#a-post-request").unbind("click").bind("click", function(e){
//jq("#loading").css({"display":"block"});
jq.ajax({
url: "search_data_table.html",
type: "get",
cache: false,
error: function(){alert ("No data found for your search.");},
success: function(data){
jq("#search-results-table tbody").empty().append(data);
jq("#search-results").css({"display":"block"});
jq("#search-results-table").trigger("update"); // this one is for the table sorter plugin
// set sorting column and direction, this will sort on the first column.
var sorting = [[0,0]];// this one is for the table sorter plugin
// sort on the first column .
jq("#search-results-table").trigger("sorton",[sorting]);// this one is for the table sorter plugin
e.preventDefault();
}
});
});
Many thanks,
Racky
Hi,
I have a simple problem that I cannot seem to find a solution to.
Basically on this website here: http://dev.supply.net.nz/vendorapp/ (currently in development)
I have some fancy label animations sliding things in and out on focus & blur.
However once the user has logged in once the browser will most likely remember the password associated with the users email address/login. (Which is good and should not be disabled.)
However I run into issues triggering my label slide out animation when the browser sets the value on the #password field automatically as the event for this is neither focus nor blur.
Does anyone know which listener to use to run my function when the browser 'auto fills' the users password?
Here is a quick screenshot of the issue:
Give the following on a page:
<iframe frameborder="0" allowtransparency="true" tabindex="0" src="" title="Rich text editor" style="width: 100%; height: 100%;" id="hi-world">
<p><span class="tipoff" title="System tooltip for search engines">Download now</span></p><p>adasdads</p><p>a</p><p><span class="tipoff" title="System tooltip for search engines">Download n1111ow</span></p>
</iframe>
The following works:
$('#hi-world').css("width","10px");
But what I want to do is change the paragraphs in the iFrame, and this does not work:
$('#hi-world').find('p').css("background","red");
Please see this jsfiddle - http://jsfiddle.net/paul724/HXb6v/
What is working:
The datepicker displays correctly, picks up the css for todays date and on hover.
The dialog box follows the mouse
On click the dialog box "stops" and displays a link
What I want to achieve
When a table cell is hovered over the title of the dialog box shows the date e.g "Mon 8th Oct 2012"
When a table cell is hovered over the html of the dialog box shows the events for that day in list format
(there is code that succesfully retrieves the first row in function getSelectedDates() )
function getSelectedDates() needs to be called in the hover event - showing multiple events for that date in the dialog box
I hope that if we can display the date being hovered over in the title of the dialog then we can use the same information to retrieve the rows from the database to populate the html of the dialog for that day
Of Note: This is more of a curiosity question than anything else.
Given a List<Window> where each window has an event attached to the Close Event which removes the window from the collection, how could you use delegates / events to defer the execution of the Close Event until the collection has been iterated?
For example:
public class Foo
{
private List<Window> OpenedWindows { get; set; }
public Foo()
{
OpenedWindows = new List<Window>();
}
public void AddWindow( Window win )
{
win.Closed += OnWindowClosed;
OpenedWindows.Add( win );
}
void OnWindowClosed( object sender, EventArgs e )
{
var win = sender as Window;
if( win != null )
{
OpenedWindows.Remove( win );
}
}
void CloseAllWindows()
{
// obviously will not work because we can't
// remove items as we iterate the collection
// (the close event removes the window from the collection)
OpenedWindows.ForEach( x => x.Close() );
// works fine, but would like to know how to do
// this with delegates / events.
while( OpenedWindows.Any() )
{
OpenedWindows[0].Close();
}
}
}
Specifically, within the CloseAllWindows() method, how could you iterate the collection to call the close event, but defer the event being raised until the collection has been completely iterated?