In my project, $('#cenDiv').html(data) can work successfully in ajax. Then I want to click the checkbox of selAllAttId, and do something;
If I use onclick="selAllAtt()", and selAllAtt() method can be called successfully, but $(this).attr("checked") became to be true always after finishing the selAllAtt() method, so $(this).attr("checked") is always false and alert("checked") always can not work.
So I want to change another way with $('#selAllAttId').on("change",function(){}) But unlucky, alert("test) can no work. Who can help me?
Here is js code:
<script>
$(document).ready(function()
{
$('#selAllAttId').on("change",function(){
alert("test");//can not work
});
});
function corpAnn()
{
$.ajax({
dataType:'html',
type:"POST",
url:"oat.php",
data: {oaAnn:oaAnn},
success:function(data)
{
$('#cenDiv').html(data);
}
});
}
function selAllAtt(){
alert("checkbox");
var xzyId=document.getElementById('xzyId');//fetch other table id
var checked=xzyId.getElementsByTagName('input');//fetch all table checkbox successfully
if($(this).attr("checked"))//always false.
{
alert("checked");
for(i=0;i<checked.length;i++)
{
checked[i].checked=true;
}
}
else
{
alert("delete");
for(i=0;i<checked.length;i++)
{
checked[i].checked=false;
}
}
});
</script>
<div id="cenDiv"></div>
The code of oat.php is:
echo '<td style="color:Maroon" bgcolor="#888888">
<input type="checkbox" id="selAllAttId" onclick="selAllAtt()">
<b>Num</b>
</td>';
You can use the native HTML node like this:
var checkbox = document.getElementById('selAllAttId');
if(checkbox.checked)
{
// do something
}else{
// do something else
}
Related
Is it possible to using ajax call in a loop?
Here I want, when I single click on button then the ajax call will called 10 times. below is my code. Don't know is it good practice or not.
But I need this type of solution. How can I do it? thank you.
HTML:
<button>Click</button>
AJAX :
$(document).ready(function(e) {
$('button').click(function(){
for(var i=1;i<=10;i++){ //is it possible ?
$.ajax({
type:'POST',
url : "a.php",
data:'a='+$('.div1').text(),
success: function(result){
$('.div1').html(result);
}
});
}
});
});
a.php :
<?php
if(!isset($_POST['a']) || $_POST['a'] == ""){
$a = 0;
}
else{
$a = $_POST['a'] + 1;
}
echo $a;
exit();
?>
try this:
$(document).ready(function(e) {
var ajaxCalled=0;
$('button').click(function(){
$.ajax({
type:'POST',
url : "a.php",
data:'a='+$('.div1').text(),
success: function(result){
$('.div1').html(result);
ajaxCalled++;
if(ajaxCalled<=10){
$('button').trigger('click');
}
else{
ajaxCalled=0;
return false;
}
}
});
});
});
I created a small function to test Zend-Ajax interaction.
In my view I set following code
<script type="text/javascript">
var urlform = '<?php echo $this->url('inbox/default', array('controller'=>'messages', 'action'=>'addmessage')); ?>';
</script>
<div onclick="ajaxtest();">Click</div>
Then, I created following function within file custom.js, already associated to the layout
function ajaxtest() {
$.post(urlform, null, function(data) {
if (data.success) {
alert('Ok');
} else {
alert('Failed');
}
}, 'json');
}
And finally, this is the code of my addMessageAction
public function addMessageAction()
{
$request = $this->getRequest();
$response = $this->getResponse();
$response->setContent(\Zend\Json\Json::encode(array('success'=>1)));
return $response;
}
When I click on the div associated to the javascript function, nothing happens, no alert is displayed.
Where am I wrong? Does it depend on particular zend settings?
I solved the problem by ridefining function in the following way:
var ajaxpost = $.post(urlform2).fail(function() {
alert("Failed");
})
ajaxpost.done(function(data) {
var parsed = jQuery.parseJSON(data);
if (parsed.success == 1) {
alert('Ok');
}
});
I have a collapsible part of my jQuery Mobile page that are generated from PHP output from a MS Sql databas and content render as I like it to so that part is ok.
in each section I create a form with 3 buttons and they are supposed to have unique Id:s.
All forms are also created to have a unique id created in runtime.
actions.php (renders out my elements into mobilepage i a DIV)
$counter=0; reset counter for ID:s
while (odbc_fetch_row($rs)){
// data output from Db to make like 10 collapsible with different data
$html = "";
$html = "<div data-role='collapsible-set' data-mini='true'>";
$html.="<div data-role='collapsible' data-mini='true'>";
$html.="<h3><span style=float:left;><img src='../_pic/$image' alt='$imageText' /> ".substr($Time,0,16)." $Area</span><span style='float:right;' class='ui-btn-up-c ui-btn-corner-all' cnt> $data </span></h3>";
$html.="<p>ID: $ID $Id $Status<br />$Status $Description)</p>";
$html.="<form method='post' action=''>";
$html.="<button value='action1' id='action1$counter' data-mini='true' type='Submit'>Take Action1</button>";
$html.="<button value='action2' id='action2$counter' data-mini='true' type='Submit'>Take Action1</button>";
$html.="<button value='action3' id='action3$counter' data-mini='true' type='Submit'>Take Action1</button>";
$html.="<input type='hidden' id='id$counter' name='id' value='$dataName' />";
$html.="</form>";
$html.="</div>";
$html.="</div>";
echo utf8_encode($html);
$counter++; //upcount to make Id:s unique
} //end While
Then I have this function that listens for a button that submit:
$(':submit').live('click', function() {
var button = $(this).val();
if (button == 'action1') {
$.ajax({
url: '../_php/Functions.php',
data: 'button=' + $(this).val()+'&id='+$('#id').val(),
async: true,
beforeSend: function() {
$.mobile.showPageLoadingMsg(true);
},
complete: function() {
$.mobile.hidePageLoadingMsg();
},
error: function (request,error) {
alert('error');
}
});
}
return false;
});
I cant seem to get another id than the first one since i need to make all ID:s unique in my forms and all I do now is to check: &id='+$('#id').val(). what I would like to have done is to link the button pressed-id number to my hidden field id-number so i get the right data out from it. As of now I only get the first form:s id evaluated...
If someone could point me in the right direction how to make that happen i´d be greatful.
functions.php (a switch statement is pre-testing for submit:ed action
function actions1(){
try {
if(isset($_GET['id'])){
do stuff with 'id'
}else{
do other stuff with 'id'
}
} catch(Exception $e) {
show error
}
}
If some part is unclear or if you feel I missed posting somepart - let me know. /thanks
Within event handlers this referes to the element
$(':submit').live('click', function(){
var id= this.id;
var button = $(this).val();
/* traverse within form to set hidden input, no need to worry about using ID's for them*/
$(this).closest('form').find('input[name=id]').val(id);
/* then in ajax */
data: 'button=' +button+'&id='+id,
})
Not full code....I left some of your code out for simplicity
You can use jQuery .attr() function to get an id or any other attribute value of an element.
$(':submit').live('click', function() {
var button = $(this).val();
var id = $(this).attr("id");
if (button == 'action1') {
$.ajax({
url: '../_php/Functions.php',
data: 'button=' + $(this).val()+'&id='+ id,
async: true,
beforeSend: function() {
$.mobile.showPageLoadingMsg(true);
},
complete: function() {
$.mobile.hidePageLoadingMsg();
},
error: function (request,error) {
alert('error');
}
});
}
return false;
});
The solution was to go by attributes name of my hidden input.
var id = $(this).closest("form").find(':hidden').val();
On success, I would like to show different values depending on what value exists. For example, if $('#add').val() has a value in it I would like to show 'Video added" as part of the success function. If $('#remove').val() has a value in it, I would like to show 'Video removed' as part of the success function. Either #add or #remove will have a value in it at a given time. How do I enable this?
<script type="text/javascript">
$(document).ready(function() {
$("#test").submit(function(event){
event.preventDefault();
$.ajax({
type:"POST",
url:"/edit_favorites/",
data: {
'video_add': $('#add').val(), // from form
'video_remove': $('#remove').val() // from form
},
success: function(){
$('#message').html("<h2>Video added!</h2>")
}
});
return false;
});
});
</script>
If you are sure that only one of the textfields will have a value, you could do something like this:
$('#message').html('<h2>' + $('#add').val() !== '' ? 'Video added' : 'Video removed' + '!</h2>' )
if just checking text is enough you can use this code:
<script type="text/javascript">
$(document).ready(function() {
$("#test").submit(function(event){
event.preventDefault();
$.ajax({
type:"POST",
url:"/edit_favorites/",
data: {
'video_add': $('#add').val(), // from form
'video_remove': $('#remove').val() // from form
},
success: function(){
if ( $('#add').text() ) {
$('#message').html("<h2>Video added!</h2>");
} else if ( $('#add').text() ){
$('#message').html("<h2>Video removed!</h2>");
} else {
$('#message').html("<h2>Wasn't either add or remove!</h2>");
}
}
});
return false;
});
});
</script>
I assumed #add or #remove are text. The key is this if check:
if ( $('#add').text() ) {
//... add is not empty because there is some text in it...
If #add or #remove may contain text or any other element, you can check them with :empty selector:
if ( !$('#add:empty').length ) {
//... #add is not empty so something was added successfully ...
If #add or #remove are <input> elements like text box you can do the same check with:
if ( $('#add').val() ) {
//... add is not empty ...
I like to return a response when the backend script has executed, XML would look something like this
<status>true</status>
<successMessage>Video deleted</successMessage>
or
<status>false</status>
<errorMessage>Video not found on the server</errorMessage>
Javascript
success: function (response) {
if($(response).find("status").text()=="true"){
$(".success").html($(response).find("successMessage").text());
$(".success").show();
}else{
$(".error").html($(response).find("errorMessage").text());
$(".error").show();
}
}
I am currently creating a system where it has to be possible to check/uncheck a checkbox. Everytime it changes status I need jQuery to make an AJAX call to a page, that updates the database.
How can I do this?
For example you can do it like this:
First you have to look if the checkbox is checked:
$("#yourSelector").live("click", function(){
var id = parseInt($(this).val(), 10);
if($(this).is(":checked")) {
// checkbox is checked -> do something
} else {
// checkbox is not checked -> do something different
}
});
You can load specific content via Ajax:
$.ajax({
type: "POST",
dataType: "xml",
url: "path/to/file.php",
data: "function=loadContent&id=" + id,
success: function(xml) {
// success function is called when data came back
// for example: get your content and display it on your site
}
});
Which bit are you stuck on? You should probably have something like this...
$('#myCheckbox').click(function() {
var checked = $(this).is(':checked');
$.ajax({
type: "POST",
url: myUrl,
data: { checked : checked },
success: function(data) {
alert('it worked');
},
error: function() {
alert('it broke');
},
complete: function() {
alert('it completed');
}
});
});
Detect if checkbox is checked:
if ( $('#id').is(':checked') ) { }
This can be executed in a function that is triggered by "onchange" event.
function checkCheckboxState() {
if ( $('#id').is(':checked') ) {
// execute AJAX request here
}
}
Something like this probably?
$('.checkbox').click(function (){
var val = $(this).is(':checked');
$.load('url_here',{status:val});
});
<input type="checkbox" name="foo" value="bar" class="checkIt"/>
<script type="text/javascript">
$('.checkIt').bind('click', function() {
if($(this).is(":checked")) {
// checkbox is checked
} else {
// checkbox is not checked
}
});
</script>
You can now have more than one checkbox.