i'm making a plugin for sending messages to users
and i'm using ajax in the plugin
and i'm not getting it the right way
here is my jQuery code
i tryed many times but i cant get it done
<script type="text/javascript">
$(document).ready(function () {
$(document).ajaxStop(function () {
$.unblockUI();
});
//if form is submitted
$('#whatsappform').submit(function (e) {
if ($('#whatsappform').validate().form() === false) {
return false;
}
//Store original html to replace back in box later.
var original = $('#faketextbox').html();
//Scan html code for emojis and replace with text and special marker.
$('#faketextbox img').each(function (index) {
var emojiUnicode = this.outerHTML.match(/emoji-(.*?)"/)[1];
$(this).replaceWith('##' + emojiUnicode + '##');
});
//Replace all BR's with line breaks.
var message = $.trim($('#faketextbox').html().replace(/<br\s?\/?>/g, "\n"));
//Copy the corrected message text to our hidden input field to be serialised.
$('#message').val($('#faketextbox').html(message).text());
//Replace the corrected text with the original html so it shows properly on a browser.
$('#faketextbox').html(original);
//Continue with the form.
var formData = $("#whatsappform").serialize();
$.ajax({
type: "POST",
url: "http://localhost:81/wp/wp-admin/admin-ajax.php",
cache: false,
data: formData,
dataType: "json",
timeout: 45000,
success: onSuccess,
error: onError,
//beforeSend: function(jqXHR, settings) {
//},
complete: function () {
$.unblockUI();
}
});
return false;
});
</script>
sorry for the bad english :)
WordPress expects your JS in noconflict mode, wrap the code as follows:
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
Related
I'm new to Jquery and ran into a problem in web development. I want to convert html element to paragraph from database based on id from url.
Here my code for now,
<script>
var url = window.location.pathname;
var id = url.substring(url.lastIndexOf('/') + 1);
$(document).ready(function() {
$("#desc").click(function() {
$("#content").html(id);
$(this).addClass('active');
$("#feature").removeClass('active');
$("#spec").removeClass('active');
});
$("#feature").click(function() {
$("#content").html(id);
$(this).addClass('active');
$("#desc").removeClass('active');
$("#spec").removeClass('active');
});
$("#spec").click(function() {
$("#content").html(id);
$(this).addClass('active');
$("#desc").removeClass('active');
$("#feature").removeClass('active');
});
});
</script>
Here is the display that i wish
I've got the id, but don't know how to display data from the database (tbl_product) based on that id using AJAX / Jquery. I can only change the active class for now, all your advice and suggestions are will be very usefull.
you can use ajax like this
$("#desc").click(function() {
$(this).addClass('active');
$("#feature").removeClass('active');
$("#spec").removeClass('active');
$.ajax({
url: 'product.php?id=' + id
dataType: 'html',
contentType: false,
processData: false,
beforeSend: function() {
$('#content').empty();
},
error: function() {
$('#content').append('error');
},
success: function(data) {
$('#content').append(data);
}
})
});
I am using this jQuery plugin for making toggle, but I have an issue that when I make multiple toggles that have same ids and class so in that case I am not able to identify particular toggle for applying auto load ajax on changing value.
I would to ask that how I make same toggle with this same plugin but different ids or class or name so I make ajax function like when I click toggle it will update in PHP without submitting submit button.
The plugin I am using is this one
The code I am using is this:
HTML
<p>Default: <span class="easyswitch"></span></p>
<p>Checked: <span class="easyswitch" data-default="1"></span></p>
SCRIPT
<script>
$('.easyswitch').easyswitch();
</script>
AJAX
$('MY_CLASS_NAME').change(function(){
var mode= $(this).prop('checked');
$.ajax({
type:'POST',
dataType:'JSON',
url:'test.php',
data:'mode='+mode,
success:function(data)
{
$("body").html('Operation Saved');
}
});
You can not handle easyswitch's change event. you need to create click event of it, and from it you can get the status of current toggle.
$('.easyswitch').easyswitch();
$('.easyswitch').click(function () {
var mode = $(this).hasClass('on');
toogleStatus(mode);
});
// for all controlls.
$(".easyswitch").each(function() {
var mode = $(this).hasClass('on');
toogleStatus(mode);
});
function toogleStatus(mode)
{
if (!mode) {
alert('checked')
}
else {
alert('unchecked')
}
}
Try using callback option
$('.easyswitch').easyswitch({
callback: function(val, ele) {
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'test.php',
data: { mode: val },
success: function(data) {
$("body").html('Operation Saved');
}
});
}
});
How can I load data from my PHP response via ajax into a panel?
My PHP outputs correctly and I can see a table in the response, but I can;t get it to build the data on my webpage.
Here is my jquery/ajax so far. It passed the value to PHP correctly and PHP builds the table via its echo, but what am I missing for AJAX to display the table?
PHP:
<?php
foreach ($lines as $value) {
echo "<input name='data[]' value='$value'><br/>";
}
?>
JQUERY:
$(function () {
$('#rotator').change(function (e) {
var rotator = $("#rotator").val();
$.ajax({
type: "POST",
url: "tmp/JFM/National/national.php",
data: {
rotator: rotator
},
success: function (result) {
$('#panel').load(result);
}
})
return false;
});
});
The answer to this was two fold.
I was attempting to append to my main div, which apparently can't happen. I created a new empty div and was able to load the results there.
Beyond that, the comments to change .load(results) to .html(results) were needed.
The correct jquery code is below.
$(function () {
$('#rotator').change(function (e) {
var rotator = $("#rotator").val();
$.ajax({
type: "POST",
url: "tmp/JFM/National/national.php",
data: {
rotator: rotator
},
success: function (result) {
console.log(result);
$('#test').html(result);
}
})
return false;
});
});
move your function from:
$.ajax({...,success: function(){...}});
to
$.ajax({..}).done(function(){...});
if it doesn't work, try to add async:false into the ajax object...
$.ajax({...,async:false}).done(function(){...});
Hope it helps... =}
Everything was going great in my previous help request thread. I was on the correct track to get around a CSRF, but needed to be pointed in the right direction. I received great help and even an alternate script used to log into Google's Android Market. Both my script and the one I altered to match my form is get hung up at the same point. Apparently cURL cannot process JS, is there any way to work around the form being submitted with submitForm() without changing the form?
Here is the code for the SubmitForm function
function submitForm(formObj, formMode) {
if (!formObj)
return false;
if (formObj.tagName != "FORM") {
if (!formObj.form)
return false;
formObj = formObj.form;
}
if (formObj.mode)
formObj.mode.value = formMode;
formObj.submit();
}
Here is the code for the submit button -
<a class="VertMenuItems" href="javascript: document.authform.submit();">Submit</a>
Here is a link to my last question in case more background information is needed.
PHP service...
<?php
// PHP service file
// Get all data coming in via GET or POST
$vars = $_GET + $_POST;
// Do something with the data coming in
?>
Javascript elsewhere...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function sendData(data)
{
var response;
$.ajax({
url: 'phpservice.php',
data: data,
type: 'POST',
dataType: 'json',
async: false,
success: function(response_from_service)
{
response = response_from_service;
},
error: function()
{
}
});
return response;
};
function getData(data)
{
var response;
$.ajax({
url: 'phpservice.php',
data: data,
type: 'GET',
dataType: 'json',
async: false,
success: function(response_from_service)
{
response = response_from_service;
},
error: function()
{
}
});
return response;
};
});
</script>
I am trying to fetch data form a callback page (php) and load it into a html div with jQuery mobile. This should happen if a user clicks on another div.
What I actually got is
$.('#home-button').bind('vclick', function( e ) {
$.get('homeCallback.php',function(data){
$('#displayContent').append(data).trigger('create');
},'html');
});
Where #home-button is the div that should trigger the event and #displayContent the div where the content should be put in.
The request should be able to pass some parameters, too. Like homeCallback.php?param=1 but it could also use the post method.
The callback does not have to be html only, it could also be possible that the callback php script provides JSON data or anything.
I am not a JS crack so I have problems solving this issue. Thanks for your help!
Edit:
So I found a solution on my own:
$(document).ready(function() {
$.ajaxSetup ({
cache: false
});
var ajaxLoader = '<img src="images/ajax-loader.gif" alt="loading.." />';
var loadUrl = "homeCallback.php";
$('#home-button1').click(function(){
$('#displayContent').toggle('fast', function() {
$(this).html(ajaxLoader);
$(this).toggle('fast', function() {
$.get(loadUrl + '?option1',function(data){
$('#displayContent').html(data);
},'html');
});
});
});
$('#home-button2').click(function(){
$('#displayContent').toggle('fast', function() {
$(this).html(ajaxLoader);
$(this).toggle('fast', function() {
$.get(loadUrl + '?option2',function(data){
$('#displayContent').html(data);
},'html');
});
});
});
});
And this is what homeCallback.php simply does..
<?php
if( isset($_GET["option1"] ))
echo "option1";
if( isset($_GET["option2"] ))
echo "option2";
So far.
$.('#home-button').bind('click', function() {
$.ajax({
url: "homeCallback.php",
type: "POST",
data: ({param: 1, param2: 2}),
success: function(html){
$("#displayContent").html(html);
}
});
});