Jump to content

denno020

Members
 View Profile  See their activity

  • Posts

    761

  • Joined

  • Last visited

  • Days Won

    3

 Content Type 

Posts posted by denno020

    Toastr Redirect Issue

    in Javascript Help

    Posted

    The issue you're running in to is one of timing. The fact that you can see the toastr at all is very surprising, and likely because there aren't any other actions being performed on click.. As soon as there are some actions being performed within the click handler, then the toastr likely won't ever be seen! Unless of course, we fix it!

    Essentially we need to tell the browser to stop processing the click event so the page refresh doesn't occur

    Something like this will get you going: 

    <script type="text/javascript">
  $(document).ready(function () {
    $('#add').click(function (e) {
      e.preventDefault(); // Stop the browser from redirecting to click target (i.e. the href)
      // Perform actions
      // ...
      // ...
      toastr.success("Folder 2 has been clicked!", "Folder 2", );
      
      window.setTimeout(function () {
        toastr.clear();
      }, 3000);
    });
  });
</script>

     

    Simple Clone Row

    in Javascript Help

    Posted · Edited by denno020
    Moving MDN Docs link

    I completely agreed with @requinix, this is a situation where jQuery excels, and will save you a lot of time and headache. It's definitely possible to do this with vanilla JS, but it's a lot more code.

    One suggestion I will make is to use a `<template>` element, which can contain the HTML that you will clone. This way you don't have to clone an existing HTML DOM node, which will contain user changes and would require you to go through each field and clear the values of the inputs/textarea before injecting it into the page as a new node. Check out the MDN docs for `template`, they have great example code (which is actually in vanilla JS, so you can see how much is required!)

    Another thing I would suggest is to avoid using a `div` as a button. The New Line "button" has the `btn` class on it, but it's a div. This will be inaccessible to site visitors, so best to use a `button` element, with those same classes.

     

    P.s. Please excuse the use of back ticks, it appears the forum doesn't support markdown :(

    PHP search function only searches one column

    in Javascript Help

    Posted

    The offending line that is only allowing you to search the first column is this one:

     td = tr[i].getElementsByTagName("td")[0];

    The `[0]` portion of that statement means to literally get the first column only. An easy fix is to add a nested loop, that does essentially the same as the for loop for the `tr` element, but do it for `td`, provided `td` is assigned: 

     td = tr[i].getElementsByTagName("td");

    Simply move the if block inside that inner loop, and it should work (some variable names inside that second for loop will need to be updated)

    As for making this work with any table, I feel like the call to the function needs to pass a string. Without the quotes around customerTable, the code is going to assume that's a variable name, so maybe try updating to: 

    onkeyup='searchTable("customerTableSearch", "customerTable")'

    These are all suggestions that require a minimal amount of refactoring of the current code, this doesn't mean I endorse that way it's written ;), there's lots of improvements that could be made for this to be much more maintainable in the future, but we'll leave that for another discussion

    need some sound advice.

    in Javascript Help

    Posted

    I have never used Audio previously, but looking at the docs, audio.load() will reload the file, which means you should be able to omit it here.

    Also, the event to listen for is "loadeddata", rather than "load"..

    See how those updates go

    Triggering The Same Function With Some Delay Between Each Run

    in Javascript Help

    Posted

    You're going to want to make use of setTimeout. The syntax is as follows: 

    	setTimeout(function() {
	  // Execute this code after the timeout of 1000ms
	}, 1000);

    Keep in mind that this function is asynchronous, which means 

    	$(document).ready(function(){
	  setTimeout(function() {
	    intro('#hello', '#world');
	  }, 1000);
	 
	  setTimeout(function() {
	    intro('#hi', '#all');
	  }, 1000);
	 
	  setTimeout(function() {
	    intro('#hola', '#amigos');
	  }, 1000);
	});

    Will execute all into functions after 1 second.

    This could be a solution: 

    	$(document).ready(function(){
	  setTimeout(function() {
	    intro('#hello', '#world');
	  }, 1000);
	 
	  setTimeout(function() {
	    intro('#hi', '#all');
	  }, 2000);
	 
	  setTimeout(function() {
	    intro('#hola', '#amigos');
	  }, 3000);
	});

    However that will quickly fail if the execution of the next function has to be 1 second after the previous function has finished (assuming there might be some delays/user input/processing inside the intro function)

    Hopefully that's enough information to get you on the right track to figuring it out

    • Thanks 1

    Where to add style to this js?

    in Javascript Help

    Posted

    Which colour are you trying to change? The `color`, which is the text colour, or the `background-color`?

    I can see the background colour of the button is `background-color: rgb(48, 133, 214)`, which is added as an inline style, using the `style` attribute.

    To overcome that, you're going to have to get more specific when writing your own style, and the only way to do that is to use `!important`: 

    .swal2-confirm {
  background-color: purple !important;
}

    Need help validating additional fields in subscription form

    in Javascript Help

    Posted · Edited by denno020

    First, to make your code easier to read, I suggest you write it like this: 

    <script type="application/javascript">
  (function($) {
    $(document).ready(function() {
      $(" .et_bloom_submit_subscription").click(function() {
        var $subscibeButton = $(this); // same as $('.et_bloom_submit_subscription')
        var $form = $subscibeButton.closest('.et_bloom_form_container');
        var $firstName = $form.find('.et_bloom_subscribe_name input');

        if ($firstName.attr('value') == '') {
          $firstName.addClass('et_bloom_warn_field');
          return false;
        } else {
          $firstName.removeClass('et_bloom_warn_field');
        }
      });
    });
  })(jQuery)
</script>

    It caches jQuery objects so that you're not having to constantly parse the DOM, which will give a slight performance boost, but it will also make it much more obvious as to where the last name check should go

      

    <script type="application/javascript">
  (function($) {
    $(document).ready(function() {
      $(" .et_bloom_submit_subscription").click(function() {
        var $subscibeButton = $(this); // same as $('.et_bloom_submit_subscription')
        var $form = $subscibeButton.closest('.et_bloom_form_container');
        var $firstName = $form.find('.et_bloom_subscribe_name input');
        var $lastName = $form.find('.et_bloom_subscribe_last input');

        if ($firstName.attr('value') == '' || $lastName.attr('value') == '') {
          // Use .toggleClass so the second parameter will add/remove the warning class if only one of the fields is empty
          $firstName.toggleClass('et_bloom_warn_field', $firstName.attr('value') == '');
          $lastName.toggleClass('et_bloom_warn_field', $lastName.attr('value') == '');
          return false;
        } else {
          $firstName.removeClass('et_bloom_warn_field');
          $lastName.removeClass('et_bloom_warn_field');
        }
      });
    });
  })(jQuery)
</script>

    There are a few other optimizations/updates that I would make to this code, if it were mine, but for the sake of simply answering the question, I won't change too much :).

    Hope that helps!

    Denno

    Highlighting the values on assigned table only

    in Javascript Help

    Posted

    A quick and slightly dirty way you could achieve this is by wrapping your checkbox groups in a single element (div for example) and wrapping your tables in a single element also (but not the same one). So it would be something like this: 

    <div class="checkbox-groups">
  <!-- All of your checkbox groups -->
</div>
<div class="tables">
  <!-- All of your tables -->
</div>

    Then, you can use jQuery's index() function to get the index of the group that contains the checkbox that is activated, and then find the corresponding nth-child() in your tables div. Something like the following pseudo code 

    $('input[type="checkbox"]').on('click', function(e) {
  var $checkbox = $(e.target);
  var index = $checkbox.index();

  // Find corresponding <table> in the .tables element
  var $table = $('.tables').find('table:nth-child('+index+')');
  // Loop through table cells to determine which should be highlighted
})

    I have written that using ES5, as your Fiddle is also written using ES5, but it could be cleaned up a but with arrow functions and template literals from ES6, should you happen to have access to a build tool or don't care about support for IE.

    If you can have a crack at implementing something like that, and post back with results, I'll be happy to help further with your solution

    expected expression, got '.'

    in Javascript Help

    Posted

    There are issues with your code, no doubt, but what our friend above didn't mention is the reason you're getting the error is because you've got a semi colon at the end of line 8, even though you then try and concatenate another function call.

    Remove that semi colon and your code shouldn't complain. Whether it works as you expect it to is what you'll need to test next

     

    Denno

    Having issues imagewebp() function not being called properly

    in PHP Coding Help

    Posted

    Thanks for the response.

     

    How would I check the version of GD that is installed? I did suspect this could be the problem, but I didn't realise they were installed separately, so I (apparently wrongly) assumed that it was inside PHP itself.

     

    Also, as I mentioned, when running phpinfo() on the production server, it lists webp in the following two sections:

     

     

    HTTP_ACCEPT text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
$_SERVER['HTTP_ACCEPT'] text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8

     

    Is this not related to GD?

    Having issues imagewebp() function not being called properly

    in PHP Coding Help

    Posted

    I'm having a weird issue with the aforementioned function inside my site. Here is an excerpt of code:

     

     

    if ($extension == 'jpg' || $extension == 'jpeg') {
 
    $isSaved = imagejpeg($image, $filename, $imageQuality);
 
} elseif ($extension == 'gif') {
 
    $isSaved = imagegif($image, $filename);
 
} elseif ($extension == 'png') {
 
    if ($imageQuality >= 100) {
        $imageQuality = 0;
    } elseif ($imageQuality <= 0) {
        $imageQuality = 10;
    } else {
        $imageQuality = round((100 - $imageQuality) / 10);
    }
 
    $isSaved = imagepng($image, $filename, intval($imageQuality));
 
} elseif ($extension == 'webp') {
 
    $isSaved = imagewebp($image, $filename, $imageQuality);
 
} else {
 
    throw new Exception(sprintf('Image format "%s" not supported.', $extension), self::ERROR_NOT_SUPPORTED_FORMAT);
 
}

     

    The issue is with the webp section, when this code runs (having passed a webp image to it), I get this exception

     

     

    Fatal error: Call to undefined function Image\Core\imagewebp() in ......

     

    To me it looks like PHP isn't picking up the function as a native PHP function.

     

    I am able to use this code perfectly fine on my development machine (windows machine using WAMP with PHP7), but the issue seems to arise when this code is run on my production server. I have been in touch with my hosting provider just now, and they weren't able to enlighten me at all, actually telling me that I need to check the scripts or with a developer that can fix it. The production server is also running PHP7, and webp appears to be enabled (checked using phpinfo())

     

    Does anyone know how I could continue to debug this issue?

     

    Thanks

    Denno

    js/json issue....

    in Javascript Help

    Posted

    In the interest of completeness, something I didn't add to the jsFiddle is to break the loop(s) once you've found the data you want. Don't need to waste time looping through the rest of the data if you already have your translation value

    js/json issue....

    in Javascript Help

    Posted · Edited by ignace
    Please keep code contained to the forum. Thank you!

    You were on the right path with your for loop.. You just needed to go another level deeper..

     

    I've had to make a few assumptions on what data you know (i.e. what you can test using if conditions), so the code in the attached jsFiddle may be a little off, but it should serve as a decent starting point.

     

    Check out what I've written here:

    var json = {
	"lang": [{
		"code": 1000,
		"day": "Sunny",
		"night": "Clear",
		"icon": 113,
		"languages": [
			 {
			"lang_name": "Chinese Simplified",
			"lang_iso": "zh",
			"day_text": "晴天",
			"night_text": "晴朗"
		}, {
			"lang_name": "Finnish",
			"lang_iso": "fi",
			"day_text": "Aurinkoinen",
			"night_text": "Pilvetön"
		}, {
			"lang_name": "French",
			"lang_iso": "fr",
			"day_text": "Ensoleillé",
			"night_text": "Clair"
		}, {
			"lang_name": "German",
			"lang_iso": "de",
			"day_text": "Sonnig",
			"night_text": "Klar"
		},{
			"lang_name": "Spanish",
			"lang_iso": "es",
			"day_text": "Soleado",
			"night_text": "Despejado"
		}, {
			"lang_name": "Swedish",
			"lang_iso": "sv",
			"day_text": "Soligt",
			"night_text": "Klart"
		}]
	}, {
		"code": 1003,
		"day": "Partly Cloudy",
		"night": "Partly Cloudy",
		"icon": 116,
		"languages": [{
			"lang_name": "Chinese Simplified",
			"lang_iso": "zh",
			"day_text": "局部多云",
			"night_text": "局部多云"
		},{
			"lang_name": "Finnish",
			"lang_iso": "fi",
			"day_text": "Puolipilvinen",
			"night_text": "Puolipilvinen"
		}, {
			"lang_name": "French",
			"lang_iso": "fr",
			"day_text": "Partiellement nuageux",
			"night_text": "Partiellement nuageux"
		}, {
			"lang_name": "German",
			"lang_iso": "de",
			"day_text": "leicht bewölkt",
			"night_text": "leicht bewölkt"
		}, {
			"lang_name": "Spanish",
			"lang_iso": "es",
			"day_text": "Parcialmente nublado",
			"night_text": "Parcialmente nublado"
		}, {
			"lang_name": "Swedish",
			"lang_iso": "sv",
			"day_text": "Växlande molnighet",
			"night_text": "Växlande molnighet"
		}]
    }
]}

// Example, get the Spanish translation for Partly Cloudy

for (var i = 0 ; i < json.lang.length ; i++) { // Loop the weather types
  // First iteration will give you 'Sunny'
  // Second iteration will give you 'Partly Cloudy'
  // etc
  var langFile = json.lang[i];
  if (langFile.code !== 1003) { // Matching on the code for 'Partly Cloudy'
    continue; // Continue the loop if the code doesn't match
  }
  
  // Getting here means we know that the variable lang contains the language translations for 'Partly Cloudy'
  for (var j = 0 ; j < langFile.languages.length ; j++) { // Loop through translations to find Spanish
    var language = langFile.languages[j];

    if (language.lang_iso === 'es') {
      alert(language.day_text); // Success! This is where you will update your applications text. (You won't use alert)
    }
  }
  
}
     

    Any questions, let us know :).

     

    Hope that helps,

    Denno

    js/json issue....

    in Javascript Help

    Posted · Edited by denno020

    Yep this should be pretty easy.. Have you come close to any working code? I wouldn't mind seeing what you've got, and then I can try to show you where you're going wrong and how to change it. Might be better than me just giving you the answer I think :)

     

    Denno

    More Random Count

    in Javascript Help

    Posted

    I'm struggling to figure out which numbers you want to be random..

     

    But, for random numbers you can just use the Math object, and the random() function. That will return a decimal between 0 and 1, so you'll need to do some further work to get a whole number that is between some lower and upper limits. For setting those limits, the Mozilla Developer Network page for the Math.random() function has some great examples

     

    Denno

    Event binding with dynamic ID's

    in Javascript Help

    Posted

    What exactly isn't working? is the modal not being populated with the right data? That is because when you call $('.alert-modal').html(data), the data variable likely has a value of undefined

     

    If you can let me know exactly what isn't working, I can help you work through that.

     

    Ignore that I wrote the ID section of my code, that just seems to be confusing you

    Event binding with dynamic ID's

    in Javascript Help

    Posted

    You should be able to attach the listener to `#svrAlertsUS`, because the element itself isn't being replace, only it's contents, so the JS event binding won't be lost. But to answer your question, yes that event binding you've written will work.

     

    The suggestion I gave in regard to getting the ID will read whatever the ID is, regardless of how it came to be assigned to the returned data. I wasn't sure if you'd need it, I added it just in case.

     

    Looking at your original code again, the function executed when a link is clicked is going to need some more work. You'll likely want to read the content of the `#svrAlertsUS`, and then inject that into the modal, rather than relying on `data` still having the correct data that you want

     

    Denno

    Event binding with dynamic ID's

    in Javascript Help

    Posted

    You'll need to attach the click listener to an element higher up, that isn't replaced by AJAX.

     

    So for example, if you have a div with class `.alert-views-container`, and this is where the AJAX loaded data gets injected, then you would attach the listener to that, and use the second parameter of the `.on()` function to target the `a` element.

     

    Something like this:

    $(".alert-views-container").on('click', 'a', function(e) {
  var id = e.target.id; // Get the ID of the link that was clicked
  var id = this.id; // You could also get the ID this way, as the `this` keyword will contain the element clicked, but it's good to get into the practice of using the event, especially if you move to using arrow functions in the future
});

    It would probably be ideal that you give the `a` element a class, so you can target the class name rather than the element tag

     

    Hope that helps

    Denno

    Set width to multiSelect

    in Javascript Help

    Posted · Edited by denno020

    Is there a reason you're using JS to set the width and not CSS?

     

    It looks like you're targeting the <select> element, but due to the use of some multi-select plugin, the <select> element is actually hidden and will be updated automatically by the plugins' Javascript when you select one of the multi-select items (which are actually just rendered as <li>'s)

     

    Try targeting the element "#ms-multi_categories_list" when setting the width, and you should see things change.

    $("#ms-multi_categories_list").css('width', '1000px');

    Ideally, however, you would add this width information to your stylesheet

     

    Denno

    auto fill in input tag from date selected

    in Javascript Help

    Posted

    Sure can.. You'll need to put it into a Javascript function, and set that function to run when the input is changed:

    document.querySelector("input[name='date']").addEventListener('change', function(e) {
  var dateInput = e.target;
  var date = dateInput.value;
})

    There you will have the date value that they selected.

     

    From there, you create a new instance of the Javascript Date class, passing the date in as a paramater, and then call getDay() on it.. getDay() will return an integer, corresponding to the day of the week, with Sunday = 0 (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

     

    Have a crack at finishing that function off, and if you need more help, let us know.

    parsing url in js

    in Javascript Help

    Posted

    You can use string split method on val:

    var val = "http://test.com/test/john/1/2/3";
 
var parts = val.split('/');

    Parts now has each part of the URL in an array, with the last 4 entries being 'john', '1', '2' and '3'.

     

    You could also do a string replace, if 'http://test.com/test/" is always going to be exactly that

    var val = "http://test.com/test/john/1/2/3";
var params = val.replace('http://test.com/test/', '');

    They're 2 very basic ways to manipulate the URL string

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.