Develop Reference

Send a JSON object to AJAX of jQuery Tabs using WordPress

I am using jQuery Tabs to program a messaging system using WordPress. The point is that when the user clicks one tab, which represents one conversation, an AJAX call is performed automatically with the functionality of jQuery Tabs.
I programmed the jQuery Tab to call an action (that I programmed as well). The action is programmed in PHP using WordPress and I can call it through localhost/mywebpage/wp-admin/admin-ajax.php?action=my_action.
The problem is the following: The default functionality of the jQuery tabs expects the raw output of the PHP file (the ajax action). This means I have to code HTML on the PHP file so I just put the response on the tabs panel (ui.panel.html). However I think this is inefficient and I would like to create a JSON object using WordPres function wp_send_json_success( jsonObject ) which is received on the ui.ajaxSettings.dataFilter function.
When I send HTML to the ui.ajaxSettings.dataFilter function, everything is correctly displayed on the jQuery tabs panel. But when I send a json success, I can see it on the console but I can't display it on the jQuery tabs panel. It appears for a millisecond and then disappears. So the JSON object is being received but for some reason can't be displayed. The only way something is displayed at the jQuery tabs panel is by sending raw HTML by my PHP function. Here is a very simple code example:
This is the JS function:
$( selector ).tabs( {
beforeLoad: function( event, ui ) {
ui.ajaxSettings.dataFilter = function( response ) {
console.log( response );
ui.panel.html( response );
}
} );
This is the PHP function that works good:
<?php
echo 'Hello World!';
This is the PHP function that displays on the panel por a millisecond and then disappears.
<?php
wp_send_json_success( 'Hello World! );
In my opinion, I think something else is executing and erasing what I have displayed on the ui.panel.html but I'm not that expert in jQuery tabs so if there is anyone out there with more experience that can tell me what it's going on I would really appreciate it.

I got it working and the fix was obvious but I am still unsure if this is the best way to do it. This is what I did:
var html = $( '<div>' ).addClass( 'wrapper' );
$( selector ).tabs( {
beforeLoad: function( event, ui ) {
ui.ajaxSettings.dataFilter = function( response ) {
// Do whatever you want with the JSON object (obviously validations)
// In my case I want to create HTML elements with info from the response
var response_js_array = JSON.parse( response );
html.append( $( '<div>' ).text( response_js_array['message'] ) );
},
load: function( event, ui ) {
ui.panel.html( html );
// Do also whatever you want after the messages have been loaded. In my case,
// I scroll down to the last message
scrollDown(); // This is also a function I programmed
}
} );

Using jQuery Load Function before DOM Ready

I have a page that renders HTML blocks from another page on the same domain using IDs. My current code:
<div id=”testdiv”></div>
<script>
jQuery(document).ready(function(){
jQuery('#testdiv').load('/references/embed1.html #testdiv2');
});
</script>
While this loads the content correctly, there is a visible lag between the page loading and the jQuery content loading; depending on the DIV contents it sometimes a full second to display then it just pops into place. This is obviously due to the page not attempting to retrieve the HTML content until DOM Ready so I removed the ready function but the Load function doesn’t run. If I use an iFrame instead it appears to load as the browser executes the code but I lose the ability to only include specific DIV IDs and it’s difficult to make it responsive. Looked at $.ajax but apparently Load uses .ajax so it doesn’t look like there will be a difference.
Simply put – how do I load specific DIV ids from another page without waiting for DOM Ready whether jQuery, JavaScript, iFrames or other method? Second question
Thanks

document readywill be triggered until the whole page were loaded, just remove it and .load() will be invoked after #testdiv had finish render on DOM.
here's the example
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="testdiv"></div>
<div id="error"></div>
<script>
$( "#testdiv" ).load( "/references/embed1.html #testdiv2", function( response, status, xhr ) {
alert("Triggered");
if ( status == "error" ) {
var msg = "Err trying to load ";
$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
}
});
</script>
https://jsfiddle.net/Angel_xMu/rer3yuny/1/

Ajax is not instant, and nothing you do will change that. Therefore, there will always be some form of delay. You can reduce the delay by removing the need for $(document).ready(), however I suspect it still won't be enough to have it do what you were hoping for.
$.get('page.html', function (result) {
// note, you may need to use `.filter` rather than `.find` depending on the structure of `result`
$('#target').html($($.parseHTML(result)).find('#target2'));
});
or leave your code as is minus $(document).ready and move it to after the target div just like in your example.
The only way to completely remove the delay would be to remove the need for using $.ajax by inserting the html directly into the page server-side.

Jquery click event function is can't download csv file?

At the first , I export csv file by html onclick element !It was working.When I change it to jquery click event for some reason ! It is can't export csv file ? Why, I think the same function is called !
Export.Export() is for my csv file downloading function.
This code can download csv file
Export
This is not working
Export
<script>
$('.export').click(function(e){
e.preventDefault();
alert("click");//click
Export.Export.apply($(this), [$('table.listtbl'), 'Table.csv']);
});
</script>

Maybe the click event is bound before all the scripts are loaded..
try :
$( document ).ready(function() {
$('.export').click(function(e){
Export.Export.apply($(this), [$('table.listtbl'), 'Table.csv']);
});
});

I'd never use an anchor-tag together with $(element).click(function(){});. How about using
<button onclick="exportcsv(this);">Export</button>
<script>
function exportcsv(e){
var $e = $(e);
Export.Export.apply($e, [$('table.listtbl'), 'Table.csv']);
}
</script>

Try using Export, Hope it should work. Make sure you script is loaded after the tag is loaded.
If href is blank the current page will be reloaded before calling the click event, So the page will be refreshed before downloading the file.

JQuery load function page loading issue

I have a main.html in which I am trying to load another HTML.
The code in main.html is like this:
<script type="text/javascript">
$(window).load(function(){
$("#divid").load("sample.html");
});
</script>
Inside the sample.html, I have another JavaScript which doesn't work as expected.
<!-- inside sample.html -->
<script type="text/javascript">
... Some JavaScript here ...
</script>
I do not even get the width of an element correctly. Surprisingly, if I put a breakpoint in the JavaScript or put an alert, all seem to work well. This made me guess that page might not be loaded when script runs and by putting alert or breakpoint gives it a bit more time ? I did some searching on web and think that the loading is not in sync which means that the script inside the sample.html page is executing before the page could load. This is just my guess.
I have tried adding JQuery functions ready and load inside the sample.html as well but nothing changes.
Any idea what could be wrong here ?

Use the callback...
this is an example from the doku
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
http://api.jquery.com/load/
and also use jQuery's
$( document ).ready(function() {
console.log( "ready!" );
});
Document ready fires the callback, when the dom is ready. And load fires the callback when the file is loaded.
//EDIT
Please use document ready... here are more details... and also do not load files directly from the file system
$(document).ready(function(){
// You will enter here, wenn the DOM is loaded and ready to use
//When everything is ready to roll you want to load your html file
$("#divid").load("sample.html",function(){
// You will enter this method when sample.html is loaded
// Make sure there is also a div with the id=divid
// to get details on why this is not loading you can also use the
// function signature
// $("#divid").load("sample.html",function(responseText, textStatus, jqXHR){});
// You should also be aware of loading a file from file system can cause to ajax
// errors if it is not served by an http server. Because you can't access local
// files from within JavaScript (security thing)
});
}

Replace divs numeric content with a string using Jquery

My first dabble with JQuery. I wish to replace the delivery charge on checkout page from £0.00 to TBC (To Be Confirmed)
I have attempted this in a console in Chrome. With no success:
$( ".deltotal" ).replaceWith( "TBC" );
This is the field I am trying to change:
<td class="deltotal">£100.00</td>
I assume when I reach the right code I need to put the script at the footer of the checkout.tpl page?

$('.deltotal')
.filter(function () {
return $.trim(this.innerHTML) == "£0.00";
}).text('TBC');

Please try this
$( "td.deltotal" ).text( "TBC" );