Jump to content
buckibooster

jquery functions don't work for axis call

Recommended Posts

I'm sure that there is probably a simple answer to my question but I haven't been able to find it.  I have a php web site that I've built for a local community chorus.  Its primary purpose is to provide access to mp3 rehearsal files.  For this purpose, I built a html5 audio player that works well in IE11, Firefox, Chrome and Safari.  In order to limit access to my sites coding, I'm using an axis call to another php file to gather data from an underlying SQL database to build and insert main page content.  In this manner, a ctrl-u of the main page will not show the underlying code.  During development, my process has been to first build a part in the main web page until I get it working and then transfer the code to my axis call page.  This has worked immensely well until now.  The last part of this effort was to build the actual audio player, get it working and transfer it to the axis call page.  It worked well when the content was on the main page.  However, when I transferred the content to the axis call page, those parts of the player operated by jquery functions stopped working.  Parts of the player operated by ordinary javascript functions continue to work just fine.  Only those parts operated by jquery functions stopped working.  My question is why have the jquery functions stopped working while the javascript functions continue to work just fine?

Specifically, the jquery functions that have stopped working dynamically change the underlying cascading style sheets (css) for a number of elements that show loading progress, playing progress and playbackRate.  They do this by dynamically adjusting the width of each progress bar based upon the amount loaded, played and the playbackRate.  I've looked closely at the results coming back from the axis call and the only differences are:

  1. Double quotes have been replaced with single quotes;
  2. Single quotes nested inside of double quotes have been replaced with """ (These nested quotes are not used in the affected elements and the elements they are used in seem to be working just fine.; and
  3. The returned insert is nested within a <div> not normally used in the main web page.  I should add that I've tested the main page code with this nested <div> and found that the application worked just fine.

For some reason, the jquery functions are unable to access and change the underlying css when the elements affected are inserted from an axis call but not when they are directly on the main web page.  I'd share some code but there doesn't seem to be any way to do that in this forum.

Edited by buckibooster
Give more explanation

Share this post


Link to post
Share on other sites

I'm not sure what axis is, but there's no way to protect Javascript code, as long as the browser is able to run it, it is also available to the person using the browser.

My first suggestion would be to rewrite your code to not require jQuery. Everything jQuery can do, native Javascript can do better as long as you're experienced enough to write the code.

If you're making requests for content using AJAX and you have code that needs access to HTML elements created by the AJAX request, then you will need to run that code after the AJAX request has been completed.

Share this post


Link to post
Share on other sites

Thanks for your post Ingolme but, it really doesn't matter how experienced I am with javascript, when it can't be used to dynamically change the underlying css.  As I understand it, only jquery can do that.  Also, the javascript functions would also be affected if the AJAX request had not been completed.  In any event, the only way that the main page can be loaded is if the AJAX call was completed, as the content comes from that call.

Edited by buckibooster
Additional information

Share this post


Link to post
Share on other sites

In this case, dsonesuk, the first <div> is a first child of <body>.  As I said earlier, one of the differences is that the code coming back from the AJAX call is inserted into a <div> that is not needed when the code stands alone in the main web page.  If I understand your point, the first <div> in my code is the first child of <body> when it is not loaded though an AJAX call.  However, the first <div> in the code returned from the AJAX call is the first child not of the <body> element but of the <div> used as an insertion point, making the the first <div> of the code returned from my AJAX call a second child of the <body> element.  If that is all correct, I'm not sufficiently experienced in jquery to understand what you are suggesting as a solution.  Do I need to include a jquery.on() command for the insertion <div> at the beginning of my jquery code?  If so, what might this command look like?  If it helps, the jquery code that is not working with the AJAX call (but does work when the AJAX call is not used) is attached.

 

player.js

Edited by buckibooster
Add more information

Share this post


Link to post
Share on other sites

I think I'm beginning to understand my problem but still need help in finding a solution.My problem is this.

  1. I have a <div> on my main web page ("audioPlayer") with content provided by an AJAX call.
  2. The AJAX call occurs as part of a javascript function executed when the web page body is "loaded."
  3. My jquery code is contained within a "$(document).ready(function()."
  4. This means that my jquery code looks for content that isn't present after loading of the body but only after execution of the AJAX call.
  5. As a result, my jquery code is trying to execute within web page elements that are not yet present after loading of the body.

I think this means that I need to modify my jquery code so that it executes after the AJAX call has completed.  I've attempted this by using the jquery.on() command as follows:

$("#audioPlayer").on("ajaxStop", function(){ "my jquery code" });

"audioPlayer" is the <div> I use as a wrapper for my AJAX call contents.  It is the only part of this code that is present on the main web page after the body is loaded but before the AJAX call occurs.  This should cause my jquery code to execute only after all AJAX calls relating to the "audioPlayer" <div> and its children have finished.  Unfortunately, it isn't solving my problem.  Can anyone suggest a solution?

Share this post


Link to post
Share on other sites

OK! this is a simple example to show that a element does not have to exist to work with .on() the element that does not exist is h1 tag it will only load with button click.This also shows the difference between how .click() and .on(), as click will only work if the element (h2,h2) exists when the $(document).ready() or $(function() (onload) is ran. While .on() will work if currently exists or is loaded in future using ajax because it targets the already existing parent, then current or new child element.

https://www.w3schools.com/code/tryit.asp?filename=FXCP8914K0K7

Note: there a cross origin resource blocking problem, so paste above here, its the original page

https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_callback

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Also the jQuery/JavaScript code you linked to, uses a deprecated .bind() which .on() replaced, so if you are using older version of jQuery you maybe need to update for .on() to work,.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...