How do I change this variable in my jquery script? - javascript

I'm using the jquery audio recording plugin jrecorder and I want to be able to change the audio file name by pushing a button. The script defines the file name with the 'host' variable. I want to be able to change that variable to "track01" by clicking button01 or "track02" by clicking button2. How would I go about doing this?
<script>
$.jRecorder(
{
host : 'acceptfile.php?filename=track00' ,
callback_started_recording: function(){callback_started(); },
callback_stopped_recording: function(){callback_stopped(); },
callback_activityLevel: function(level){callback_activityLevel(level); },
callback_activityTime: function(time){callback_activityTime(time); },
callback_finished_sending: function(time){ callback_finished_sending() },
swf_path : 'jRecorder.swf',
});
////Make buttons change save-file name
$("#button01").click(function(){
//CHANGE 'host' to 'acceptfile.php?filename=track01'
;});
$("#button02").click(function(){
//CHANGE 'host' to 'acceptfile.php?filename=track02'
;});
</script>

I managed to devise the solution by making changes in the Main.as script file and also in the jRecorder.js file. Following are six steps that you will need to achieve this.
Step -1
Go to https://github.com/sythoos/jRecorder and download everything in the flash-fla folder. Make sure you match the folder of the flash-fla folder structure EXACTLY on your local machine.
Step -2
Once you have done that, and if you haven't got it already, you're going to need to download Flash. I used the free 30 day trial to do this, you can also do the same.
Step 3. Open Main.as file and make following two changes:
Change : 1
Define a new string variable to contain file name
Change : 2
Add parameter in "jSendFileToServer" method
Step 4: Once the above changes are done, you need to open up the AudioRecorderCS4-1.0.fla file in Flash and export the movie (File -> Export -> Export Movie).
Step 5. Open jRecorder.js file and make following change:
Add parameter to sendData Method
Step 6. Open your HTML and make the change in the JS method which calls sendData
Add parameter in the sendData Method
Following are the code snippets, please note that I am pasting few lines of code before and after my changes by adding comments to the code which I have added/modified.
Main.as File
private var recorder:MicRecorder = new MicRecorder(waveEncoder);
private var recBar:RecBar = new RecBar();
private var maxTime:Number = 30;
//Start of addition by FaisalKhan
private var FileName:String = 'Hello.wav';
//End of addition by FaisalKhan
//Start of change 1 of 2 by Faisal
//public function jSendFileToServer():void
public function jSendFileToServer(file_name):void
//End of change 1 of 2 by Faisal
{
//Start of change 2 of 2 by FaisalKhan
FileName=file_name;
//End of change 2 of 2 by FaisalKhan
finalize_recording();
}
//functioon send data to server
private function finalize_recording():void
{
var _var1:String= '';
var globalParam = LoaderInfo(this.root.loaderInfo).parameters;
for (var element:String in globalParam) {
if (element == 'host'){
//Start of change by FaisalKhan
//_var1 = globalParam[element];
_var1 = globalParam[element]+FileName;
//End of change by FaisalKhan
}
}
ExternalInterface.call("$.jRecorder.callback_finished_recording");
if(_var1 != '')
{
var req:URLRequest = new URLRequest(_var1);
req.contentType = 'application/octet-stream';
req.method = URLRequestMethod.POST;
req.data = recorder.output;
var loader:URLLoader = new URLLoader(req);
ExternalInterface.call("$.jRecorder.callback_finished_sending");
}
}
jRecorder.js file change:
//function call to send wav data to server url from the init configuration
//Start of change by FaisalKhan
//$.jRecorder.sendData = function(){
$.jRecorder.sendData = function(file_name){
//getFlashMovie(jRecorderSettings['recorder_name']).jSendFileToServer();
getFlashMovie(jRecorderSettings['recorder_name']).jSendFileToServer(file_name);
//End of change by FaisalKhan
}
HTML Button click method change:
$('#SendRecordingDiv').click(function(){
//Start of change by FaisalKhan
//$.jRecorder.sendData($();
$.jRecorder.sendData($("#FileControl").val()+'.wav');
//End of change by FaisalKhan
});

Below is how, although I think you will still have issues because your $.jRecorder code is running as soon as the page loads, so by the time a user hits a button its too late. Maybe also consider putting that inside a function, and calling that function after they press the button.
<script>
function WhoSaysDearMe(saveFileName) {
$.jRecorder({
host : saveFileName ,
callback_started_recording: function(){callback_started(); },
callback_stopped_recording: function(){callback_stopped(); },
callback_activityLevel: function(level){callback_activityLevel(level); },
callback_activityTime: function(time){callback_activityTime(time); },
callback_finished_sending: function(time){ callback_finished_sending() },
swf_path : 'jRecorder.swf',
});
}
////Make buttons change save-file name
$("#button01").click(function(){
//CHANGE 'host' to 'acceptfile.php?filename=track01'
WhoSaysDearMe('acceptfile.php?filename=track01');
;});
$("#button02").click(function(){
//CHANGE 'host' to 'acceptfile.php?filename=track02'
WhoSaysDearMe('acceptfile.php?filename=track02');
;});
</script>

Related

Why does the ainteger setting not work right?

I have two versions of code. The first version doesn't work, the second version does. Why does the first version's ainteger setting not work right? It is suppose to cause "Player One" and "Player Two" to be displayed above the buttons on the second register button press. I have included the code below.
To be more specific the program is supposed to call the server's register function when the register button is pressed. The server sets the value in the html, using the server's setinteger() when its integer value is one. When the client's ainteger is two (second time register key was pressed,) the event handler will call the server's printthename() function. This in turn calls the client's printname() and printname2() and displays the names. These names are not being displayed!
By tracing the error, when the button is hit twice , the register button event is not breaking in the register buttons event handler, and the block for the ainteger does not seem to be calling the printthename(). It does however show up in the server's register function when the server's integer value is one.
The program uses SignalR and two explorer tabs with Visual Studio 2019.
I have tried changing the code, slimmed it down, made it simple, and traced. And printthename() called from setinteger() is a version that works.
The GitHub link is : https://github.com/Joshei/signalr1
Branch 3 : new version, works.
Branch 4 : old version, doesn't work (doesn't display the names.)
The Visual Studio version has comments to explain that there is no way this is causing any problems.
/////////////////////////////////////HUB://///////////////////////////////////
public class ChatHub : Hub
{
private static readonly List<clients> ClientList = new List<clients>();
public void printthename()
{
string name = "";
if (whoseturn == 0)
{
name = "Player one ";
Clients.Client(ClientList[0].ConnectionId).printname(name);
name = "Player two ";
Clients.Client(ClientList[1].ConnectionId).printname2(name);
}
}
public void register(string name1)
{
clients A_Client = new clients();
A_Client.ConnectionId = Context.ConnectionId;
A_Client.Name = name1;
ClientList.Add(A_Client);
if (integer == 0)
{
integer = integer + 1;
}
else if (integer == 1)
{
Clients.Client(ClientList[1].ConnectionId).setinteger();
Clients.Client(ClientList[0].ConnectionId).setinteger();
}
}
}
/////////////////////////////////////HTML CLIENT://///////////////////////////////////
$(function () {
var ainteger = "0";
$("#Join").click(function () {
$('#Join').hide();
$('#Name').hide();
chat.server.register("a");
if (ainteger == "1") {
chat.server.printthename();
}
});
chat.client.setinteger = function () {
ainteger = "1";
};
});
Thank you, I have been trying to get this working since November 30.

Handling random number of links by using AJAX Jquery

I am new at AJAX and JQuery and trying to use them in the part of my website. Basically the website that I have, has this kind of design and currently it is functional (Sorry for my poor paint work :)
The items in the website are created by user. This means item number is not constant but can be fetched by db query.
Each item has a unique URL and currently when you click an item, all page is refreshing. I want to change the system to let the user have a chance to navigate quickly between these items by only chaning middle content area as shown above. However I also want to have a unique URL to each item. I mean if the item has a name like "stack overflow", I want the item to have a URL kind of dev.com/#stack-overflow or similar.
I don't mind about the "#" that may come from AJAX.
In similar topics I have seen people hold constant names for items. For instance
<a href="#ajax"> but my items are not constant.
WHAT I HAVE TRIED
Whats my idea is; while fetching all item's links, I'm holding links in $link variable and using it in <a href="#<?php echo $link; ?>">.
Inside $link it is not actual URL. it is for instance a name like "stack-overflow" as I ve given example above. Until this part there is no problem.
PROBLEM
In this topic a friend suggested this kind of code as an idea and I ve changed it for my purpose.
<script>
$(document).ready(function() {
var router = {
"<?php echo $link ?> ": "http://localhost/ajax_tut/link_process.php"
};
$(window).on("hashchange", function() {
var route = router[location.hash];
if (route === undefined) {
return;
} else {
$(".content-right").load("" + route + " #ortadaki_baslik");
}
});
});
</script>
I'm trying to post the value of $link to the link_process.php and at link_process.php I will get the value of $link and arrange neccessary page content to show.
The questions are;
- How should I change this code to do that?
- I couldnt see someone doing similar to take as an example solve this
issue. Is this the right way to solve this situation?
- Do you guys have a better solution or suggestion for my case?
Thanks in advance.
WHEN your server side AJAX call handler [PHP script - handling AJAX requests at server side] is constant and you are passing item_id/link as GET parameter...
For example:
localhost/ajax_tut/link_process.php?item_id=stack-overflow OR
localhost/ajax_tut/link_process.php?item_id=stack-exchange
Then you can use following code.
<script>
$(document).ready(function() {
var ajax_handler = "localhost/ajax_tut/link_process.php?item_id=";
$(window).on("hashchange", function() {
var route = location.hash;
if (route === undefined) {
return;
} else {
route = route.slice(1); //Removing hash character
$(".content-right").load( ajax_handler + route );
}
});
});
</script>
WHEN you are passing item_id/link as URL part and not parameter...
For example:
localhost/ajax_tut/stack-overflow.php OR
localhost/ajax_tut/stack-exchange.php
Then you can use following code.
<script>
$(document).ready(function() {
var ajax_handler = "localhost/ajax_tut/";
$(window).on("hashchange", function() {
var route = location.hash;
if (route === undefined) {
return;
} else {
route = route.slice(1); //Removing hash character
$(".content-right").load( ajax_handler + route + ".php");
}
});
});
</script>
WHEN Your server side AJAX handler script url is not constant and varies for different items...
For example: localhost/ajax_tut/link_process.php?item_id=stack-overflow OR localhost/ajax_tut/fetch_item.php?item_id=stack-exchange OR localhost/ajax_tut/stack-exchange.php
Then I suggest to change PHP script which is generating item's links placed on left hand side.
<?php
foreach($links as $link){
// Make sure that you are populating route parameter correctly
echo '<a href="'.$link['item_id'].'" route="'.$link['full_ajax_handler_route_url_path'].'" >'.$link['title'].'</a>';
}
?>
Here is Javascript
<script>
$(document).ready(function() {
var ajax_handler = "localhost/ajax_tut/"; //Base url or path
$(window).on("hashchange", function() {
var route = location.hash;
if (route === undefined) {
return;
} else {
route = route.slice(1); //Removing hash character
route = $('a [href="'+.slice(1)+'"]').attr('route'); //Fetching ajax URL
$(".content-right").load( ajax_handler + route ); //Here you need to design your url based on need
}
});
});
</script>

Code behind Content editor button for Experience editor button

Is it possible to use a code behind of a command used for ribbon button in content editor as a request for experience editor button? We want to stick to SPEAK and not make any changes to Sitecore.ExperienceEditor.config.
After creating new button in Experience editor, telling .js to call NewCommand request by
Sitecore.ExperienceEditor.PipelinesUtil.generateRequestProcessor("ExperienceEditor.NewCommand");
that was referenced in Sitecore.ExperienceEditor.Speak.Requests.config as
<request name="ExperienceEditor.NewCommand" type="Sitecore.Starterkit.customcode.MyCommand,MyProject"/>
nothing happens and logs say
ERROR Could not instantiate speak request object,
name:ExperienceEditor.NewCommand,
type:Sitecore.Starterkit.customcode.MyCommand,MyProject`
Do we have to import PipelineProcessorRequest as suggested by some tutorials or is there a way to use our existing code?
Have you seen this blog post on adding custom SPEAK command buttons to Sitecore 8 Experience Editor?
https://doc.sitecore.net/sitecore%20experience%20platform/the%20editing%20tools/customize%20the%20experience%20editor%20ribbon
Otherwise if that doesn't achieve what your looking for, it might be worth trying to standard SPEAK application way of triggering a button, In a SPEAK application you can call a JavaScript function from a button click using this code.
javascript:app.FunctionName();
In the core DB update the click field on your button to call JavaScript with the javascript: prefix. Does this allow you to trigger your JavaScript?
I was able to use my existing control using guidelines from:
http://jockstothecore.com/sitecore-8-ribbon-button-transfiguration/
Relevant pieces of the old command:
if (args.IsPostBack)
{
// act upon the dialog completion
if (args.Result == "yes")
{
Context.ClientPage.SendMessage(this, "item:load(...)");
}
}
else
{
// trigger the dialog
UrlString url = new UrlString(UIUtil.GetUri("control:CopyLanguage"));
url.Add("id", item.ID.ToString());
url.Add("lang", item.Language.ToString());
url.Add("ver", item.Version.ToString());
SheerResponse.ShowModalDialog(url.ToString(), true);
args.WaitForPostBack();
}
The redressed command:
define(["sitecore"], function (Sitecore) {
Sitecore.Commands.ScoreLanguageTools = {
canExecute: function (context) {
return true; // we will get back to this one
},
execute: function (context) {
var id = context.currentContext.itemId;
var lang = context.currentContext.language;
var ver = context.currentContext.version;
var path = "/sitecore/shell/default.aspx?xmlcontrol=CopyLanguage" +
"&id=" + id + "&lang=" + lang + "&ver=" + ver;
var features = "dialogHeight: 600px;dialogWidth: 500px;";
Sitecore.ExperienceEditor.Dialogs.showModalDialog(
path, '', features, null,
function (result) {
if (result) {
window.top.location.reload();
}
}
);
}
};
});

Incrementing a PHP variable with click of WordPress Post title

I'm trying to write a function that increments a variable, which will later be stored as post meta for the WordPress post, by clicking the posts title. In other words, I want to a create function that keep track of how many times a post title of a certain post is being clicked.
I'm new to using jQuery so I'm trying to figure out how to get the 2 function in PHP and jQuery to interact. I need to process the data in PHP later, which is why I need to do this.
This is what I have so far (PHP):
function clickScoreMethod($postid){
//$clickScore = 0;
$clickScore = get_post_meta($postid, 'redditclickscore', true);
$clickScore = $clickScore + 0.25;
update_post_meta($postid, 'redditclickscore',$clickScore);
}
$clickScore is the variable I want to increase by 0.25 every time the post title is clicked. I'm using meta to store it easily per post. If it is simpler, I can also increase the score by just incrementing the variable and then dividing it by 4 when I process it in the PHP later.
The jQuery:
$("li.post-item article").each(function(){
$( ".the-post-container .entry-title" ).click(function() {
var clickScore = 0.25;
});
});
.entry-title is the post title and .post-item-article is basically the blog roll.
I have no idea how to get these two to work together so that I increase the number.
Use ajax to do this.
Your jQuery would look something like this:
$("li.post-item article").each(function () {
$(".the-post-container .entry-title").click(function () {
var clickScore = 0.25;
$.ajax({
url: "/path/to/php/file",
type: "POST",
data: { clickScore: clickScore },
success: function () {
console.log("Success!");
}
});
});
});
and you would access the variable and do stuff with it with this (in PHP):
$clickScore = $_POST["clickScore"]
Hope this helps you.

javascript class killing app

just a quick one, im using a oop style for my javascript game but for some reason when i add in a new class it kills any functions from other classes i have included.
Here is the script i am talking about which is my main file which i will include all my class files in:
$(document).ready(function(){
var canvas = document.getElementById("TBG");
var context = canvas.getContext("2d");
var ui = new Gui();
// var level = new Level();
//----------Login/Register Gui --------------
$('#TBG').hide();
$('#load-new').hide();
$('#reg').hide();
$('#login').hide();
//if login_but is clicked do ui.login function
$('#login_but').click(ui.login);
//if reg_but is clicked do ui.register function
$('#reg_but').click(ui.register);
$('#new_but').click(function(){
game_settings("new");
});
$('#load_but').click(function(){
game_settings("load");
});
//if login_sumbit button is clicked do ui.login_ajax function
$("#login_submit").click(ui.login_ajax);
$("#reg_submit").click(ui.register_ajax);
$("#welcome").on("click", "#logout_but", ui.logout);
//___________________________________________________________________
//Initialisation of game
function game_settings(state){
if(state == "load"){
ui.load_game();
//do ajax call to load user last save
level.level_init(0,1);
}
else{
//set beginning params
//Change screens
ui.new_game();
alert("new game");
}
}
});
in the context of the script above, my problem is when i just have the call to new Gui() without the call to new level underneath or commented like you can see, well then all of the functions below under the heading login/register gui works perfectly, but as soon as i put the call to new level in or uncomment it, it kills all of the functions under the login/ register gui heading.
Why is this?
EDIT: here is the level.js file in case you would like to see it and how i am constructing my classes:
function Level(){
this.level_init = function(level, location){
var saved_level = level;
var saved_location = location;
};
this.get_tileset = function(){
};
this.draw = function() {
}
}
Thanks
Tom
SOrry guys, it turns out it was a silly mistake on my behalf i didnt add the script in html!, i need more sleep i think haha! thanks for your input
TOm

Categories